八、JavaScript

JavaScript

概述

简称JS，由网景公司和Sun公司联合推出的一门编写前端脚本动作的编程语言；本质上与Java没有关系，是一门独立的编程语言
JS是一门前端的编程语言，主要用于给网页添加动作，如表单的验证、动态的请求服务器等
JS通常是书写在HTML页面中的指定位置，当使用浏览器运行HTML时浏览器会解析HTML中的JS代码并执行；属于解释型编译语言，JS的执行依赖于浏览器提供的JS解释器

开发JS

第一种编写位置：在html页面的head部分书写

<head><script type="text/javascript">书写JS代码的位置，单引号双引号都行，执行顺序从上到下//向浏览器的控制台输出内容console.log("HelloWorld");//调试JS常用的输出语句//浏览器弹窗//window.alert("来嘛～");//向浏览器页面输出内容document.write("成年人的世界可以用两个字概括：算了<br/>");document.write("不太想活，又不敢去死");document.write("<a href='wallhaven-q29z2l.jpg'>图片</a>")</script>
</head>

第二种编写位置：在一个 .js结尾的脚本文件中编写，然后在需要使用的HTML

//外部文件：jq.js
<head><!-- 引入外部的JS文件，且标签必须成对出现 --><script type="text/javascript" src="jq.js"></script>
</head>

JS基础语法

变量

声明：JS是一门弱类型的编程语言，变量没有具体的类型，所有的变量的声明都可以使用var；JS会将所有var声明的变量提到最前面，称为声明前置
JS对语句末的分号不是特别敏感，会自动检测与下一条语句匹配

赋值：赋值不提前，还在原来位置

