JavaWeb--JavaScript--2022年9月27日
第一节 简介
第二节 JavaScript引入方式
1、内部脚本：将JS代码定义在HTML页面中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> alert("hello js1"); </script> </body> </html>
提示：在html文档中可以在任意地方，放置任意数量的标签
一般把脚本置于元素的地步，可改善显示速度：因为浏览器在加载页面的时候会从上往下进行加载并解析。我们应该让用户看到页面内容，然后再展示动态的效果
2、外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
alert("hello js");
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="../js/demo.js"></script> </body> </html>
第三节 JavaScript基础语法
1、书写语法
2、输出语句
js可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同
A、使用window.alert()写入警告框
B、使用document.write()写入HTML输出
C、使用console.log()写入浏览器控制台
3、变量
A、定义变量一共就三种关键字：
var--全局变量，可以重复定义
let--局部变量，代码块里的变量，不可以重复定义
const--常量，定义后不可修改值
关于重复定义的案例
{
var age = 20;
var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30
4、数据类型
第四节 JavaScript基础语法之运算符
1、运算符总计
2、==和===的区别
==：
首先判断类型是否一样，如果不一样，则进行类型转换
其次再去比较其值
===：js中的全等于
首先判断类型是否一样，如果不一样，直接返回false
其次再去比较其值
var age1 = 20;
var age2 = "20";
alert(age1 == age2);// true
alert(age1 === age2);// false
3、类型转换
A、其他类型转number
String转换成number：按照字符串的字面值，转为数字。如果字面值不是数字(比如abc)，则转为NaN，转换方式有两种：
使用+正号运算符 var str = +"20"; alert(str+1)//21;
使用parseInt()函数方法 var str = "20"; alert(parseInt(str)+1); 建议使用parseInt()函数进行转换
boolean转换为number类型：true转为1，false转为0
var flag = +false;
alert(flag);//0
其他类型转为boolean
number类型转换为boolean类型：0和NaN转为false，其他的数字转为true
String类型转换为boolean类型：空字符串转为false，其他字符串转为true
null类型转换为boolean类型是false
undefined转换为boolean类型是false
4、一些使用场景
第五节 JavaScript基础语法之流程控制语句
用法和java是一样的
第六节 JavaScript基础语法之函数
1、定义格式-两种
function 函数名(参数1,参数2..){ 要执行的代码 }
var 函数名 = function (参数列表){ 要执行的代码 }
2、函数调用
第七节 JavaScript常用对象
1、Array对象
A、定义形式
B、元素访问： arr[索引] = 值;
C、特点
D、属性
E、方法
2、String对象
3、自定义对象
第八节 BOM
1、BOM是什么
2、Window对象
A、获取window对象
B、Window对象属性
C、Window对象函数
confirm代码演示
// confirm()，点击确定按钮，返回true，点击取消按钮，返回false var flag = confirm("确认删除？"); alert(flag);
定时器代码演示
3秒后弹出一次，以后不会再弹
setTimeout(function (){ alert("hehe"); },3000);
每2秒弹一次
setInterval(function (){ alert("hehe"); },2000);
3、History对象
4、location对象
第九节 DOM
1、概述
A、DOM是什么
B、作用
2、获取Element对象
3、Element对象的使用
查看文档；
第十节 事件监听
1、什么是事件
HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击 、 鼠标移动到元素之上 、 按下键盘按键 等都是事件。事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。例如当我们点击 开灯 按钮，就需要通过 js 代码实现替换图片。
2、事件绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数--> <input type="button" value="点我" onclick="on()"> <br> <input type="button" value="再点我" id="btn"> <script> function on(){ alert("我被点了"); } //方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件 document.getElementById("btn").onclick = function (){ alert("我被点了"); } </script> </body> </html>
3、常见事件
第十一节 RegExp对象
1、正则对象使用
2、正则表达式规则
浙公网安备 33010602011771号