JavaWeb笔记Day4------JavaScript
JavaWeb概念
Web概念概述
JavaWeb
使用Java语言开发基于互联网的项目
软件架构
-
C/S:Client/Server 客户端/服务器端
- 在用户本地有一个客户端程序,在远程有一个服务器端程序
- 如:QQ,迅雷。。。
- 优点:
- 用户体验好
- 缺点:
- 开发,安装,部署,维护 麻烦
-
B/S:Browser/Server 浏览器/服务器端
- 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
- 优点:
- 开发,安装,部署,维护 简单
- 缺点:
- 如果应用过大,用户的体验可能会受到影响
- 对硬件要求过高
BS架构详解
资源分类
-
静态资源
- 使用静态网页开发技术发布的资源
- 特点:
- 所有用户访问,得到的结果是一样的
- 如:文本,图片,音频,视频。HTML,CSS,JavaScript
- 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎。可以展示静态资源
- 分类:
- HTML:用于搭建基础网页,展示页面的内容
- CSS:用于美化页面,布局页面
- JavaScript:控制页面的元素,让页面有一些动态的效果
-
动态资源
-
使用动态网页及时发布的资源
-
特点:
- 所有用户访问,得到的结果可能不一样
- 如:jsp/servlet,php,asp
- 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
-
我们要学习动态资源,必须先学习静态资源!
-
JavaScript
概念
一门客户端脚本语言
-
运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
-
脚本语言:不需要编译,直接就可以被浏览器解析执行了
功能
可以来增强用户和HTML页面的交互过程,可以来控制HTML元素,让页面有一些动态的效果,增强用户的体验
发展史(了解就行)
ECMAScript
客户端脚本语言的标准
基本语法:
与html结合方式
-
内部JS:定义<script>,标签体内容就是js代码
-
外部JS:定义<script>,通过src属性引入外部的js文件
-
注意:
- <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序**
- <script>可以定义多个。
注释
- 单行注释://注释内容
- 多行注释:/*注释内容*/
数据类型:
原始数据类型(基本数据类型):
- number:数字。整数/小数/小数/NaN
- string:字符串。字符串 "abc" "a" 'abc'
- boolean:true和false
- null:一个对象为空的占位符
- undefined:未定义。如果应该变量没有给初始化值,则会被默认赋值为undefined
引用数据类型:
对象
变量
-
变量:一小块存储数据的内存空间
-
Java是强类型语言,而JavaScript是弱类型语言
- 强类型语言:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
- 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
-
语法:
-
var 变量名=初始化值;
-
typeof运算符:获取变量的类型。
-
-
注:null运算后得到的是object
运算符
一元运算符:
- 只有一个运算数的运算符
++,--,+(正号)-(负号)- +(-):正负号
- ++ --:自增(自减)
- ++(--)在前,先自增(自减),再运算
- ++(--)在后,先运算,再自增(自减)
- 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动将运算数进行类型转换
- 其他类型转number:
- string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
- boolean转number:true转为1,false转为0
算术运算符
+ - * / %
赋值运算符
= += -+.......
比较运算符
-
> < >= <= == ===(全等于)
-
比较方式:
1. 类型相同:直接比较
- 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止
2. 类型不同:先进行类型转换,再比较
- ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
逻辑运算符
- &&:与(短路)
- ||:或(短路)
- !:非
- 其他类型转boolean:
- number:0或NaN为假,其他为真
- string:除了空字符串(""),其他都是true
- null&undefined:都是false
- 对象:所有对象都为true
三元运算符
-
? :
-
语法:
- 表达式?值1:值2
- 判断表达式的值,如果是true则取值1,如果是false,则取值2
流程控制语句
-
if....else...
-
switch:
- 在 Java中,switch语句可以接受的数据类型:byte int shor char,枚举(1.5),String(1.7)
- 在JS中,switch语句可以接受任意的原始数据类型
-
while
-
do....while
-
for
特殊语法
//1.语句以;结尾,如果一行只有一条语句,则;可以省略(不建议) var a=3 alert(a) /* * 2.变量的定义使用var关键字,也可以不使用 * 用:定义的变量是局部变量 * 不用:定义的变量是全局变量(不建议) */ s=2; alert(a)
练习,九九乘法表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>99乘法表</title> <style type="text/css"> td{ border: 1px solid; } </style> <script type="text/javascript"> document.write("<table align='center'>"); //完成基本的for循环嵌套,展示乘法表 for(var i=1;i<=9;i++){ document.write("<tr>"); for(var j=1;j<=i;j++){ document.write("<td>"); document.write(i+" * "+j+" = "+(i*j)+" "); document.write("</td>"); } document.write("</tr>"); } //完成表格的嵌套 document.write("</table>"); </script> </head> <body> </body> </html>
基本对象
-
Function:函数(方法)对象
-
创建:
var fun=new Function(形式参数列表,方法体);//不推荐 //掌握 function 方法名称(形式参数列表){ //方法体 } -
方法
-
属性:
length:代表形参的个数
-
特点
-
方法定义时,形参的类型不用写,返回值类型也不写
-
方法是一个对象,如果定义名称相同的方法,会覆盖
-
在JavaScript中,方法的调用只与方法的名称有关,和参数列表无关
-
在方法声明中有一个隐藏的内置对象(数组),argument,封装所有的实际参数
//求任意个数的和 function add(){ var sum=0; for(var i=0;i<arguments.length;i++){ sum+=arguments[i]; } return sum; } var sum=add(1,2,3); alert(sum);
-
-
调用
方法名称(实际参数列表);
-
-
Array:数组对象
-
创建:
var arr=new Array(元素列表); var arr=new Array(默认长度); var arr=[元素列表]; -
方法:
//常用方法 join(参数):将数组中的元素按照指定的分隔符拼接为字符串 push(): 向数组的末尾添加一个或者更多元素,并返回新的长度 -
注:所有方法
-
-
属性:
length:数组的长度
-
特点:
- JavaScript中,数组元素的类型可变的
- JavaScript中,数组的长度是可变的
-
-
Boolean:包装类
-
Data:日期对象
-
创建
var Date=new Date(); -
方法:
toLocaleString():返回当前date对象对应的时间本地字符串格式 getTime():获取毫秒值.返回当前日期对象描述的时间到1970年1月1日0点的毫秒值
-
-
Math:数学对象
-
创建:
//Math对象不用创建,直接使用。 Math.方法名(); -
方法:
random():返回[0,1)之间的随机数。 ceil(x):对数进行向上取整 floor(x):对数进行向下取整 round(x):把数四舍五入为最接近的整数 -
练习:取1~100之间的随机整数
步骤
-
Math.random()产生随机数,范围[0,1)的小数
-
乘以100--->[0,100)小数
-
舍弃小数部分:floor-->[0,99]整数
-
+1--->[1,100]整数
代码:
var num=Math.floor((Math.random()*100))+1; document.write(num); -
-
-
Number
-
String
-
RegExp:正则表达式对象
-
正则表达式:定义字符串的组成规则
-
匹配单个字符:[]
如:[a],[ab],[a-zA-Z0-9_]
-
特殊符号代表特殊含义的单个字符:
- \d:单个数字字符[0-9]
- \w:单个单词字符[a-zA-Z0-9_]
-
-
量词符号:
-
?:表示出现0次或者1次
-
*:表示出现0次或者多次
-
+:出现一次或者多次
-
{m,n}:表示m<=数量<=n
- m如果缺省:{,n}:最多n次
- n如果缺省:{m,}:最少m次
-
开始结束规则:
- 开始:^
- 结束:$
例子:
//匹配长度为6-12位的单词字符 ^\w{6-12}$
-
-
在线正则表达式测试网站:在线正则表达式测试 (oschina.net)
-
正则对象:
-
创建
var reg=new RegExp("正则表达式"); var reg=/正则表达式/; eg: var reg=new RegExp("^\\w{6-12}$");//这里\要转义一下,用\转义,所以是\\ var reg=/^\w{6-12}$/; -
方法:
test(参数):验证指定的字符串是否符合正则定义的规范
-
-
-
Global
-
特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。
方法名(); -
方法:
encodeURI():url编码 decodeURI():url解码 encodeURIComponent():url编码,编码的字符更多 decodeURIComponent():url解码 parseInt():将字符串转为数字(逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number) isNaN():判断一个值是否是NaN(NaN参与的==比较全部为false) eval():计算JavaScript字符串,并把它作为脚本代码来执行
-
BOM
概念
Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象
组成
-
Windows:窗口对象
-
Navigator:浏览器对象
-
Screen:显示器对象
-
History:历史记录对象
-
Location:地址栏对象
Winodow:窗口对象
创建
方法
-
与弹出框有关的方法:
-
alert() 显示带有一段消息和一个确认按钮的警告框
-
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
- 如果用户点击确定按钮,则方法返回true
- 如果用户点击取消按钮,则方法返回false
-
prompt() 显示可提示用户输入的对话框
- 返回值:获取用户输入的值
-
-
与打开关闭有关的方法
- close() //关闭浏览器窗口----谁调用我,我关谁
- open() //打开一个新的浏览器窗口------返回新的Window对象
//示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Windows对象</title> </head> <body> <input type="button" name="" id="openBtn" value="打开窗口"> <input type="button" name="" id="closeBtn" value="关闭窗口"> <script type="text/javascript"> //打开新窗口 var openBtn=document.getElementById("openBtn"); var newWindow; openBtn.onclick=function(){ newWindow=open("https://www.bilibili.com"); } //关闭新窗口 var closeBtn=document.getElementById("closeBtn"); closeBtn.onclick=function(){ newWindow.close("https://www.bilibili.com"); } </script> </body> </html> -
与定时器有关的方法
-
setTimeout() 在指定的毫秒数后调用函数或计算表达式
- 参数:
- js代码或者方法对象
- 毫秒值
- 返回值:唯一标识,用于取消定时器
- 参数:
-
clearTimeout() 取消由setTimeout()方法设置的timeout
-
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
-
clearInterval() 取消由setInterval()设置的timeout
//示例 //一次性定时器 var id=setTimeout(fun,3000); function fun(){ alert('boom~~'); } //取消定时器 clearTimeout(id); //循环定时器 var id01=setInterval(fun,2000); //取消定时器 clearInterval(id01); -
-
案例:轮播图
分析:
- 在页面上使用img标签展示图片
- 定义一个方法,修改图片对象的src属性
- 定义一个定时器,每隔3秒调用方法一次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> </head> <body> <img src="img/banner_1.jpg" alt="" width="100%" id="img"> <script type="text/javascript"> //修改图片属性 var number=1; function fun() { number++; //判断number是否大于3 if (number>3) { number=1; } var img=document.getElementById("img"); img.src="img/banner_"+number+".jpg"; } //2.定义定时器 setInterval(fun,3000); </script> </body> </html>
属性
-
获取其他BOM对象:
history
location
Navigator
Screen
-
获取DOM对象
document
特点
-
Window对象不需要创建可以直接使用Window使用。Window.方法名();
-
Window引用可以省略。 方法名();
Location:地址栏对象
创建(获取)
- window.location
- location
方法
reload()---重新加载当前文档
属性
href---设置或返回完整的URL
案例
-
分析:
- 显示页面效果
- 倒计时读秒效果实现
- 定义一个方法,获取span标签,修改span标签体内容,时间--
- 定义一个定时器,1s执行一次该方法
- 在方法中判断时间如果<=0,则跳转到首页
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自动跳转</title> <style type="text/css"> p{ text-align: center; } span{ color: red; } </style> </head> <body> <p> <span id="time">5</span>秒之后,自动跳转到首页... </p> <script type="text/javascript"> //倒计时读秒效果实现 var second=5; var time=document.getElementById("time"); function showTime(){ second--; if (second<=0) { location.href="https://www.bilibili.com" } time.innerHTML=second+""; } //设置定时器,1s执行一次该方法 setInterval(showTime,1000); </script> </body> </html>
History:历史记录对象
创建(获取)
-
window.history
-
history
方法
- back() 加载history列表中的前一个URL
- forward() 加载history列表中的下一个URL
- go(参数) 加载history列表中的某个具体页面
- 参数:
- 正数:前进几个历史记录
- 负数:后退几个历史记录
- 参数:
属性
length 返回当前窗口历史列表中的URL数量
DOM
概念
Document Object Model 文档对象模型
-
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言进行CRUD的动态操作
W3C DOM标准被分为3个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型
- Document:文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,其他5个的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
功能
控制html文档的内容
代码
获取页面标签(元素)对象Element
//通过元素的id获取元素对象 document.getElementById("id值");
操作Element对象
- 获取属性值
- 明确获取的对象是哪一个
- 查看api文档,找其中有哪些属性可以设置
- 修改标签体内容
事件
-
功能:
某些组件被执行了某些操作后,触发某些代码的执行
-
绑定方法:
-
直接在html标签上,指定事件的属性(操作),属性值就是js代码
事件:onclick------单击事件
-
通过js获取元素对象,指定事件属性,设置一个函数
//实例 function fun2(){} var light=document.getElementById("light"); light.onclick()=fun2;
-
-
案例:电灯开关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>电灯开关</title> </head> <body> <img src="img/off.gif" alt="" id="light"> <script type="text/javascript"> /* 分析: 1.获取图片对象 2.绑定单击事件 3.每次点击切换图片 规则: 如果灯是开的 on->off 如果灯是关的 off->on 使用标记flag来完成 */ //获取图片对象 var light=document.getElementById("light"); var flag=false; //绑定单击事件 light.onclick=function(){ if (flag==false) { light.src="img/on.gif"; flag=true; }else{ light.src="img/off.gif"; flag=false; } } </script> </body> </html>
核心DOM模型
Document:文档对象
- 创建(获取):在HTML DOM模型中可以使用window对象来获取
- window.document
- document
- 方法
- 获取Element对象:
- getElementById():根据id属性值获取元素对象。id属性值一般唯一
- getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
- getElementsByName():根据name属性值获取元素对象们。返回值是一个数组
- 创建其他DOM对象:
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()
- 获取Element对象:
- 属性
Element:元素对象
-
获取/创建:通过document来获取和创建
-
方法:
- removeAttribute():删除属性
- setAttribute():设置属性
-
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Element对象</title> </head> <body> <a>点我试一试</a> <input type="button" id="btn_set" value="设置属性"> <input type="button" id="btn_remove" value="删除属性"> <script> //获取btn_set元素 var btn_set = document.getElementById("btn_set"); btn_set.onclick = function(){ //1.获取a标签 var element_a=document.getElementsByTagName("a")[0]; element_a.setAttribute("href","http://www.baidu.com"); } //获取btn_remove元素 var btn_remove = document.getElementById("btn_remove"); btn_remove.onclick = function(){ //1.获取a标签 var element_a=document.getElementsByTagName("a")[0]; element_a.removeAttribute("href"); } </script> </body> </html>
Node:节点对象,其他5个的父对象
-
特点:所有dom对象都可以被认为是一个节点
-
方法:
- CRUD dom树:
- appendChild():向节点的子节点列表的结尾添加新的子节点。
- removeChild():删除(并返回)当前节点的指定子节点
- replaceChild():用新节点替换一个子节点
- CRUD dom树:
-
属性:
- parentNode 返回节点的父节点
-
案例:动态表格
-
分析:
- 添加
- 给添加按钮绑定单击事件
- 获取文本框内容
- 创建tr,td,设置td的文本为文本框的内容
- 创建tr
- 将td添加到tr中
- 获取table,将tr添加到table中
- 删除
- 确定点击的是哪一个超链接
- 怎么删除
- 添加
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" id="btn_add"> </div> <table> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> <tr> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> <tr> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> </table> <script> //1.获取按钮 document.getElementById("btn_add").onclick = function(){ //2.获取输入框的内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //3.创建td,赋值td的标签体 //id的td var td_id=document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); //name的td var td_name=document.createElement("td"); var text_name=document.createTextNode(name); td_name.appendChild(text_name); //gender的td var td_gender=document.createElement("td"); var text_gender= document.createTextNode(gender) td_gender.appendChild(text_gender); //a标签的td var td_a= document.createElement("td"); var ele_a=document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);"); ele_a.setAttribute("onclick","delTr(this);"); var text_a=document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); //4.创建tr var tr = document.createElement("tr"); //5.添加td到tr中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //6.获取table var table=document.getElementsByTagName("table")[0]; table.appendChild(tr); } //删除方法 function delTr(obj){ var table=obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>
-
HTML DOM
-
标签体的设置和获取:innerHTML
例:上例innerHTML添加
//使用innerHTML添加 document.getElementById("btn_add").onclick=function(){ //2.获取输入框的内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //获取table var table=document.getElementsByTagName("table")[0]; //追加一行 table.innerHTML+="<tr>\n"+ "<td>"+id+"</td>\n"+ "<td>"+id+"</td>\n"+ "<td>"+id+"</td>\n"+ "<td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n"+ "</tr>"; } -
使用html元素对象的属性
例:
//修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size--> fontSize div1.style.fontSize = "20px"; -
控制样式
- 使用元素的style属性来设置样式
- 提前定义好类选择器的样式,通过元素的className属性来设置class属性值
事件监听机制
概念:
某些组件被执行了某些操作后,触发某些代码的执行
- 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
- 事件源:组件。如: 按钮 文本输入框...
- 监听器:代码。
- 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
常见的事件
- 点击事件:
- onclick:单击事件
- ondblclick:双击事件
- 焦点事件
- onblur:失去焦点
- onfocus:元素获得焦点。
- 加载事件:
- onload:一张页面或一幅图像完成加载。
- 鼠标事件:
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
- 键盘事件:
- onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开
3. onkeypress 某个键盘按键被按下并松开。
- onkeydown 某个键盘按键被按下。
- 选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
- 表单事件:
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。
本文作者:灰之魔女伊蕾娜
本文链接:https://www.cnblogs.com/daohengdao/p/15922804.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库