day04
一、JavaScript
1.javascript是一种函数优先的轻量级的、解释性的编程语言
2.组成部分:ECMAScript:描述该语言的基础语法和对象
文旦对象模型(DOM):描述网页内容的方法和函数(用于操作htnl里面的标签对象)
浏览器对象模型(BOM):描述与浏览器进交互的方法与函数
3.js的作用:
A.可以是html页面动起来
B.对浏览器事件作出响应
C.读写HTML元素
D.在数据被提交到服务器之前 验证数据
E.检测访客的浏览信息控制cookies
F.基于node.js进行服务端编程
二、js的语法
2.1 变量
1.语法:var 变量名=变量;
例子:var num = 10;
2.注意点:
A.js中定义关键字: var ,js里面给变量进行复制的时候确定其数据类型
B.js里面的变量名不能与关键字重名
2.2 数据类型
1.基本数据类型:
Number(数值类型) boolean布尔类型 string 字符串类型 underfined 为定义类型
2.typeof()这个方法来获取其数据类型
3.引用数据类型:
js里面的对象表示引用数据类型 对象的格式json {}==>对象 []==>数组
2.3 运算符
1.逻辑运算符
&& 并且(两个条件为真才返回true)
|| 或者(任意一个条件为真才返回true)
! 非(取反)
2.算数运算符
+ 加
- 减
* 乘
/ 除
% 取余数
3.关系运算符
> 大于
< 小于
>= 大于等于
<= 小于等于
!= 不等于
== 只比较数值是否相等
=== 即比较数值 也比较数据类型
4.赋值运算符
+= 加等于
-= 减等于
*= 乘等于
/= 除等于
%= 取余等于
5.三元运算符
A.语法:表达式1 ? 表达式2 : 表达式3;
B.注意点:
1.表达式1返回的是Boolean类型的数据,
2.表达式2和表达式3是可以为任何类型,但是必须是同一种类型
三、选择结构
1.if-else表达式选择结构语法;
if(表达式){
操作1
}else{
操作2
}
2.switch表达式结构语法:
var 表达式
switch(表达式){
case 常量1:
操作1;
break;
case 常量2:
操作2;
break;
default:
操作3;
break;
四、循环结构
1.for循环语法:
for(初始化语句;循环条件判断;循环变量的改变){
循环体;
}
2.while循环语法:
初始化语句
while(循环条件判断){
循环体;
循环变量的改变;
}
3.do-while循环语法:
初始化语句;
do{
执行循环体
循环变量的改变
}while(循环条件的判断)
增强for循环
for(var 变量名 in 遍历的数组){
循环操作体;
变量名==>数组里面的索引
}
五、函数
1.js里面的函数语法
function 函数名(){
函数体
return 返回值;
}
2.注意点:
A.function是js里面定义函数的关键字
B.js里面定义函数时,不需要声明数据类型
六、js的三种弹框
1.警告框:alert("提示信息")
2.确认框:confirm("是否确认")(如果选择确定,返回true 选择取消则是返回false)
3.带输入框:prompt("参数1","参数2")(第一个参数表示提示语,第二个参数表示参数的默认输入值)
七、js事件
1.onchange 条目发生改变的事件
2.onclick 点击事件
3.onload 页面加载完成的事件
4.onmouseout 鼠标从某个元素移开的事件
5.onmouseover 鼠标从某个元素移入的事件
6.onsubmit 提交按钮被点击
八、js和DOM
8.1 DOM的简介
1.DOM是文档对象模型
2.js里面可以使用DOM来操节点(html里面的标签)对象
8.2 DOM树
浏览器在加载HTML标签的时候,会形成一个DOM对象 通过DOM可以获取到html里面的标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qNjPV8Qm-1647606981493)(C:/Users/%E6%82%B2%E9%99%8C/AppData/Roaming/Typora/typora-user-images/image-20220318185906477.png)]
8.3 获取节点对象
1.document.getElementById("") 根据id来获取html里面的属性(唯一)
2.document.getElementsByTagName("") 根据标签的名来获取节点对象(数组)
3.document.getElementsByClassName("") 根据class来获取html里面的节点对象(数组)
4.document.getElementsByName("") 通过name标签来获取html里面的节点对象
8.4 改变HTML
1.document.write() 在网页里面写入内容
2.document.getElementById("").innerHTML 获取标签里的中间的内容(识别HTML标签)
3.document.getElementById("").innerText 获取标签中里面的纯文本内容(不能识别标签)
4.document.getElementById("tv_div02").src 通过获取节点对象来获取属性值
注意点:
第一种:设置标签中间的内容(纯文本)
第二种:设置标签中间的内容(包括标签)
第三种:设置标签的属性
总结:
innerHTML innerText src 获取值 ;
innerHTML="" innerText="" src="" 表示的是设置值
8.5 css样式的改变
语法:节点对象.style.属性=”属性值“
8.6 DOM事件
8.6.1 直接在标签里写事件
8.6.2 与函数进行绑定的事件
8.6.3 EventListener事件
1.addEventListener(参数1,参数2,参数3)
标签绑定事件(第一个参数表示的是事件的名称,执行的函数,执行的规则)
2.removeEventListener((参数1,参数2,参数3)
标签移出事件(对比上面)
8.6.4
8.6.1 直接在标签里写事件
8.6.2 与函数进行绑定的事件
8.6.3 EventListener事件
1.addEventListener(参数1,参数2,参数3)
标签绑定事件(第一个参数表示的是事件的名称,执行的函数,执行的规则)
2.removeEventListener((参数1,参数2,参数3)
标签移出事件(对比上面)
8.6.4