首页 > 编程语言 >9.JavaWeb& javaScript基础

9.JavaWeb& javaScript基础

时间:2024-03-20 23:29:26浏览次数:53  
标签:javaScript JavaWeb 对象 JavaScript 基础 运算符 var document

目录

导语:

一、JavaWeb概述

二、JavaScript基础

概念:

功能:

1.基本语法

(1)与html结合方式

(2)注释

(3)数据类型

(4)变量

(5)运算符

(6)流程控制语句:

(7)JS特殊语法:

案例:99乘法表

2.基本对象

(1)Function:函数(方法)对象

(2)Array:数组对象

(3)Boolean

(4)Date:日期对象

(5)Math:数学对象

(6)Number

(7)String

(8)RegExp:正则表达式对象

(9)Global

三、案例

1.创建注册表单(HTML)

2.处理表单提交(JSP)

3.验证表单数据(JavaScript)

结语:


导语:

    在当今的互联网时代,动态网页已成为主流。JavaWeb和JavaScript是构建动态网页的基石。本文将为您概述JavaWeb和JavaScript的基础知识,并通过案例展示它们在实际开发中的应用。

一、JavaWeb概述

    JavaWeb是使用Java技术栈进行Web开发的一系列技术规范和框架的总称。它包括Servlet、JSP、JSTL、EL表达式等,用于处理客户端请求、数据库交互以及生成动态内容。

Servlet:Servlet是JavaWeb的核心,用于接收和响应客户端请求。它是一个运行在服务器端的Java程序,能够动态扩展Web服务器的功能。

JSP:JSP(JavaServer Pages)是一种动态网页技术,允许在HTML页面中嵌入Java代码。JSP页面由服务器端编译成Servlet,然后执行并生成HTML响应。

JSTL:JSTL(JavaServer Pages Standard Tag Library)是一套标准标签库,用于简化JSP页面的编码。

EL表达式:EL(Expression Language)表达式用于轻松访问Web应用程序中的数据。

二、JavaScript基础

    JavaScript是一种客户端脚本语言,运行在浏览器中。它用于增强网页的交互性和动态性。JavaScript基础知识包括变量、数据类型、运算符、控制结构、函数等。

概念:

    一门客户端脚本语言,运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎。(脚本语言:不需要编译,直接就可以被浏览器解析执行了)

功能:

    可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。

1.基本语法

(1)与html结合方式

  • 内部JS:定义<script>,标签体内容就是js代码

  • 外部JS:定义<script>,通过src属性引入外部的js文件

(2)注释

  • 单行注释://注释内容

  • 多行注释:/*注释内容*/

(3)数据类型

  1. 原始数据类型(基本数据类型):

    1. number:数字。整数/小数/NaN(not a number 一个不是数字的数字类型)

    2. string:字符串。字符串  "abc" "a" 'abc'

    3. boolean: true和false

    4. null:一个对象为空的占位符

    5. undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined

  2. 引用数据类型:对象

(4)变量

  • 变量:一小块存储数据的内存空间

    Java语言是强类型语言,而JavaScript是弱类型语言。

    强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据

    弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。

  • 语法:var 变量名 = 初始化值;

  • typeof运算符:获取变量的类型。(null运算后得到的是object)

(5)运算符

  • 一元运算符:只有一个运算数的运算符++,-- , +(正号)  

  • 算数运算符:+ - * / % ...

  • 赋值运算符:= += -+....

  • 比较运算符:> < >= <= == ===(全等于)

  • 逻辑运算符:&& || !

  • 三元运算符:表达式? 值1:值2;

(6)流程控制语句:

  • if...else...

  • switch:

    在java中,switch语句可以接受的数据类型:byte int shor char,枚举(1.5) ,String(1.7)

    在JS中,switch语句可以接受任意的原始数据类型

  • while

  • do...while

  • for

(7)JS特殊语法:

  • 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)

  • 变量的定义使用var关键字,也可以不使用

    • 用:定义的变量是局部变量

    • 不用:定义的变量是全局变量(不建议)

案例:99乘法表

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>99乘法表</title>
        <style>
            td{
                border: 1px solid;
            }
</style>
    
        <script>
    
            document.write("<table  align='center'>");
