JavaWeb——后端开发必备的JavaScript知识

article/2025/9/23 4:50:35

JS学习

1.什么是JavaScript，有什么用？

答：JavaScript是网景公司发明的，运行在浏览器上的脚本语言，简称JS。
补充：网景公司现在没了，被美国在线收购了。

2.在HTML中嵌入JavaScript代码的三种方式

  1. 在标签中直接加入事件句柄引入

        <input type="button" value="这是一个弹窗" onclick="window.alert('hello');window.alert('你好!')">

  2. 脚本块

     <script type="text/javascript">window.alert("first");window.alert("Hi~");
</script>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.alert("Head");window.alert("Hi~");</script>
</head>
<body><script type="text/javascript">/*暴露在脚本块当中的程序，在页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行(这个代码执行不需要事件)* */window.alert("Hello World!");window.alert("Hi~");</script><input type="button" value="我是一个按钮">
</body>
</html>

    注意：JavaScript的脚本块在一个页面当中可以出现多次，没有要求。

    JavaScript的脚本块出现的位置也没有要求，随意。

    alert有阻挡页面加载的作用。

  3. 引入JS文件

    在需要的位置引入js脚本文件

    引入外部独立的js文件的时候，js文件中的代码会遵循 自上而下的顺序依次逐行执行

    同一个js文件可以被引入多次，实际开发中这种需求很少。

    格式：<script type="text/javascript" src="js文件"></script>

    注意：

    1. 这种引入格式是错误的<script type="text/javascript" src="1.js"/>

    2. <script type="text/javascript" src="js文件">代码1</script>代码1不会被执行。

3. 标识符

  • 标识符可以标识变量名、属性名、数组名、函数名等。
  • 第一个字符必须是字母、下划线或美元符号，其他字符可以使用字母、数字、下划线或美元符号。
  • 标识符不能和JavaScript的关键字同名。
  • JavaScript中标识符是区分大小写的。

4. 变量