<script type="text/javascript">{//局部变量声明，用let声明；var声明但变量都是全局变量let a = 10;}//书写JS代码//声明var a;var a=100,b,c,d;//赋值b = 20;//一个变量声明但没有赋值，输出为undefinedconsole.log(a,b,c,d);//声明并赋值var s=d=f=200;console.log(s,d,f);//JS解构变量赋值方式，按照数组的语法进行位置的匹配赋值var [aa,bb,dd] = ["hang","yuan","kun"];console.log(aa,bb,dd);
</script>

数据类型：JS的变量不区分类型，但是变量存的值有数据类型

数值类型：整形，小数
字符串类型：JS中可以用单引号或双引号代表字符串

布尔类型：JS中有真值和假值的区分

真值	假值
true	false
非空的变量	0
非空的内容	null(手动赋值为null或者一个对象没有值)、 undefined(一个变量声明但为赋值)

特殊数据类型：
- undefined
- Infinity(把零作为除数时，无穷大)
- NaN(not a number不是一个数，非法的算数运算)
- 一个函数：isNaN(变量 / 值)，是不是不是一个数
```
console.log(1/0);//Infinityconsole.log(isNaN('hang'));//true
```

运算符

算数运算符：+ - * / % ++ –
赋值运算符：= += -= *= /= %=
关系运算符：> >= < <= == === != !==
逻辑运算符：&& || ！

三元运算符（三目运算符）：布尔表达式？值1:值2

<script type="text/javascript">var str1 = '123';var m = 123;//两个等号比较的是变量里实际的值console.log(str1==m);//三个等号比较变量的值以及数据类型console.log(str1===m);//不等号  多一个等号会兼顾数据类型console.log(str1!=m); //falseconsole.log(str1!==str2); //false</script>

分支语句

循环语句

//分支语句：if(){//实现}else if(){//实现   }else{//实现}//循环语句：for循环、while循环、do ... while循环var sum = 0;for(var i = 0; i <= 100; i++){sum += i;}

数据类型转换

//隐式转换：指JS在执行过程中觉得有必要，则自动完成转换//当遇到  -   *   /  时都会把字符串类型转换成数字类型//任何一个值与字符串做 + 运算，得到的还是一个字符串//手动转换：//Number()：只能转换纯数值的字符串，包含字符的会返回NaN(not a number)//parseInt()：可以转换包含字符的字符串，规则是取第一个数值作为返回的结果，如果字符串的第一个字符不是数组，则返回NaN//函数isNaN()：用于判断给定的值或变量，是不是一个数，数值返回false，字符串返回false//表达式：由运算符连接的变量，最终会产生一个结果

函数

函数是由多个语句组成的，完成特定功能的代码块。可以提高代码的复用性

函数的定义：

JS中的函数没有强制的返回值类型约束
参数的定义不用书写类型，直接书写变量名

function 函数名(参数列表){  //函数体   //函数的返回值，没有类型约束，返回什么类型的值都可以return 返回值;    //可以结束函数的执行
}

函数的调用

函数名(参数列表)
参数传递的个数与参数列表可以不匹配

JS中每一个函数内都有一个隐含的对象arguments数组，里面封装保存了传递的所有参数

//函数的基本使用
<script type="text/javascript">//声明一个无参，无返回值的函数function fun1(){console.log('无参函数');}//定义一个有参有返回值的函数function sum(a,b){console.log('计算两个数的和');return a+b;}//调用函数fun1();var s = sum(1,2);console.log('和是：',s);
</script>function funSum(a,b){//JS函数中有一个隐含的封装了参数值的对象：arguments，是一个数组//可以从arguments中获取调用函数传递的所有参数console.log('funSum:',arguments);for(var i = 0; i < arguments.length; i++){console.log('funSum:',arguments[i]);}return a+b;
}//调用函数
//var sum = funSum();   相当于两个undefind相加
var sum = funSum(1,8,200);
console.log(sum);

JS函数的特殊用法

匿名函数

var fun2 = function(a,b){console.log('匿名函数',a,b);
}
//调用fun2('呵呵',9);

定义只能使用一次的函数

 //定义完函数原地调用，没有函数名，只能调用一次
( function(){console.log('调用一次性函数')
} )();

将函数作为参数传递

//将函数作为变量进行传递
function fun3(){console.log('函数作为变量')
}
//一共调用了两次fun3()
var fun4 = fun3;
console.log(fun4);
fun4();
//定义一个函数
function fun5(m){m();
}
fun5(fun4); //把fun4当作参数传递

函数作为函数的返回值

//函数可以作为返回值
function fun6(){console.log('fun6被调用')return function (){console.log('fun6的返回值')    }
}
fun6()();

全局作用域：全局作用域内定义的变量，在全局范围内任何位置都可以使用

局部作用域：定义在函数内部的变量，作用范围仅限当前函数内部，但是如果函数内的一个变量没有用var声明，会自动晋升为全局变量

当全局变量和局部变量命名冲突，局部优先
函数在定义的过程中一定避免与变量名命名冲突

<script type="text/javascript">//此时m的范围是全局的var m = 10;function fun1(){//n的使用范围仅限当前代码块中var n = 20;//没有用var声明，则自动提升为全局x = 100;console.log('fun1:',m,n,x);}function fun2(){console.log('fun2:',m,x)}fun1();fun2();console.log('**************');function fun3(){var a = b = c = 20;  //此时var的作用仅对a有效}fun3();console.log(b);</script>

数组

声明

JS中数组的类型没有限制

定义数组

//第一种创建数组方式，声明一个空的数组，与var arr2=[];是等效的
var arr1 = new Array();
arr1[0] = 'hehe';
arr1[1] = 100;
console.log(arr1);//第二种创建数组方式
var arr2 = [];
console.log(arr2);
var arr3 = [1,2,'erha'];
console.log(arr3[2]);

遍历数组：for…in针对于稀疏数组时只输出有值的元素

//声明一个数组
var arr1 = [1,3,2,5,6];
arr1[10] = 100;//现在数组下标为10的位置有了值，但是标4-9的位置是没有值的
//遍历数组
console.log('=========for循环遍历=======');
for(var i=0;i<arr1.length;i++){//遍历所有的元素，包括undefinedconsole.log(arr1[i]);
}//for...in
//idx代表数组的下标，可变；且在遍历稀疏数组时只输出有值的元素for(idx in arr1){//只遍历有效的元素console.log(idx,arr1[idx]);}

针对数组的一些函数

        var arr1 = [1,23,4,5,9];//向数组末尾添加元素arr1.push(100);//向数组头部添加元素arr1.unshift(200);//删除数组最后一个元素arr1.pop();//删除数组第一个元素arr1.shift();//将数组的元素使用指定字符进行拼接，返回一个字符串var str = arr1.join(':')//从指定下标位置，删除n个元素arr1.splice(0,1);var arr2 = [10,20,30];var arr3 = [40,50,60];//concat函数，会返回两个数组合并后的大数组var arrs = arr2.concat(arr3);var arr4 = [1,23,2,5,19];//数组排序，默认按照从第一个位置从小到大排序，需要自定义规则arr4.sort(function(a,b){return a-b; //升序排列//return b-a;   降序排列});

对象

对象的创建和对象中属性定义的操作

通过new Object（）创建

<script type="text/javascript">//创建一个对象var obj1 = new Object();//给对象中设置属性obj1.name = 'hang';obj1.age = 18;//设置对应属性的get/set方法obj1.setName = function(name){//this指当前对象this.name = name;}obj1.getName = function(){return this.name;}//调用对象中的方法obj1.setName('yuan');//访问属性console.log(obj1.name,obj1.age);//输出结果yuan 18console.log(obj1.getName());//输出结果yuan
</script>

通过JSON字符串格式定义JS对象

JSON字符串本质就是个字符串，但JSON字符串的格式是固定的一种国际标准：{“name”:“value” , “name2”:“value2” , …}，是键值对的方式，对应的值可以为数组

<script type="text/javascript">//创建一个对象var obj = {//"name":"hang",name:"yuan",//在定义JS对象中的属性key时，可以省略双引号"age":18,setName:function(name){this.name = name;},getName:function(){return this.name;},setAge:function(age){this.age = age;},getAge:function(){return age;}};//访问属性console.log(obj);console.log('直接过去属性值',obj.name);console.log('通过方法获取属性值',obj.getName());
</script>

日期对象

 <script type="text/javascript">//创建日期对象//var date = new Date();//当前系统时间var date = new Date('2022-10-22');//日期对象常用方法document.write(date+'<br>');document.write('年：'+date.getFullYear()+'<br>');document.write('月：'+date.getMonth()+1+'<br>'); //月必须加1document.write('日：'+date.getDate()+'<br>');document.write('时：'+date.getHours()+'<br>');document.write('分：'+date.getMinutes()+'<br>');document.write('秒：'+date.getSeconds()+'<br>');document.write('星期：'+date.getDay()+'<br>');
</script>

常用的其他函数

//字符串相关//str.length  返回字符串str长度//str.indexOf(字符)  返回指定的字符串在str中出现的第一次的下标，没有返回-1//str.lastIndexOf(字符)  返回指定的字符串在str中最后一次出现的下标，没有返回-1//运算相关//Math.random()   返回0到1之间的一个随机数//Math.pow(m,n)  返回m的n次幂//Math.round();      返回四舍五入

复杂数组小练习

<script type="text/javascript">//书写JS代码function fun1(option){console.log(option);//option传入一个对象，在函数的内部使用option对象的属性值console.log(option.name);console.log(option.age); }var o = {name:'hang',age:18}fun1({name:'yuan',age:18});   //复杂数组var arr = [{id:1,name:'北京'},{id:2,name:'天津'},{id:3,name:'上海'}];document.write('<select>');for(var i=0;i<arr.length;i++){console.log(arr[i]);console.log(arr[i].id);console.log(arr[i].name);document.write('<option value="">'+arr[i].name+'</option>')}document.write('</select>');
</script>

事件开发

指JS通过捕捉用户在网页上的一系列操作（如单击鼠标等），进行相关的处理
事件开发的三要素：
- 事件源：指HTML标签元素
- 事件属性：用于捕捉事件的特殊的属性。如：捕捉单击事件的属性 onclick
- 事件监听器：针对捕捉到的事件，进行的后续处理，一般是通过函数实现

完成事件开发的流程

书写HTML标签
在HTML标签上定义事件属性
开发事件监听函数

调用事件监听函数

<!--  οnclick=""  捕捉单击事件的属性  -->
<head><script type="text/javascript">//编写事件监听函数function funClick(){alert('你点我啊');}</script>
</head>
<body><h2>事件开发</h2><input type="button" value="单击鼠标事件" onclick="funClick()">
</body>

调用事件回调函数，在事件属性值上传参，获取标签的属性值

事件属性调用函数的时候，传的this是当前的标签对象

<script type="text/javascript">//编写时间监听函数function fn1(){//alert('你点啥');//console.log('呵呵呵');document.write('<select>'); document.write('<option>北京</option>');document.write('<option>上海</option>');document.write('</select>');}function fn2(arg){//输出 <input type="button" value="触发事件的时候传参" οnclick="fn2(this)"/>console.log(arg);//输出 value属性值：触发事件的时候传参console.log('value属性值：'+arg.value); //输出 value属性值：buttonconsole.log('value属性值：'+arg.type);}</script><body><input type="button" value="普通按钮" onclick="fn1()"/><!-- 事件属性调用函数的时候，传的this是当前的标签对象 --><input type="button" value="触发事件的时候传参" onclick="fn2(this)"/>
</body>

操作标签

var obj = document.getElementById(标签的ID属性值);
获取标签的属性值：obj.属性名

设置新的属性值：obj.属性名 = 要修改的内容

<script type="text/javascript">function funLight(){//根据标签的id属性获取标签对象var imgObj = document.getElementById('bulb');console.log(imgObj);console.log(imgObj.title);if(imgObj.title=="off"){//给src属性赋新值imgObj.src = "img/bulb_on.png";imgObj.title="on";}else{//给src属性赋新值imgObj.src = "img/bulb_off.png";imgObj.title="off";}}
</script><body><img src="img/bulb_off.png" title="off" id="bulb"/><br><input type="button" value="开关" onclick="funLight()">
</body>

常用的事件属性

属性名	触发时机
onclick	单击鼠标触发
ondblclick	双击鼠标触发
onblur	失去焦点触发
onfocus	获得焦点触发
onmouseover	鼠标覆盖触发
onmouseout	鼠标移出触发
onmousemove	鼠标移动触发
onkeyup	抬起按键触发
onkeydown	按下按键触发
onload	加载完页面触发，用于body标签
onchange	改变下拉列表选项触发
onsubmit	提交表单的事件

操作标签

<script type="text/javascript">function funLight(){//根据标签的id属性获取标签对象var imgObj = document.getElementById('bulb');console.log(imgObj);console.log(imgObj.title);if(imgObj.title=="off"){imgObj.src = "img/bulb_on.png";imgObj.title="on";}else{imgObj.src = "img/bulb_off.png";imgObj.title="off";}}
</script><body><img src="img/bulb_off.png" title="off" id="bulb"/><br><input type="button" value="开关" onclick="funLight()">
</body>

阻止表单提交

<!-- onsubmit  --><script type="text/javascript">//表单验证的监听函数function funSubmit(){//书写表单验证的代码return false;   //此时会阻止表单提交}
</script><form action="http://www.baidu.com" method="post" onsubmit="return funSubmit()">Username:<input type="text" id="username" /><br>Password:<input type="password" id="password" /><br><input type="submit" value="提交">
</form>

阻止超链接的默认事件

<!--  第一种  -->
<a href="#" >超链接</a><!--  第二种  -->
<a href="javascript:void(0)" >超链接</a>

事件冒泡：当父元素和子元素定义了相同的事件时，触发子元素的事件同时会扩散触发父元素的相同事件

function funSup(){alert('触发了父div');
}
function funSub(){alert('触发了子div');
}<div id="supDiv" onclick="funSup()"><div id="subDiv" onclick="funSub()"></div>
</div>

阻止事件冒泡

function funSub(){alert('触发了子div');//阻止事件冒泡//第一种方式，针对非IE浏览器兼容性好event.stopPropagation();//第二种方式，针对IE浏览器兼容性好event.cancelBubble = true;
}

DOM编程

Document Object Model，文档对象模型
所有的HTML文档中的元素都封装成了一个document对象，我们可以操作和获取这些对象
DOM树特点
- 我们把每一个HTML元素称为DOM树上的一个节点（node），每一个节点可以有多个子节点，只能有一个直接父节点
- 每一个HTML元素都在这个DOM树上
DOM编程主要作用
- 使用DOM编程可以修改HTML文档的样式属性
- 使用DOM编程可以动态的添加和删除HTML元素
- 使用DOM编程可以完成表单的验证

获取标签对象

根据标签ID属性值获取标签对象：document.getElementById(ID 属性值)；返回一个对象
根据标签的name属性值获取标签对象：document.getElementsByName(name 属性值) ；返回一组对象
根据标签的class属性值获取标签对象：document.getElementsByClassName(class 属性值) ；返回一组对象
根据标签名获取标签对象：document.getElementsByTagName(标签名) ；返回一组对象

<script type="text/javascript">function getObj(){//根据id获取var username = document.getElementById('username');console.log('根据id获取：',username);//根据name获取var sexs = document.getElementsByName('sex');console.log('根据name获取：',sexs);//根据class获取var form_inps = document.getElementsByClassName('form_inp');console.log('根据class获取：',form_inps);//根据标签获取var inputs = document.getElementsByTagName('input');console.log('根据标签名获取：',inputs);}
</script><form action="" method="POST" >Username:<input type="text" id="username" name="username" class="form_inp"/><br>Password:<input type="password" id="password" name="password" class="form_inp"/><br>Sex:<input type="radio" id="male" name="sex"/>男<input type="radio" id="female" name="sex"/>女<br>Hobby:<input type="checkbox" id="eat" value="eat" name="hobby"/>吃饭<input type="checkbox" id="sleep" value="sleep" name="hobby"/>睡觉<input type="checkbox" id="hetBee" value="hetBee" name="hobby"/>打豆豆<br><input type="submit" value="提交" /><br>
</form>
<input type="button" value="测试" onclick="getObj()">

操作标签的属性

获取属性值：obj.属性名或调用方法 obj.getAttribute(属性名)；

设置属性值：obj.属性名=新值或调用方法 obj.setAttribute(属性名，属性值);

function tagAttr(){//根据id获得标签对象var obj = document.getElementById('username');//console.log(obj.value);//获取class属性值//console.log(obj.getAttribute('class'));//设置标签属性值//obj.value='Hello';obj.setAttribute('value','world');
}

操作标签体内容

获取标签体内容：
- obj.innerText：只获取纯文本内容
- obj.innerHTML：获取标签体所有内容，包含子标签
设置标签体内容：
- obj.innerText = ‘新内容’，新内容会覆盖旧内容
- obj.InnerHTML = ‘新内容’，如果新内容包含html标签，则会解析标签功能

//操作标签体内容//获取function getTagInfo(){var dv = document.getElementById('dv');//console.log(dv.innerText);   只能操作纯文本内容console.log(dv.innerHTML);     var dvd = document.getElementById('dvd');//console.log(dvd.innerText);console.log(dvd.innerHTML);        //可以获取到标签体内的子标签}//设置function setTagInfo(){var dv = document.getElementById('dv');//dv.innerText='鲲之大，一锅炖不下';   只能操作纯文本内容dv.innerHTML='<h3>鲲之大，一锅炖不下</h3>';   //可以解析html标签功能var dvd = document.getElementById('dvd');  //dvd.innerText='鲲之大，一锅炖不下';dvd.innerHTML='<h3>鲲之大，一锅炖不下</h3>';}

操作单选按钮和多选框

选中：obj.checked = true；
取消选中：obj.checked = false；

返回当前状态：obj.checked 返回当前状态，false：未选，反之

<script type="text/javascript">function funTest1(){var man = document.getElementById('man');//选中man.checked = true;}function funTest2(){var man = document.getElementById('man');//取消man.checked = false;}function funSelAll(){//根据name获得所有的checkboxvar hobby = document.getElementsByName('hobby');for(var i=0;i<hobby.length;i++){hobby[i].checked = true;}}function fun1(){//获取所有单选按钮var sexs = document.getElementsByName("sex");console.log(sexs);//选中第一个单选按钮//sexs[0].checked = true;//取消选中状态sexs[0].checked = false;console.log('单选按钮当前状态：',sexs[0].checked);var likes = document.getElementsByName("likes");for(idx in likes){likes[idx].checked = true;}}
</script>

操作下拉列表

//下拉列表操作
function fun2(sel){//获取当前option选项的value属性值//console.log(sel.value);//获取当前option选项的下标//console.log(sel.selectedIndex);//获取所有的option选项console.log(sel.options);
}

获取当前对象的关系对象，即关系节点的对象，所有属性支持链式调用，注意中间的空文本test节点标签

获取父节点对象：obj.parentNode 返回值是一个对象
获取所有孩子节点对象：obj.childNodes 返回一个数组
获取上一个哥哥对象：obj.previousSibling 返回一个对象

获取下一个弟弟对象：obj.nextSibling 返回一个对象

<script type="text/javascript">function funGetObj(){var sp = document.getElementById('dv2_inner_span1');//获取父节点对象console.log(sp.parentNode);//获取父节点的父节点，支持链式调用console.log(sp.parentNode.parentNode);//获取所有的子节点对象//var chileNodes = sp.childNodes;var dv2 = document.getElementById('dv2');//获取上一个哥哥节点console.log(dv2.previousSibling.previousSibling);//获取下一个弟弟节点console.log(dv2.nextSibling.nextSibling);}
</script>

通过DOM编程动态操作HTML页面的元素创建和删除

添加节点

var obj = document.createElement(标签名); //创建标签对象

parentObj.appendChild(obj); //放到指定的父节点下

function funAddNode(){console.log('add node');//创建一个span节点var span = document.createElement('span');//给节点加内容span.innerHTML = '新来的';//获取未来指定的父节点var dv3 = document.getElementById('dv3');//给dv3添加子节点dv3.appendChild(span);
}

删除节点

parentObj.removeChild(obj); //删除指定的子节点

function funDelNode(){var dv3 = document.getElementById('dv3');//获取dv3的子节点sp1var sp1 = document.getElementById('sp1');//删除子节点dv3.removeChild(sp1);
}

BOM编程

Browser Object Model，浏览器对象模型
可以控制浏览器的相关动作

window对象：控制浏览器的窗口相关动作

弹窗提示：window.alert(内容)
确认提示窗口：window.confirm(提示信息) 返回值为true或false

弹窗接受用户信息：window.prompt(提示信息，文本框默认值) 返回用户输入的信息

function fun1(){//弹窗//window.alert('Hello');//确认提示窗口//var boo = window.confirm("是否确认");//console.log(boo);//参数一：提示信息//参数二：文本框默认值，可以不要第二个参数//返回值：用户输入的信息var txt = window.prompt('请输入年龄','年龄是');console.log(txt);
}

只执行一次的定时器：var id = window.setTimeout(回调函数，定时延迟/毫秒);
- 清除定时器：window.clearTimeout(id);

周期性定时器：var id = window.setInterval(回调函数，定时延迟/毫秒);

清除i定时器：window.clearInterval(id);

        //一次执行定时器//返回值，返回当前定时器的一个标识//参数一：回调函数//参数二：回调函数的延迟时间，单位毫秒/* var timeId1 = window.setTimeout(function(){alert('一次性定时器');},3000); *///周期执行定时器//返回值，返回当前定时器的一个标识//参数一：回调函数//参数二：回调函数的延迟时间，单位毫秒var timeId2 = window.setInterval(function(){alert('周期性定时器')},2000);//清除定时器function clearTime(){//清除指定定时器window.clearTimeout(timeId1);window.clearInterval(timeId2);}

location对象：控制浏览器地址栏

location.href=‘路径’ 跳转页面，也可以向action发送请求

function funBaidu(){//跳转到百度location.href='http://www.baidu.com';
}<input type="button" value="百度一下" onclick="funBaidu()" />

编程方式提交表单：formObj.submit();

//提交表单的函数
function funSubmit(){//手动提交表单var fom = document.getElementById('fom');fom.submit();
}<form action="http://www.baidu.com" method="post" id="fom">Username:<input type="text" /><br>Password:<input type="password" ><br><input type="button" value="提交" onclick="funSubmit()">
</form>

点击更换验证码，浏览器会把加载过的资源缓存一个验证码图片，会记录下，所以需要加后缀让浏览器不去使用缓存，让浏览器重新发送请求

function changeCaptcha(){//根据id获取验证码图片对象var captchaImg = document.getElementById('captchaImg');captchaImg.src = '${path }/p1/captcha?'+Math.random(); //让浏览器每次都重新加载验证码图片//两种方法效果一样//captchaImg.src = '${path }/p1/captcha?'+new Date();
}<img src="${path }/p1/captcha" id="captchaImg">
<a href="javascript:void(0)" onclick="changeCaptcha()">看不清，换一张
//可以传this，在方法中就不需要获取图片对象了，可以简化

八、JavaScript相关推荐

JavaScript学习总结(八)——JavaScript数组
转载自 JavaScript学习总结(八)--JavaScript数组 JavaScript中的Array对象就是数组,首先是一个动态数组,无需预先制定大小,而且是一个像Java中数组.Array ...
Web开发及人机交互导论实验八 JavaScript程序结构
实验八一.实验目的二.实验环境三.实验步骤项目一:成绩百分制转换为五级制项目二:计算∑n!\sum{n!}∑n! 项目三:系统常用函数的使用项目四:课外拓展训练(一)--找出符合条件的数 ...
JavaScript (八) -- JavaScript BOM
目录 1. JavaScript BOM的概述: 2. Window 对象(浏览器窗口对象) 2.1 Window 对象的调用方式:
Javascript第三章数组Array常用方法第三课
第一种JavaScript sort() 方法更多免费教学文章请关注这里实例例子 1 在本例中,我们将创建一个数组,并按字母顺序进行排序: <script type="text/ ...
JavaScript 网页编程（一）——JavaScript 基础语法
目录一.计算机编程基础二.初识 JavaScript 三.JavaScript 变量四.JavaScript 数据类型五.标识符.关键字.保留字六.JavaScript 运算符(操作符) 七 ...
第一周 Web开发入门(下)
七.JavaScript对象模型---BOM对象使JavaScript可以与浏览器进行对话. 1.window对象 window.innerHeight - 浏览器窗口的内高度(以像素计) wind ...
Html5+js测试题【完整版】
一.闭包的理解: 使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露. 闭包三个特性: 1.函数嵌套函数 ; ...
java程序设计教学大纲_《Java程序设计》课程教学大纲.pdf
<Java程序设计>课程教学大纲一. 课程的性质和任务课程性质:<Java程序设计>是信息与网络技术专业的一门选修课程,是学习Java语言在互联网中使用技巧的一门课程. ...
[译] ES6+ 中的 JavaScript 工厂函数（第八部分）
本文讲的是[译] ES6+ 中的 JavaScript 工厂函数(第八部分), 原文地址:JavaScript Factory Functions with ES6+ 原文作者:Eric Elliot ...
八、前端开发-JavaScript 客户端存储
八.前端开发语言体系-JavaScript 客户端存储文章目录八.前端开发语言体系-JavaScript 客户端存储 JavaScript 客户端存储客户端存储简介 Cookie LocalSt ...