//1.完成基本的for循环嵌套,展示乘法表
            for (var i = 1; i <= 9 ; i++) {
                document.write("<tr>");
                for (var j = 1; j <=i ; j++) {
                    document.write("<td>");
    
                    //输出  1 * 1 = 1
                    document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
    
                    document.write("</td>");
                }
                /*//输出换行
                document.write("<br>");*/
    
                document.write("</tr>");
            }
    
            //2.完成表格嵌套
            document.write("</table>");
    
        </script>
    </head>
    <body>
    
    </body>
    </html>

2.基本对象

(1)Function:函数(方法)对象

方法名称(实际参数列表);

  • 创建:

    1. var fun = new Function(形式参数列表,方法体);  //忘掉吧

    2. function 方法名称(形式参数列表){

      方法体

       }

    3. var 方法名 = function(形式参数列表){

      方法体

      }

  • 方法:

  • 属性

    1. length:代表形参的个数

  • 特点

    1. 方法定义是,形参的类型不用写,返回值类型也不写。

    2. 方法是一个对象,如果定义名称相同的方法,会覆盖

    3. 在JS中,方法的调用只与方法的名称有关,和参数列表无关

    4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数

  • 调用

(2)Array:数组对象

  • 创建

    1. var arr = new Array(元素列表);

    2. var arr = new Array(默认长度);

    3. var arr = [元素列表];

  • 方法

    1. join(参数):将数组中的元素按照指定的分隔符拼接为字符串

    2. push() 向数组的末尾添加一个或更多元素,并返回新的长度。

  • 属性

    length:数组的长度

  • 特点

    1. JS中,数组元素的类型可变的。

    2. JS中,数组长度可变的。

(3)Boolean

(4)Date:日期对象

var date = new Date();

  • 创建

  • 方法

    1.  toLocaleString():返回当前date对象对应的时间本地字符串格式

    2.  getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

(5)Math:数学对象

PI

  • 创建

    特点:Math对象不用创建,直接使用。  Math.方法名();

  • 方法

    1.  random():返回 0 ~ 1 之间的随机数。含0不含1

    2. ceil(x):对数进行上舍入。

    3. floor(x):对数进行下舍入。

    4. round(x):把数四舍五入为最接近的整数。

  • 属性

(6)Number

(7)String

(8)RegExp:正则表达式对象

  • 正则表达式

    1.  单个字符:[] 如:[a] [ab] [a-zA-Z0-9_]

      特殊符号代表特殊含义的单个字符:

      \d:单个数字字符 [0-9]

      \w:单个单词字符[a-zA-Z0-9_]

    2. 量词符号:

      1. ?:表示出现0次或1次

      2. *:表示出现0次或多次

      3. +:出现1次或多次

      4. {m,n}:表示 m<= 数量 <= n

        1. m如果缺省:{,n}:最多n次

        2. n如果缺省:{m,} 最少m次

    3. 开始结束符号

      1. ^:开始

      2. $:结束

  • 正则对象

    1. 创建

      1. var reg = new RegExp("正则表达式");

      2. var reg = /正则表达式/;

    2. 方法

      1. test(参数):验证指定的字符串是否符合正则定义的规范

(9)Global

全局对象,这个Global中封装的方法不需要对象就可以直接调用。  方法名();

  • 特点

  • 方法

    1. encodeURI():url编码

    2. decodeURI():url解码

    3. encodeURIComponent():url编码,编码的字符更多

    4. decodeURIComponent():url解码

    5. parseInt():将字符串转为数字

      1. 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number

    6. isNaN():判断一个值是否是NaN

      1. NaN六亲不认,连自己都不认。NaN参与的==比较全部问false

    7. eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。

  • URL编码

三、案例

使用JavaWeb和JavaScript构建动态网页

在本案例中,我们将创建一个简单的用户注册表单,使用JavaWeb处理表单提交,并使用JavaScript验证表单数据。

1.创建注册表单(HTML)

<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
</head>
<body>
    <form action="register.jsp" method="post">
        用户名:<input type="text" name="username" id="username"><br>
        密码:<input type="password" name="password" id="password"><br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

2.处理表单提交(JSP)

<%@ page import="java.io.*, java.util.*" %>
<%
String username = request.getParameter("username");
String password = request.getParameter("password");

// 在此处连接数据库,验证用户名和密码
out.println("注册成功!");
%>

3.验证表单数据(JavaScript)

<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("registerForm").addEventListener("submit", function(event) {
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            if (username === "" || password === "") {
                alert("用户名和密码不能为空!");
                event.preventDefault();
            }
        });
    });