JavaScript是一门弱类型语言，不像Java语言在程序编译阶段就确定变量的数据类型。例如int age = 10;在程序编译阶段age变量的类型就被确定为int类型。但是JavaScrip是不需要编译的，直接解释执行，所以在编写JavaScript程序的时候不需要指定变量的类型，程序运行期确定变量的类型。在JavaScript中定义变量使用如下语法：

  • var 变量名[=初始化值]

  • var表示动态数据类型，当程序执行上面这行代码的时候才会确定这个变量的具体类型。如果变量没初始化，打印出来的值就是undefined，表示为未定义的，类似Java的null。

  • 全局变量的声明

    1. 使用var关键字+变量名在函数外部声明的就是全局变量:

      var b = "张三";

    2. 没有使用var关键字声明，直接给变量名赋值，不管是在函数内部还是外部都是全局变量：

      		text = "全局变量";function bl() {text1 = "我也是全局变量";var text2 = "我是局部变量";console.log(text2); //局部变量只能在函数中使用}bl() //结果：我是局部变量console.log(text); //结果：全局变量console.log(text1); //结果：我也是全局变量//console.log(text2); //局部变量，在函数外使用会报错

    3. 使用window全局对象来声明，全局对象的属性对应也是全局变量：

      window.test3 = 'window全局对象声明全局变量';console.log(test3);//结果：window全局对象声明全局变量

  • 局部变量的声明

    • 一定要使用var关键字。因为在使用var关键字声明变量时，变量会自动添加到距离最近的可用环境中。

      		function bl() {text1 = "我是全局变量";//没有使用var 为全局变量var text2 = "我是局部变量";console.log(text2); //局部变量只能在函数中使用}

  • 注意：使用var创建的变量不能使用delete释放内存，其他方式创建的变量可以使用delete释放内存。

5. 函数

  • 函数function类似于Java语言中的方法Method，也是一段可以完成特定功能的代码片段，并且这段代码片段是可以重复利用的。在JavaScript中定义函数的语法：

    函数类似Java中的方法，也可以有返回值，有参数可以被调用，不调用不执行。有两种定义语法：1. function 函数名(参数列表){函数体}2. var 函数名 = function(参数列表){函数体}第二种是使用一个匿名函数将函数的引用赋值给一个变量，这个变量名就相当于函数的名字。

  • 函数的调用

    1. 函数名(实参列表)
    2. var 返回值 = 函数名(实参列表)(有返回值的情况)

  • 例子：

    				function a(){alert("这是a函数");}a();function b(a, b){alert("参数a = " + a + " 参数b = " + b);}b(); // 输出：参数a = undefined 参数b = undefined，自动传的默认值。b(100); // 只给a赋值b(100, 200); // 给a和b都赋值function c(a, b){var  c  = a + b;return c;}alert(c(100, 200));

  • 注意：

    1. JS是弱类型语言，因此函数不需要指定返回类型。如果函数需要返回数据，直接使用return 数据即可返回。
    2. JS是弱类型语言，因此函数的形参列表不需要指定参数类型，只写参数名即可。

6. 数据类型

  • JavaScript中有5种数据类型：4种原始类型(基本数据类型)Undefined、Boolean、Number、String。一种引用数据类型——Object，自定义的函数也是一种引用数据类型，可以看作Object类型的子类型。ES6规范中又添加了一种新的类型：Symbol。

  • JavaScript是松散类型的，因此需要有一种手段来检测给定变量的数据类型，typeof运算符就是负责提供这方面信息的操作符。对一个值使用typeof操作符可能返回下列某个字符串：

    • “undefined”——这个未定义
    • “boolean”——这个是布尔值
    • “string”——这个是字符串
    • “number”——这个是数值
    • “object”——这个是对象或null
    • “function”——这个是函数

  • typeof语法有三种写法

    1. typeof 变量名
    2. typeof(变量名)
    3. typeof 函数名

  • typeof例子：

    			var  a ;document.write("a =  " + (typeof a) + "<br/>");var b = 100;document.write("b = " + (typeof b) + "<br/>");var c = 100.5;document.write("c = " + (typeof c) + "<br/>") ;var d = "100";document.write("d = " + (typeof d) + "<br/>") ;var e = null;document.write("e = " + (typeof e) + "<br/>") ;var g = true;document.write("g = " + (typeof g) + "<br/>") ;var h = function(){};document.write("h = " + (typeof h) + "<br/>") ;打印出：
a = undefined
b = number
c = number
d = string
e = object
g = boolean
h = function

  • Boolean类型

    • 该类型只有两个字面值：true或false。

    • 要将一个值转换为其对应的Boolean值，可以调用类型转换函数Boolean()，其转换规则如下：

      数据类型转换为true值转换为false值
      Booleantruefalse
      String任何非空字符串“”(空字符串)
      Number任何非零数字值(包括无穷大)0和NaN(表示不是一个数字)
      Object任何对象null
      Undefinedxundefined

    • if语句中会自动执行相应的Boolean转换。

      var message = "helloworld";
if (message)
{xxxx
}

  • Number类型

    • 该类型用来表示整数和浮点数值，以及NaN(非数值 Not a number)。这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(一般出现在一个非数值与一个数值作计算的时候)。

    • 注意：NaN与任何数都不相等，包括它自己。

    • JavaScript中有一个isNaN()函数，这个函数接受一个参数，该参数可以是任何类型，而这个函数会帮我们确定这个参数是否"不是数值"。

      • 通常用这个方法判断一个字符串是不是一个数字型的内容。如果是则可以进行计算或转型，如果不是数字则不能计算或转型，否则会出现NaN的情况。

    • 类型转换

      1. Number()
      2. parseInt()
      3. parseFloat()
      • 第一个函数可以用于任何数据类型，而另外两个函数则专门用于把字符串转换成数值。
      • 如果是Boolean值，true或false会被替换成1和0
      • 如果是数字值，只是简单的传入和返回
      • Number在转换时如果字符串包含不能转换的字符时直接返回NaN
      • parseInt和ParseFloat在作转换的时候从字符串的左侧开始转换，直到遇到不能转换的字符结束转换并将之前转换后的数据返回。如果第一个字符就不能转换那么才返回NaN。
      • 注意：也可以使用字符串*1的方式进行转换，它的转换规则和Number是一样的。

7. 自定义对象

  • 创建对象语法格式：var 对象名 = new 构造方法();

  • 创建类(所对应的构造方法)

    • 语法格式：

      function 类名(形参列表){this.属性名[=初始化值]; // 相当于定义了一个公共属性this.方法名 = function(形参列表){ // 相当于定义了一个公共方法方法体}
}
// 为什么说是公共的，因为在外部可以直接通过对象名.属性名/方法名去调用。

  • 例子：

    			function User(name, age, address){this.name = name; this.age = age;var address = address; // 私有属性this.show = function(){document.write("name = " + this.name + "&nbsp;&nbsp;&nbsp; age = " + this.age + "<br/>");document.write("address = " + address + "<br/>");}this.getAd = function(){return address;}this.setAd = function(add){address = add; // 不能用this.address，因为address只是个局部变量不属于对象。}}var user = new User();user.show()user.name = "张三"user.age = 16user.setAd("上海")user.show()alert(user.getAd())var user2 = new User("李四", "14", "北京");user2.show()

  • 注意：

    1. this表示当前对象，this.属性名表示这个属性是当前对象的属性，操作属性的时候需要通过对象.属性名进行操作。
    2. 使用this定义的属性和方法都是公共的，如果使用var定义的方法和属性为私有那么只在当前类的内部可以使用。
    3. 如果使用var方法定义的属性是一个局部变量，不能使用this.来访问，因此如果需要使用构造方法或某个方法对这个属性赋值，那么形式参数名不能与该属性名重名，否则会根据就近原则，操作失败。

  • 自定义对象扩展

    • 借助prototype属性，每个对象都默认带有这个属性。

      • 这个属性只能扩展this.的属性和方法(公共属性和公共方法)
      • 扩展不能直接对已有的方法进行覆盖
      • 扩展后任意个对象都能访问到扩展进去的内容

    • 注意：在动态扩展的方法中不能直接调用类中的局部变量。如果非要访问局部变量只能通过调用提前写好的get和set方法。

    • 例子：

      			function User(name, age){this.name = name;this.age = age;this.show = function(){document.write("name = " + this.name + " age = " + this.age + "<br/>");}}var usr = new User("张三", 16);var usr2 = new User("李四", "15");usr.show();usr2.show();User.prototype.location; // 添加属性location// 扩展后任意个对象都能访问到扩展后的内容usr.location = "北京";usr2.location = "上海";
/* 			User.prototype.show = function(){document.write("无用");} */ // 不允许去覆盖之前存在的方法// usr.show(); 无变化User.prototype.show2 = function(){document.write("name = " + this.name + " age = " + this.age + " location = " + this.location +"<br/>");}// 扩展后任意个对象都能访问到扩展后的内容usr.show2();usr2.show2();

8. void让超链接失效

  • javascript:void(0) 它让链接失效，然后配合事件可以让这个超链接拥有逻辑功能。比如下载前可以判断是否有权限或者积分
  • 另外它不仅可以让超链接增加逻辑功能还可以隐藏地址和连接信息。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body> <!-- # 表示转向到当前页面，它是真正的执行了转向的行为 --><a href="#">点击我</a><br/><!-- javascript:void(0) 它让链接失效，然后配合事件可以让这个超链接拥有逻辑功能比如下载前可以判断是否有权限或者积分 它不仅可以让超链接增加逻辑功能还可以隐藏地址和连接信息。--><a href="javascript:void(0)">点击我</a></body>
</html>

9. =、==、===的区别

  1. =：赋值
  2. ==：比较2个变量的内容是否相等。值等：只是单纯地比较变量的内容，如果类型不同则转型以后再比较。
  3. ===：比较2个变量的内容是否相等。全等：它会先去比较类型是否一样，如果类型不一致则不继续向下比较，直接返回false，如果类型一致才继续比较。

10. for in

  • 迭代控制语句

    1. 可以将一个对象中所有的属性名迭代出来(枚举出所有属性)

      			function User(name, age){this.name = name;this.age = age;this.show = function(){document.write("name = " + this.name + " age = " + this.age + "<br/>");}}var user = new User("张三", 23);// 迭代出当前对象中所有属性名// 我们可以利用对象名[属性名]的语法操作对象中的属性，如果需要操作方法要在语法的后面添加()例如对象名[属性名]()for (var temp in user){if (typeof user[temp] != 'function'){ // 判断当前属性的引用是否不是一个函数，进入if表示不是函数需要获取属性值alert(user[temp]);}else{ // 进入else表示当前属性是一个函数user[temp]();}}

    2. 可以迭代数组中的索引

      			var arr = ["张三", "李四", "王五", "赵六"];for (var idx in arr){document.write(arr[idx] + "<br/>");}
      • 一般不这么用，它可能会多输出些什么。

11. 数组

  • 数组定义语法：

    1. var arr =new Array(长度);// 初始化长度定义数组，数组中的元素默认值为undefined。
    2. var arr = new Array(数据, 数据, 数据); // 初始化内容定义数组
    3. var arr = [数据, 数据, 数据]; // 初始化内容定义数组

  • 注意：

    1. 大部分操作与Java的数组是一样的，也是通过索引对元素进行操作。
    2. JS是弱类型语言，因此它的数组中可以存放任意类型的数据。
    3. JS中的数组的长度是不固定的可以自动地增加或者减少，访问数组时也不会出现索引越界的异常。
    4. 数组是顺序结构，即使JS的数组可以扩容但是也最好不要这么做。

  • 遍历数组：

    			var arr = ["张三", "李四", "王五", "赵六"];for (var i = 0; i < arr.length; ++i){document.write(arr[i] + "<br/>");}for (var idx in arr){document.write(arr[idx] + "<br/>");}
    • 一般不用第二种方式，常用第一种方式。

12. Date对象

  • 创建范式
    1. var date = new Date() 根据当前系统时间创建一个Date对象，注意它创建的是客户端机器中的时间对象。
    2. var date = new Date(毫秒)根据一个毫秒创建一个时间，通常用来将Java的Date类型对象转换成JS的时间。
  • 方法：
    1. toLocaleString()返回一个日期，该日期使用当前区域设置并已被转换为字符串。
    2. getYear()返回三位数的年，这个年要加上1900才是我们正常的年。
    3. getFullYear()返回正常的年
    4. getDay()获取星期，返回0~6，0代表星期日
    5. getDate()获取今天是当月的第几天(1~31)
    6. getHours()获取小时
    7. getMinutes()获取分钟
    8. getSeconds()获取秒数
    9. getMonth()获取月份，返回0~11，正常来说要进行+1处理

13. 常用事件

  1. click事件

    鼠标单击事件，事件句柄：onclick

  2. blur事件

    失去焦点事件，事件句柄：onblur

  3. change事件

    当文本框、文本域中的文本内容发生变化并失去焦点时触发或者下拉列表中项发生改变时，该事件发生，事件句柄：onchange

  4. load事件

    页面加载完毕后触发，事件句柄：onload，通常写在body标签当中。

  5. keydown事件

    键盘按键被按下时发生，可以捕获所有键，除"prt sc sysrq"键之外，事件句柄：onkeydown。

  6. keypress事件

    键盘按键被按下时发生，主要用来捕获数字、字母、小键盘，其他键无法捕获，但是在FF浏览器当中可以捕获所有键。事件句柄：onkeypress。

  7. keyup事件

    键盘按键弹起时发生，事件句柄：onkeyup。

  8. mousedown事件

    鼠标按下事件(比起click事件它可以多监听鼠标右键的点击)，事件句柄：onmousedown。

  9. mousemove事件

    鼠标在某控件上移动时发生，事件句柄：onmousemove。

  10. mouseover事件

    鼠标经过某控件时发生，事件句柄：onmouseover

  11. mouseout事件

    鼠标离开某控件时发生，事件句柄：onmouseout

14. 事件绑定

以click事件为例：

  1. 直接在标签中进行事件绑定

    <input type="button" value="点击我" onclick="myClick01()"/>

  2. 在JavaScript代码中进行事件绑定

    			// 注意：HTML跟JS都是解释性语言，因此根据id获取元素对象的方法必须要在这个元素被解析执行以后才能获取到// 获取id为myBut的元素对象var myButObj = document.getElementById("myBut");// document.write(typeof myButObj);// 为html元素对象的onclick属性进行赋值(绑定一个事件处理方法)myButObj.onclick = function(){alert("事件绑定方式2")};

  • 以上两种方式完整测试代码：

    <!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function myClick01(){alert("点击了按钮");}</script></head><body><!-- οnclick="myClick01()"绑定点击事件并指定事件的处理函数 --><input type="button" value="点击我"  onclick="myClick01()"/><input type="button" value="事件绑定方式2" id="myBut" /><script>// 注意：HTML跟JS都是解释性语言，因此根据id获取元素对象的方法必须要在这个元素被解析执行以后才能获取到// 获取id为myBut的元素对象var myButObj = document.getElementById("myBut");// document.write(typeof myButObj);// 为html元素对象的onclick属性进行赋值(绑定一个事件处理方法)myButObj.onclick = function(){alert("事件绑定方式2")};</script></body>
</html>

  • 事件绑定例子

    • 控制只能输入数字
    <!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>// OBJ为事件源对象的形参可以任意function checkNum(obj){// keyCode表示键盘的按键源码，每个键盘的按键都是固定的编码// 48-57是大键盘的0-9按键，96到105是小键盘的0-9按键，8表示的是退格键/* alert(obj.keyCode); */var KeyCode = obj.keyCode;// alert(KeyCode);if ((KeyCode < 48 || KeyCode > 57) && (KeyCode < 96 || KeyCode > 105) && KeyCode != 8){/* alert("不是数字！"); */return false; // 进入if表示用户按了非法按键，返回一个false用来阻止浏览器的默认行为}return true;}</script></head><body>
<!-- 			onkeydown绑定键盘按下事件并指定事件处理方法checkNum(event)自定义的事件处理方法 event：表示事件源的对象，我们绑定的是键盘按下事件，因此event表示的是键盘的某个按键这个event在使用时是一个固定的名字不能修改，这个名字是HTML定义的。注意：事件绑定中必须要将事件处理方法的返回值进行return，如果方法返回一个true表示通过，false表示阻止浏览器默认行为。--><input type="text" id = "test" onkeydown="return checkNum(event)" /><!--<script type="text/javascript">document.getElementById("test").onkeydown = function(){ // 与直接在标签中进行事件绑定效果一致。return checkNum(event);}</script>--></body>
</html>

15. innerText和innerHTML操作元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/*** innerText和innerHTML属性的区别* * innerText 获取或设置某个HTML元素中的纯文本内容，只能获取纯文本的东西，如果设置数据时用它，数据中包含的html代码会以纯文本形式显示出来。* * innerHTML 获取或这只某个HTML元素中的HTML内容，可以获取元素中的HTML代码和文本内容，如果设置数据为HTML代码，它会将这段代码编译后再设置到页面上。*/function innerTextTest(){var myDivObj = document.getElementById("myDiv");myDivObj.innerText='<a href="http://www.baidu.com">百度</a>';}function innerHtmlTest(){var myDivObj = document.getElementById("myDiv");myDivObj.innerHTML='<a href="http://www.baidu.com">百度</a>';}</script></head><body><input type="button" value="innerText" onclick="innerTextTest()" /><input type="button" value="innerHTML" onclick="innerHtmlTest()" /><div id = "myDiv">Div测试内用</div></body>
</html>

16. 复选按钮的全选和取消

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function checkedAll(obj){// 获取所有class属性为habit的HTML元素对象返回一个数组var habits = document.getElementsByClassName("habit");for (var i = 0; i < habits.length; ++i){ // 循环设置所有爱好与全选框状态一致habits[i].checked = obj.checked;}}function setCheckedAll(obj){// 获取全选框对象var myAll = document.getElementById("checkall")if (!obj.checked){ // 说明取消选择myAll.checked = false;return;}// 程序执行到这说明是选中了当前objvar habits = document.getElementsByClassName("habit"); // 获取所有爱好for (var i = 0; i < habits.length; ++i){ if (!habits[i].checked){myAll.checked = false;return;}}myAll.checked = true;}</script></head><body><!-- 	this 表示触发当前事件的HTML元素对象，这里表示的当前的这个全选复选按钮 --><input type="checkbox" id="checkall" onclick="checkedAll(this)"/>全选<br/><input type="checkbox" class="habit" onclick="setCheckedAll(this)"/>吃<br/><input type="checkbox" class="habit" onclick="setCheckedAll(this)"/>喝<br/><input type="checkbox" class="habit" onclick="setCheckedAll(this)"/>玩<br/><input type="checkbox" class="habit" onclick="setCheckedAll(this)"/>乐<br/><input type="checkbox" class="habit" onclick="setCheckedAll(this)"/>睡<br/></body>
</html>

17.下拉菜单的多级联动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var v_hb = ["石家庄", "邯郸", "保定"];var v_sd = ["济南", "青岛"];var v_jl = ["长春", "吉林", "四平"];function initCity(obj){// 获取下拉菜蛋的value属性值，选择哪一项获取的value就是哪一个option的value属性值var v_sfId = obj.value;// 定义一个城市数组var v_cities = undefined;// 初始化城市数组，这里后期应该从数据库中获取switch(v_sfId){case "1":v_cities = v_hb;break;case "2":v_cities = v_sd;break;case "3":v_cities = v_jl;break;}// 获取城市下拉菜单var v_selectCity = document.getElementById("selectCity");v_selectCity.innerHTML = '<option value = "0">请选择</option>'; // 清空/*1. HTML拼接方式实现联动for (var i = 0; i < v_cities.length; ++i){v_selectCity.innerHTML += '<option value = "'+(i+1)+'">'+v_cities[i]+'</option>';} */// 2.appendChild追加的方法for (var i = 0; i < v_cities.length; ++i){// 根据元素名创建一个对象var v_option = document.createElement("option");// 设置下拉菜单选项的value值v_option.value = (i+1);// 设置下拉菜单选项的显示内容v_option.textContent = v_cities[i];// 追加到目标HTML元素中v_selectCity.appendChild(v_option);}}</script></head><body>省份<select onchange="initCity(this)"><option value = "0">请选择</option><option value = "1">河北</option><option value = "2">山东</option><option value = "3">吉林</option></select>城市<select id="selectCity"><option value="0">请选择</option></select></body>
</html>

18. 动态添加和删除行

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function addTr(){var v_myTableObj = document.getElementById("myTable");// 创建一个HTML元素对象var v_tr = document.createElement("tr");// 设定自定义的tr中的内容v_tr.innerHTML = '<tr><td>姓名</td><td><input type="text"/></td><td><a href="javascript:void(0)" οnclick="delTr(this)">删除行</a></td></tr>'// 将自定义的tr追加到表格末尾v_myTableObj.appendChild(v_tr);}function delTr(obj){/*** 节点遍历属性* parentElement 获取某个HTML元素的父节点元素，返回一个HTML元素对象，如果没有父则返回null* children 获取某个HTML元素的所有子节点元素，返回一个对象数组，没有的话就返回null* previousElementSibling获取某个HTML元素的前一个元素对象(获取哥哥元素)，返回一个元素对象，如果没有前一个则返回null* nextElementSibling获取某个HTML元素的后一个元素对象(获取弟弟元素)，返回一个元素对象，如果没有后一个则返回null*/obj.parentElement.parentElement.remove(); // 获取a标签的爷爷即tr，然后删除}</script></head><body><input type="button" value="添加"  onclick="addTr()"/><form action="xxx.html"><table id = "myTable"><tr><td>姓名</td><td><input type="text"/></td></tr></table><input type="submit" value="提交" /></form></body>
</html>

19. 网页时钟

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function showTime(){var v_myDivObj = document.getElementById("myDiv");var date = new Date();v_myDivObj.innerHTML = date.getFullYear()+"年" + (date.getMonth()+1) + "月" + date.getDate() + "日" + date.getHours() + ":" + date.getMinutes()  + ":" + date.getSeconds();}</script></head><body><div id = "myDiv"></div><script>// showTime();// 每间隔指定的时间自动执行指定的方法/*** 参数1 为自动执行的方法* 参数2 间隔的时间* 这个方法会返回一个定时任务的id，这个id用于清空这个定时任务*/window.setInterval("showTime()", 1000);// 延迟指定的时间调用一次指定的方法/*** 参数1 被调用的方法* 参数2 延迟的时间* 这个方法会返回一个定时任务的id，这个id用于清空这个定时的任务*/// window.setTimeout()/* window.clearInterval(intervalId) 根据定时任务id停止定时任务window.clearTimeout(timeoutId) 根据延迟任务id停止延迟任务*/</script></body>
</html>

20. 轮播图

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var imgs = ['Five.jpg', 'Lying.jpg', 'White.jpg', '蓝眼.png', '佐伊.jpg', '佐伊0.jpg', '佐伊佐伊.jpg'];var index = 0;function nextImg(num){var v_myImgObj = document.getElementById("myImg");index += num;if (index >= imgs.length){ // 当前图片已经达到了最后一张然后又点击了一次下一张index = 0; // 设置索引值为0指向第一张图片}else if (index < 0){ // 当前图片在第一张然后又点击了一次上一张index = imgs.length - 1;}v_myImgObj.src = imgs[index];}</script></head><body><img src = "Five.jpg" id = "myImg" width="300px" onmouseover="stop()" onmouseout="start()"/><br/><input type="button" value="上一张" onclick="nextImg(-1)"/><span id="mySpan"></span><input type="button" value="下一张" onclick="nextImg(1)"/><script>var intervalId = window.setInterval("nextImg(1)", 3000);function stop(){window.clearInterval(intervalId);}function start(){intervalId = window.setInterval("nextImg(1)", 3000);}function setImg(num){index = num; // 设置指定的索引值nextImg(0); // 调用切换图片的方法，并传递一个0表示不进行任何的切换计算// 停止一次轮播图的切换stop();start(); // 再次启动一次轮播图}var v_mySpanObj = document.getElementById("mySpan");for (var i = 1; i <= imgs.length; ++i){v_mySpanObj.innerHTML += '<a href="javascript:void(0)" οnclick="setImg('+(i-1)+')">' + i + '</a>&nbsp;&nbsp;&nbsp;';}</script></body>
</html>

21. 正则表达式

  • 语法：

    1. var reg = /表达式/[表达式参数]
    2. var reg = new RegExp("表达式", ["表达式参数"])

  • 表达式参数的取值：

    • g：全文查找出出现的所有pattern
    • i：忽略大小写
    • m：多行查找

  • 正则对象有2类

    1. 查找包含的正则

      var reg = /表达式/; 例如：var reg = /\d/是否包含数字

    2. 匹配的正则

      var reg = /^表达式$/;例如：var reg = /^\d$/ 匹配判断字符串是否是1位的数字

  • 简单例子：

    			/* // 验证某个字符串是否包含中文var reg = /[\u4e00-\u9fa5]/;var str = prompt("清输入一个字符串：");document.write(reg.test(str)); // test方法，作用是验证参数字符串是否符合这个正则对象的规则，如果符合规则则返回true，否则返回false。 *//*** 匹配邮箱是否合法* xxx@xxx.com.cn*/var reg01 = /^[0-9a-zA-Z]+@[0-9a-zA-Z]+\.com(\.cn)?$/var email = prompt("清输入邮箱");document.write(reg01.test(email));

  • 正则表达式知识点

22. 表单的验证

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function checkName(){// 获取到姓名的表单元素var v_nameObj = document.getElementById("name");// 获取数据var v_nameValue = v_nameObj.value;// 获取到显示name不合法信息的span对象var v_nameMessageObj = document.getElementById("nameMessage");var reg = /^[a-zA-Z0-9_]{6,10}$/; // 注意{6,10}不能写成{6, 10}!!!!if (!reg.test(v_nameValue)){v_nameMessageObj.innerHTML='<font color="red" style="font-size: 12px;">对不起！用户名必须在6-10个字符之间，并且只能由数字、字母和下划线组成</font>';return false;}v_nameMessageObj.innerHTML='<font color="palegreen" style="font-size: 12px;">该用户名可用!</font>';return true;}function checkForm(){if (!checkName()){alert("信息不正确");return false;}return true;}</script></head><body><form action="xxx.html">姓名<input type="text" onblur="checkName()" id="name"/><span id="nameMessage"></span><br/><input type="submit" value="注册" onclick="return checkForm()"/></form></body>
</html>

23. BOM编程——confirm

  • 弹出一个对话框让用户选择确定或者取消，如果用户选择的是确定则返回true否则返回false。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function delTag(obj){if (confirm("你确认要删除吗？")){ // 用户选择了确认obj.parentElement.remove(); // 删除它的父亲div}}</script></head><body><div><p>哈喽我的朋友</p><a href="javascript:void(0)" onclick="delTag(this)">删除</a></div></body>
</html>

24. BOM编程——open

  • 打开一个新窗口
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function testOpen(pageUrl){open(pageUrl, null,
"height=1000,width=1000,status=yes,toolbar=yes,menubar=yes,location=no");}</script></head><body><a href="javascript:void(0)" onclick="testOpen('http://www.baidu.com')">百度</a></body>
</html>
  • 具体查手册window的open方法

25. BOM编程——close

  • 关闭当前页面
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function closePage(){/*** 关闭当前页面*/close();}</script></head><body><input type="button" value="关闭" onclick="closePage()" /></body>
</html>

26. BOM编程——opener

  • 可以用来实现在子页面和父页面之间消息传递

  • 子页面是指在父页面中通过open方法打开的页面

  • 通过在子页面中通过opener可以获取父页面对象，调用父页面的方法、变量等。

  • 例子：

    <!--parent.html-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var testVar = 100;function openPage(){open("027child.html");}function showMessage(){var myDivObj = document.getElementById("myDiv");myDivObj.innerHTML = testVar;}</script></head><body><input type="button" value="打开子页面" onclick="openPage()"/><div id="myDiv"></div></body>
</html>
<!--027child.html-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var parentObj = window.opener;function getMessage(){var myDivObj = document.getElementById("myDiv");myDivObj.innerHTML = parentObj.testVar;}function sendMessage(obj){parentObj.testVar = obj.value;parentObj.showMessage();}</script></head><body><h1>这是子页面</h1><input type="button" value="获取父元素信息" onclick="getMessage()"/><div id="myDiv"></div>传送信息给父元素：<input type="text" onblur="sendMessage(this)" /></body>
</html>

27. BOM编程——onload

  • onload事件，是在浏览器加载完成以后自动触发这个方法
  • 也可以在body标签中直接使用onload属性绑定这个加载事件

28. BOM编程——history

  • history表示浏览器中的历史记录
  • 方法：
    1. go(num)方法：表示访问历史记录中的某个页面(相对于当前页面)
      • num>0表示访问历史记录当前页面的下num个页面。即1表示下一个，2表示下2个。
      • num<0表示访问历史记录当前页面的前几个页面。即-1表示前1个，-2表示前2个。
      • 注意：如果历史记录中没有访问记录那么go方法是无效的。
    2. forward()方法：表示访问历史记录中的当前页面的下一个页面，等效于go(1)
    3. back()方法：表示访问历史记录中的当前页面的上一个页面，等效于go(-1)

29. BOM编程——location

  • 表示地址栏对象，可以修改地址栏中的地址改变页面的内容，也可以获取地址栏中的一项相对应的数据如ip地址或端口等等。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>// 直接转向// window.location.href = "028index3.html"; // 在网页上输入WWWW.baidu.cn会自动转到www.baidu.comdocument.write(window.location.host + "<br/>");document.write(window.location.port + "<br/>");document.write(window.location.hostname);</script></head><body><p>location页面</p></body>
</html>

30. eval

  • 功能：将一个符合JS语法规则的字符串转换成JS代码，并且执行这个代码。

  • 使用场景：

    1. 可以实现动态方法的调用，例如用Java代码向页面传递一个数据，这个数据可以是一段JS代码，也可以是一个JS的方法调用，用来实现页面响应成功的方法回调。

  • 简单小栗子：

    <!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/*** eval(string)* 将一个符合JS语法规则的字符串转换成JS代码，并且执行这个代码*/
/* 			eval("alert('张三')");使用场景：1. 可以实现动态方法的调用，例如后期我们可以使用Java代码向页面传递一个数据这个数据可以是一段JS代码，也可以是一个JS的方法调用，用来实现页面响应成功的方法回调。 */function test01(){alert("这是test01函数");}function test02(){alert("这是test02函数");}eval(prompt('请输入方法名test01()或test02()'));</script></head><body></body>
</html>

31. JSON

  • 一种轻量级的数据交互格式

  • JSON是以对象的形式来呈现我们的数据

  • 使用场景：

    1. Ajax(异步请求)中，用于作数据返回的一种数据格式。
    2. 跨语言程序调用时作为数据返回的一种数据格式例如C语言要调用Java语句。这时程序会根据一个特定的数据格式进行返回，我们会使用字符串返回一个JSON格式的数据。
    3. 跨系统应用调用，例如A系统(软件)调用B系统(软件)，B系统返回了C对象那么A系统必须要拥有C类。这时我们会使用字符串返回一个JSON格式的数据给A系统，然后A系统解析这个字符串然后转换成我们所需要的数据类型。

  • JSON数据的两种格式

    1. JSON对象

      • 定义语法：

        var jsonObj = {"属性名":属性值, "属性名":属性值, "属性名":属性值, ...., "属性名":属性值}

        注意在这""跟''不通用，属性名一定要用双引号。

      • 访问语法：

        • 对象名.属性名 获取数据

        • 对象名.属性名 = 数据 赋值

      • 注意：

        1. 数据除基本数字型以外其余类型需要添加""例如时间和字符串。
        2. 一个JSON对象中可以包含另外一个JSON对象。如果我们要访问一个JSON中内嵌的一个JSON，一定要访问到这个内嵌的JSON中的基本数据类型，否则返回的就是个object。

    2. JSON数组

      • 定义语法：

        var jsonArray = [{"属性名":属性值, "属性名":属性值, "属性名":属性值, ...., "属性名":属性值}, {"属性名":属性值, "属性名":属性值, "属性名":属性值, ...., "属性名":属性值}, {"属性名":属性值, "属性名":属性值, "属性名":属性值, ...., "属性名":属性值}]

      • 访问语法：

        • 对象名[索引].属性名 获取数据
        • 对象名[索引].属性名 = 数据 赋值

      • 注意：

        1. 一个JSON数组中可以存放若干个JSON对象，也可以存放JSON数组。

    3. 简单使用：

      			var jsonObj = {"name":"张三", "age":23};// alert(jsonObj); // object
/* 			alert(jsonObj.name + " " + jsonObj.age);jsonObj.name = "李四";alert(jsonObj.name + " " + jsonObj.age); */var jsonArray = [{"name":"张三1", "age":23}, {"name":"张三2", "age":24}, {"name":"张三3", "age":25}];for (var i = 0; i < jsonArray.length; ++i){document.write(jsonArray[i].name + "   " + jsonArray[i].age + "<br/>");}

补充知识

  1. JSP和JS的简单区别

    • JSP：JavaServer Pages(隶属于Java语言的，运行在jvm当中)
    • JS：JavaScript(运行在浏览器上)

  2. JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。对应一个事件句柄onclick。（事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on。）事件句柄是以HTML标签的属性存在。

  3. 如何使用JS代码弹出消息框？

    在JS中有一个内置的对象叫做window，全部小写，可以直接拿来用，window代表的是浏览器对象。
    window对象有一个函数叫做：alert，用法是：window.alert(“消息”);这样就可以弹窗了。

  4. JS中字符串可以使用双引号，也可以使用单引号。

  5. JS中的一条语句结束之后可以使用分号”;“,也可以不用。

  6. JS代码注释

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

  7. BOM和DOM的关系：

在这里插入图片描述


http://chatgpt.dhexx.cn/article/PjSvlojC.shtml

相关文章

el-input中设置onkeypress事件是否匹配正则表达式显示输入内容的格式

el-input中设置onkeypress事件是否匹配正则表达式显示输入内容的格式

场景 若依前后端分离版手把手教你本地搭建环境并运行项目&#xff1a; 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离搭建 设置el-input的onkeypress事件限制输入内容是否匹配正则表达式。 注&#xff1a; 博客&a…
阅读更多...
前端开发实习生面试总结

前端开发实习生面试总结

个人感觉面试官对实习生还是很友好的&#xff0c;大部分时候你答不上来都会引导你&#xff0c;最后还会点评你的不足&#xff0c;评价出来的那些问题确实是我自己的短板&#xff01;所以在整个过程中还是学到了很多&#xff01;&#xff01; 本人坐标南京&#xff0c;南京投的相…
阅读更多...
datacenter 2

datacenter 2

突然综合类又有新的事情了 页面能顺利打开了 但是好像值传不过去 之前不知道为什么输出了三十次 之前是判断两个不为4和200 然后else输出 现在改了之后只输入10次 但是出现通讯错误那个问题
阅读更多...
数据中心与云数据中心

数据中心与云数据中心

数据中心与云数据中心 数据中心&#xff08;DC&#xff0c;DataCenter&#xff09;是指在一个物理空间内实现信息的集中处理、存储、传输、管理等功能&#xff0c;它包括服务器、存储、网络等关键设备和这些关键设备运行所需要的环境因素&#xff0c;如供电、制冷、消防、监控等…
阅读更多...
阿里云cassandra数据库datacenter查看

阿里云cassandra数据库datacenter查看

在使用阿里云的cassandra数据库时需要注意的是下图中的数据中心ID对应cassandra中的datacenter&#xff0c;而不是数据中心的名称&#xff01;&#xff01;&#xff01; 即SessionBuilder.withLocalDatacenter方法要使用阿里云cassandra官方文档中的数据中心ID public SelfT w…
阅读更多...
英特尔固态硬盘测试软件,英特尔固态硬盘工具(Intel SSD Datacenter Tool)

英特尔固态硬盘测试软件,英特尔固态硬盘工具(Intel SSD Datacenter Tool)

英特尔固态硬盘数据中心工具Intel SSD Datacenter Tool是一个有用的命令行应用程序&#xff0c;特别适合管理 910 系列的英特尔SSD固态驱动器。如果用户的硬盘是英特尔的就需要下载一个这样的软件&#xff0c;软件能对硬盘进行检测和固件升级&#xff0c;有需要的可以下载使用。…
阅读更多...
ICNP‘2019 Congestion Control for Cross-Datacenter Networks论文阅读笔记

ICNP‘2019 Congestion Control for Cross-Datacenter Networks论文阅读笔记

文章目录 BackgroundGeminiDiscussion Background 现代的一些大规模在线服务会将他们的信息储存在不同地域的数据中心当中&#xff0c;并且这种分布以及变得越来越流行了。这意味着&#xff0c;有一些流会同时经过数据中心与广域网。(和Annulus中提到的是同一个问题) 实际上这…
阅读更多...
2008服务器文件夹镜像,【玩转腾讯云】导入镜像-Windows 2008 R2 Datacenter

2008服务器文件夹镜像,【玩转腾讯云】导入镜像-Windows 2008 R2 Datacenter

微软发布对 Windows Server 2008 和 2008 R2 的支持已于 2020 年 1 月 14 日结束。 这意味着定期安全更新也已终止，将不会有额外的： 免费本地安全更新 非安全更新 免费支持选项 在线技术内容更新 各云服务商也发布了相关下线 Windows 2008 系列镜像的公告 【腾讯云】关于Wind…
阅读更多...
VMware Workstation中安装Windows Server 2022 DataCenter（数据中心）无桌面版且配置远程桌面

VMware Workstation中安装Windows Server 2022 DataCenter（数据中心）无桌面版且配置远程桌面

一、实现效果 二、安装配置操作 2.1、下载Windows Server 2022的iso镜像 原版软件 (itellyou.cn)https://next.itellyou.cn/Original/Index#
阅读更多...
Windows 11 与 Windows Server 2019 Datacenter 下部署 适用于Linux的windows子系统

Windows 11 与 Windows Server 2019 Datacenter 下部署 适用于Linux的windows子系统

提示&#xff1a;一篇完成2个操作系统的步骤 2个版本同时发布 前言电脑版本 提示&#xff1a;Windows11一、安装前CPU需要支持虚拟化技术 二、安装打开Microsoft Store ,搜索 Ubuntu2.获取安装即可 阿里云 提示&#xff1a;Windows Server 2019 Datacenter一、安装前二、安装总…
阅读更多...
Windows Server 2019 Datacenter x64 安装 SHARP AR-2048N 打印机驱动

Windows Server 2019 Datacenter x64 安装 SHARP AR-2048N 打印机驱动

设备信息及驱动准备 打印机型号&#xff1a;SHARP AR-2048N 系统版本&#xff1a;Windows Server 2019 Datacenter x64 官网驱动下载&#xff0c;标准驱动 2048/2348/2648/3148NV&#xff0c;打印驱动程序&#xff08;SPLC打印语言&#xff09;、扫描仪驱动程序 安装场景与问…
阅读更多...
NSX-T 3.1 DataCenter学习实践 1

NSX-T 3.1 DataCenter学习实践 1

一&#xff0c;基础实验环境搭建 实验环境介绍 实验环境是两台Dell R620服务器&#xff0c;一台MD3220 SAS存储。由于R620只支持到vSphere 6.7&#xff0c;NSX-T最好通过物理机上运行嵌套EXSi虚拟机来实现&#xff0c;这样完全规避了硬件兼容性问题。ESXi虚拟机共享存储有两个…
阅读更多...
Windows Server 2019 Datacenter 安装PHP 8.0

Windows Server 2019 Datacenter 安装PHP 8.0

下载 下载PHP8.0&#xff0c;这里选择Non Thread Safe下载 https://download.csdn.net/download/qq_17790209/16620755 下载完成后通过FTP服务上传至服务器 这里我比较推荐直接将文件解压到Program File里面 安装 将php.ini.development文件的文件名改为php.ini 之后在该文…
阅读更多...
windows server 2016 datacenter添加.net framework3.5失败解决方法

windows server 2016 datacenter添加.net framework3.5失败解决方法

windows server 2016 datacenter添加.net framework3.5失败。 本次环境是使用学校网络中心的堡垒机&#xff0c;进入远程的虚拟机。估计学校在网络访问上做了很多限制&#xff0c;导致使用仪表盘添加角色和功能时候&#xff0c;总是失败。报错误 0x800f0907。 方法一&#xff1…
阅读更多...
openLooKeng datacenter connector跨域查询实现原理浅析

openLooKeng datacenter connector跨域查询实现原理浅析

前言 当公司发展到了一定的规模之后&#xff0c;一般都会有多个数据中心&#xff0c;或者多个机房&#xff0c;在大数据场景下就会涉及到数据会存放在不同的数据中心HDFS上&#xff0c;有时又需要使用多个数据中心的数据一起计算某些业务逻辑&#xff0c;我们可以称之为东数西…
阅读更多...
最简单的Consul集群配置, 双datacenter

最简单的Consul集群配置, 双datacenter

官方Doc and API在这儿: https://www.consul.io/docs/internals/architecture.html API操作我一般用curl, 这个附一个命令 curl -H "Content-Type: application/json" -X PUT --data {"Datacenter":"dc1","Node":"[Nodename]&qu…
阅读更多...
记一次实战windows 2008 R2 Datacenter 提权

记一次实战windows 2008 R2 Datacenter 提权

前景&#xff1a;拿到某个站 getshell 上传马后发现权限低&#xff0c;然后就是漫长的提权过程 蚁剑连接到aspx 的马后进入终端先进行信息收集一波&#xff0c;使用命令whoami 可以发现是iis 的权限 使用命令 systeminfo 查看操作系统和打了哪些补丁等等&#xff0c;windows 2…
阅读更多...
服务器2019系统无法添加.net3.5,Windows Server 2019 Datacenter 无法安装.Net Framework 3.5

服务器2019系统无法添加.net3.5,Windows Server 2019 Datacenter 无法安装.Net Framework 3.5

打开应用程序，遇到这样的错误提示，只能说太操蛋了，都2020年了，还有人在使用.Net Framework 3.5这样的版本，按道理讲，.Net Framework 高版本应当兼容低版本程序，然而并不是。 看了一下解释： NET Framework 4.0 不兼容NET Framework 3.5； 如果一个程序是 NET Framework …
阅读更多...
认识 Atlassian Datacenter 产品

认识 Atlassian Datacenter 产品

认识 Atlassian Datacenter 产品 云端原本就是群集化的架构&#xff0c;Atlassian 系列产品&#xff0c;应用的开发团队相当广范且行之有年&#xff0c;但是将应用程序作为节点&#xff08;比如Jira,confluence,bamboo…等應用程式&#xff09;然后群集化的运维团队却是少之又少…
阅读更多...
【vSphere | Python】vSphere Automation SDK for Python Ⅲ—— vCenter Datacenter APIs

【vSphere | Python】vSphere Automation SDK for Python Ⅲ—— vCenter Datacenter APIs

目录 5. vCenter Datacenter APIs操作5.1 Create Datacenter5.2 List Datacenter5.3 Get Datacenter5.4 Delete Datacenter 参考资料 5. vCenter Datacenter APIs 数据中心服务&#xff08;Datacenter service&#xff09;提供管理 vCenter Server 中数据中心的操作。 操作 …
阅读更多...
推荐文章

Copyright @ 2022~2023