</script>

结语:

    JavaWeb和JavaScript是构建动态网页的基石。JavaWeb提供了服务器端处理客户端请求、数据库交互以及生成动态内容的能力。JavaScript则用于增强网页的交互性和动态性。通过本文的概述和案例,我们希望您能更好地理解JavaWeb和JavaScript的基础知识,并在实际开发中灵活运用。掌握这些技术,将为您在Web开发领域奠定坚实的基础。

(一份Java面试宝典,有兴趣的读者姥爷可以私信我领取!!!免费滴)

图片

 

标签:javaScript,JavaWeb,对象,JavaScript,基础,运算符,var,document
From: https://blog.csdn.net/weixin_42378614/article/details/136826142

相关文章

  • 最基础树状数组
    1.单点加2.前缀和查询intn,m;inta[N];inttr[N];intlowbit(intx){ returnx&(-x);}voidadd(intpos,intk){ for(inti=pos;i<=n;i+=lowbit(i))tr[i]+=k;}intquery(intx){ intres=0; for(inti=x;i;i-=lowbit(i))res+=tr[i]; returnres;}voidsolve(......
  • JavaScript 中的函数式编程
    一、问题背景例子下面的代码是一个函数式编程的例子我们先观察一下里面有哪些特殊的语法点,再一一讲解constprogrammerOutput=[{name:'UncleBobby',linesOfCode:500,},{name:'SuzieQ',linesOfCode:1500,},{name:'JimmyGosl......
  • 九.pandas绘图基础
    目录九.pandas绘图基础1-柱状图--参数stacked=True堆积--参数figsize=(宽,高)--自定义横坐标--设置字体&显示负号2.箱型图3.折线图九.pandas绘图基础Pandas的DataFrame和Series,在matplotlib基础上封装了一个简易的绘图函数,使得我们在数据处理过程中方便可视化......
  • 爬虫入门系列-HTML基础语法
    ......
  • 【前端Vue】Vue从0基础完整教程第3篇:面经PC端-element (上)【附代码文档】
    Vue从0基础到大神学习完整教程完整教程(附代码资料)主要内容讲述:vue基本概念,vue-cli的使用,vue的插值表达式,{{gaga}},{{if(obj.age>18){}}},vue指令,综合案例-文章标题编辑vue介绍,开发vue的方式,基本使用,如何覆盖webpack配置,目录分析与清理,vue单文件组件的说明,vue通......
  • java基础的项目
    334,零钱通   思路:(1)先完成显示菜单,并可以选择菜单,给出对应提示(2)完成零钱通明细,简单的话可以使用String拼接(3)完成收益入账  完成功能驱动程序员增加新的变化和代码(4)消费(5)退出(6)用户输入4退出时,给出提示"你确定要退出吗?y/n",必须输入正确的y/n,否则循环输入指令,直到......
  • Linux基础命令
    一.Linux的目录结构Linux的目录结构是一个树型结构Windows系统可以拥有多个盘符,如C盘、D盘、E盘Linux没有盘符这个概念,只有一个根目录/所有文件都在它下面二.Linux命令1.Linux命令基础格式command[-options][parameter]command命令本身options:[可选,非必填]命......
  • (day 13)JavaScript学习笔记(对象1)
    概述        这是我的学习笔记,记录了JavaScript的学习过程。在写博客的时候我会尽量详尽的记录每个知识点。如果你完全没接触过JavaScript,那么这一系列的学习笔记可能会对你有所帮助。    今天学习对象,主要是创建对象、对象属性、省略key、遍历对象属性、删......
  • JavaScript中的“==“和“===“运算符的区别
    JavaScript中的比较运算符"=="和"==="用于比较两个值是否相等。尽管它们的目的相同,但它们在比较过程中采用了不同的策略1.“==”相等运算符:"=="运算符执行一种松散相等比较,它在比较之前会进行类型转换。如果进行比较的两个值类型不同,JavaScript会尝试将它们......
  • (C++20) jthread中stop_token的基础使用
    (C++20)jthread中stop_token的基础使用文章目录(C++20)jthread中stop_token的基础使用C++20jthread使用方式循环判断条件变量condition_variable_anystop回调std::stop_callbackENDC++20jthreadstd::jthread-cppreference.comstd::stop_token-cpprefere......