javaweb实训第一天下午——JavaScript

阅读量：2069 次

发布时间：2019-04-29

本文共 12198 字，大约阅读时间需要 40 分钟。

1.课程介绍

JavaScript简介；（了解）

JavaScript三种写法；（掌握）

JavaScript变量；（掌握）

JavaScript原始数据类型；（掌握）

JavaScript运算符；（掌握）

JavaScript流程控制；（掌握）

JavaScript函数；（掌握）

JavaScript对象；（掌握）

BOM；（了解）

JS非常简单，但是知识点很多，很多同学学完之后，都感觉，不能综合运用，但是知道每个知识点是一个什么意思！！！我要的效果就是这样效果(多于知识点多，比较杂的怎么学习呢？–》多练)

–》以前可能前面老师有很多时间给大家练习

2.JavaScript简介

1.JavaScript是一种解释性脚本语言（代码不进行预编译），由浏览器解释执行，用来向页面添加交互行为；
2.Java Script由三个主要组成部分：ECMAScript（核心），BOM（浏览器对象模型），DOM（文档对象模型）；

注：ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象，DOM把整个页面规划成由节点层构成的文档，它不与浏览器、平台、语言相关，为web开发者提供一个标准可以访问站点中的数据、脚本和表现层对象。BOM是浏览器的一种特性，它可以对浏览器窗口进行访问和操作，例如移动、关闭窗口，调整窗口的大小，支持cookie等。

3.为什么要学习JavaScript(理解)

JavaScript在互联网中的应用几乎无处不在，为了提升用户体验和数据的操作，常见的适用场景：

1.页面效果(用户体验)
2.表单验证
3.事件监听数据处理
4.页面跳转
5.局部刷新（ajax）

3.JavaScript三种写法

3.1.行内JS

1.行内JS使用几率较少，只有针对某些标签的特殊操作：
语法：<a href="javascript:alert('点你就点你');">点我，点我...</a>
2.上述代码中，我们将JS代码写在href属性中，这样我们在点击链接的时候，执行的就不是跳转地址，而是其中的JS代码；
3.javascript:这是伪协议的意思，类似咱们http:，伪协议是为了告诉浏览器接下来的代码是JS代码，当然部分地方可以省略，但建议写上伪协议；
4.alert(参数值)是用来弹出一个提示框，弹框中的提示信息即为传入的参数值，弹框是JS的重要调试手段之一；
5.console.debug()也是JS的一种调试手段，但此种调试手段在IE上不支持；

3.2.内部JS

1.页面内的JS是写在一组

示例代码：

3.3.外部JS

1.外部JS方式，其实就是先单独定义一个JS文件，然后将这个JS文件与要使用的网页将关系关联起来；

引入外部JS文件：

2.引入CSS文件使用标签，引入JS文件而是使用

4.JavaScript变量

1.在Java语法的学习过程中，我们声明变量是显式的声明具体的某一个类型的关键字，而在JS中声明变量却是使用var关键字，无论是何种数据类型的变量，均可以使用var关键字来进行声明；
2.什么是变量？系统为之设置一个标识，程序可以用变量名来指向具体的对象内存，并通过变量名来获得对应的对象；

4.1.语法

var 变量名;                        //声明变量【推荐方式】var 变量名=值;                     //声明变量并赋值【推荐方式】已声明赋值的变量 = 另一种类型值;   //【不推荐】不声明变量 = 值;                   //不事先声明变量直接使用

1.如果按照Java的语法去声明JS变量，那么大家一定会使用推荐的两种方式去做；

2.事实上，JS的语法校验规则并不严密，在JS的语法中允许给已声明且赋值的变量赋值另外类型的值；

4.2.示例代码

var name=”字符串类型”;console.debug(name);            //在控制台输出打印name变量name = 19;console.dubug(name);

1.上述代码中，我们声明了一个name变量，并赋值了一个字符串，但随后我们给name变量赋值了一个数字类型；

讨论：这样的操作在Java语法中会报错吗？

2.答案是毋庸置疑的，Java语法一定会报错，但在JS的语法中，此种操作不会；

3.JS中还可以不使用var关键字，直接写一个符合命名规范的名字作为变量使用，例如：

age = 18;console.debug(age);

4.上述操作中，我们直接使用了一个名字并赋值，JS中是允许此类操作的，但不推荐使用；

5.综上所述，我们可以得出一个结论：JS的语法规则并不如Java那么严格，所以在学习JS的过程中，请按照Java的语法风格要求自己；

5.JavaScript原始数据类型

1.JavaScript中的原始数据类型相当于Java的基本数据类型，在js中可以使用typeof 和typeof()判断当前变量属于那种数据类型；

例子：

var a = true;		alert(typeof a);//boolean		alert(typeof(a));//true

5.1number（数值类型）

1.JS数字类型可以采用10进制\8进制\16进制以及科学计算法等形式表示；

5.1.1.常用十进制

0x8a     //十六进制以0x或0X开头0123     //八进制必须以0开头1        //十进制首位不能为05E7      //科学计数法

5.1.2.无穷数

1.在JS语法中，数字是有取值边界的，超出最大数取值为Infinity【正无穷】，超出最小数取值为-Infinity【负无穷】，无穷数不能用于数值运算，一般使用isFinite()函数对一个数字进行判断是否是有穷的【有限的】，若传入的数据是无穷数，那么返回false，若传入的数据是有穷数，则返回为true；

isFinite(1/0);                        //Infinityconsole.debug(isFinite(1/0));      //false

2.在JS中，1/0并不会报错，因为JS语法中0是取值了一个无限趋近于0的一个数字

5.1.3.非数

1.非数：不是数字，在JS中采用NAN来表示，同样在JS中采用了isNaN()函数来判定当前字符是否真的不是数字；

var n1=123;var n2=’aaa’;console.debug(n1/n2);             //NaNconsole.debug(isNaN(n1/n2));    //true

2.NaN这个特殊字符比较有意思的地方在于：

(1)与任何值均不相等，包括自己本身；

(2)任何涉及NaN的操作都会返回NaN；

5.2.boolean（布尔类型）

1.布尔类型和Java一样，采用true和false表示；

2.注释：在JS语法中，0、NaN、Undefined、空字符串、null均可以表示为false；

5.3.string（字符串类型）

1.JS语法中不存在char类型，所以由单引号或双引号括起来的字符序列，任何字符串的长度都可以通过访问length属性获得；

5.4.null（空对象）

1.表示一个不存在的对象，只有一个值null；

5.5.undefined（未定义或未初始化）

1.表示声明但未赋值的对象，Undefined派生自null；

2.如果我们做 *、/如果有字符串，它会尝试去转换成number来进行运算，如果转换失败（NaN）；

6.JavaScript运算符

在JS中同样存在算术运算符、等性运算符、逻辑运算符的操作，这些运算符的操作和JAVA一样，接下来我们演示与JAVA不一样的地方；

6.1.赋值运算符

在这里插入图片描述

注：赋值运算符的使用和Java一样；

6.2.算数运算符

在这里插入图片描述注释：在JS中+运算符中有字符串的应用，会演变为字符串的拼接；

var x=3 + “3”;console.debug(x);  //33

6.3.比较运算符（关系运算符）

1.比较运算符用于判断两个变量大小关系：>、<、==、<=、>=、===、!=、!===，其中：

(1)== ：代表相等(它只比较内容，不比较类型)

(2)===：绝对相等(先比较类型，再比较内容)

(3)!==：绝对不等

var x=10;var y=”10”;console.debug(x==y);  //trueconsole.debug(x===y);  //falseconsole.debug(x!==y);  //true

6.4.逻辑运算符

&& ：逻辑AND运算符，一假遍假

|| ：逻辑OR运算符，一真遍真

! ：逻辑NOT运算符，真为假，假为真

var x=0||1;console.debug(x);  //1

1.逻辑或运算符从第一个值开始找，如果找到一个值代表true,那么就返回这个值

2.JS中0、""、false、null、undefined、NaN均表示false；

7.JavaScript流程控制

JS中同Java一样存在流程控制语句，用法一样：
1.分支：
(1)if语句
(2)switch语句
2.循环：
(1)while语句
(2)do-while语句
(3)for循环
3.break/continue语句
4.三目表达式

8.JavaScript函数

1.函数是一组可以随时运行的代码语句，此处大家可以理解为方法；

2.函数作用：可以避免载入时执行，可以被多次调用；

8.1.语法

function 函数名(参数列表){
   JS代码[return 返回值;]}

1.JS中函数的定义使用function关键字，这一点是和Java不一样的地方，同时允许函数具备返回值，返回值采用关键字return，如果函数没有定义返回值，接收到的将是一个undefined；

function $action(){
   	console.debug(“函数定义测试”);}var x = $action();   //使用函数名完成函数调用，并定义一个变量接收返回值console.debug(x);    //输出undefined，因为函数中并没有定义返回值

2.上述代码中我们可以看到直接使用函数名即可完成针对函数的调用；

3.针对带参数的函数，个数与类型对它没有任何影响(都可以调用)。只要调用的函数名称是对的(函数名称不可以重名)，但推荐如何定义就如何使用；

JS中函数传参不需要声明；

8.2.全局变量和局部变量

var msg="显示全局变量";function show(){
   	msg="隐式全局变量";}show();console.debug(msg);  //隐式全局变量，需要先调用方法才能访问该变量var msg2="全局变量";function show2(){
   	var msg2="局部变量";	}show2();console.debug(msg2);//全局变量

8.3.全匿名函数语法

1.匿名函数顾名思义就是一个没有定义名称的函数：

function (参数列表){
   	JS代码	[return 返回值;]}var action = function(){
   	console.debug(“前方高能，请非战斗人员迅速撤离”);}action();

9.JavaScript对象

9.1.本地对象

1.本地对象就是 ECMA-262 定义的类（引用类型），相当于Java中类的概念；
2.这些引用类型在运行过程中需要通过new来创建所需的实例；
3.包括： Object、Boolean、Number、Date、String、Array等，重点掌握Date、String和Array对象；

9.1.1.Date

日期对象

9.1.1.1 API

在这里插入图片描述

9.1.1.2 代码实例

需求：将转换日期的代码封装成方法，重复使用：

//1.创建一个对象var date = new Date();//2.给这个对象添加方法date.dateFormat = function() {
   	var d = new Date();	var year = d.getFullYear();	var month = d.getMonth() + 1; //返回的月份是从0开始11结束	var day2 = d.getDate(); //月中的天数是从1到31	var hour = d.getHours(); //取值范围0到23	var minute = d.getMinutes(); //取值范围是0到59	var second = d.getSeconds(); //取值范围是0到59	//yyyy/MM/mm HH:mm:ss	console.debug(year + '/' + month + '/' + day2);}

9.1.2.string

字符串

9.1.2.1 API

split()方法用于把一个字符串分割成字符串数组toLowerCase()方法用于把字符串转换为小写toUpperCase()方法用于把字符串转换为大写substr()方法可在字符串中抽取从 start 下标开始的指定数目的字符，未指定长度则一直截取到结尾substring()方法用于提取字符串中介于两个指定下标之间的字符，不包括结束位置的字符charCodeAt(index)返回指定位置的unicode码fromCharCode() -- 相当于静态方法可接受一个指定的 Unicode 值，然后返回一个字符

9.1.2.2.示例代码

需求：分割字符串、转换大小

var str = "a.b.c.D.e.F";console.debug(str.split('.'));console.debug(str.toLowerCase());console.debug(str.toUpperCase());

需求：截取字符串

var str5="01234567"; //主要是为了能和下标相对应console.debug(str5.substr(3));//34567console.debug(str5.substring(3));//34567			console.debug(str5.substr(3,2));//34console.debug(str5.substring(3, 2));

需求：连接字符串

var str1 = "hello";var str2 = "world";var str3 = str1.concat(str2);console.debug(str3);//helloworld

需求：获取指定位置的unicode值，将一个unicode值转换为字符

var str1 = "abcde";console.debug(str1.charCodeAt(0));//取到对应索引处的unicode码console.debug(String.fromCharCode(65));

9.1.3.Array

数组对象

9.1.3.1.API

在这里插入图片描述

9.1.3.2.代码实例

需求：数组声明并赋值

//1.声明数组var arr = new Array();var arr2 = new Array(3);var arr3 = new Array(1, '2', 3);console.debug(arr);console.debug(arr2);console.debug(arr3);//1.1针对空数组赋值arr[0] = 1;arr[1] = 'aaa';arr[2] = 2;console.debug(arr);//1.2针对固定长度的数组赋值，可以超出吗arr2[0] = 1;arr2[1] = 'aaa';arr2[2] = 2;arr2[3] = 'hahaha';console.debug(arr2); //Array [ 1, "aaa", 2, "hahaha" ]console.debug(arr2.length); //4//1.3 简化声明var arr4 = ['aa', 'asdfew', 1, 2, 'sdfasdfa'];console.debug(arr4);

需求：数组转换为字符串，且使用指定内容分隔，倒序

console.debug(arr4.join());console.debug(arr4.join('￥'));console.debug(arr4.reverse());

需求：针对数组的增加、删除的一些操作

//1针对数组开头的一些操作console.debug(arr4.shift()); //sdfasdfaconsole.debug(arr4); //删除掉了'aa'console.debug(arr4.unshift('aaa')); //5console.debug(arr4);//2针对数组结尾的操作：pop删除和push添加console.debug(arr4.pop()); //sdfasdfaconsole.debug(arr4); console.debug(arr4.push('aaaaa'));console.debug(arr4);//3针对数组中间部分的操作  splice//splice演示删除arr4.splice(0);console.debug(arr4); //清空数组//演示了添加arr4.splice(0, 0, "aaa", "asdfew", 1, 2, "aaaaa"); //重新将数组添加回来console.debug(arr4);//演示了替换arr4.splice(1, 1, 34);console.debug(arr4);arr4.splice(1, 2, 21);console.debug(arr4);

需求：遍历数组

//1  for循环来进行遍历  第一种方式  推荐使用for(var i = 0; i < arr4.length; i++) {
   	console.debug(arr4[i]);}//2  for...in来遍历数组//此类方式遍历的是数组中的下标  适合遍历json、对象for(var i in arr4) {
   	console.debug(i);//输出的是数组的下标	console.debug(arr4[i]); //}

9.2.系统函数

1.定义：全局属性和函数可用于所有内建的 JavaScript 对象。

2.系统函数就是JS给我们准备或者说封装好的一些函数(方法)，实现了很多功能。让咱们可以直接使用。

系统函数我们记住重要的几个，其它的到api里去找即可

9.2.1.1.API

在这里插入图片描述

9.2.1.2.代码示例

需求：编码和解码：

//encodeURI和decodeURI搭配var url = "http://www.baidu.com?arg=百度";console.debug(encodeURI(url));console.debug(decodeURI("www.baidu.com?arg=%E7%99%BE%E5%BA%A6"));//使用encodeURICommponent和decodeURICommponentconsole.debug(encodeURIComponent(url));console.debug(decodeURIComponent('www.baidu.com%3Farg%3D%E7%99%BE%E5%BA%A6'));

需求：eval函数：

//eval函数的使用：计算JS的字符串，并将其作为脚本执行var a = "console.debug('eval函数实例')";console.debug(a); //输出：console.debug('eval函数实例')eval(a);

需求：将字符串转换为number类型：

//parseInt()函数的使用var b = '123';console.debug(typeof b);               //stringconsole.debug(typeof(parseInt(b))); //numberb = '123aaa';                  //当遇到不能解析的内容的时候，parseInt会直接从该处放弃console.debug(parseInt(b));           //123console.debug(typeof(parseInt(b))); //number			var c='aa123aa';console.debug(parseInt(c));//NaNconsole.debug(typeof(parseInt(c)));//number

9.2.2.Math

数学计算对象

9.2.2.1.API

在这里插入图片描述

9.2.2.2.示例代码

需求：绝对值、最大值和最小值

console.debug(Math.abs(1));console.debug(Math.abs(-1));console.debug(Math.max(1, 2, 3, 4, 5, -1)); //5console.debug(Math.min(1, 2, 3, 4, 5, -1)); //-1

需求：获取随机数

console.debug(Math.random());for(var i = 0; i < 10; i++) {
   	console.debug(Math.random());}console.debug("---------");

需求：当前我要取出1-10的随机数取整（（随机数*10））+1

for(var i = 0; i < 10; i++) {
   	console.debug(parseInt(Math.random() * 10) + 1);}

规律公式：取整（随机数*取值范围）+起始值

需求：获取1-100之间的随机数

for(var i = 0; i < 100; i++) {
   	console.debug(parseInt(Math.random() * 100) + 1);}

需求：舍入取整

//1向上舍入  举例：假设数字为5.1  向上舍入的结果为6//使用场景  分页  假设现在有11组数据，每两条数据分为一个部分，请问会有多少个部分？console.debug(Math.ceil(5.1));  //6console.debug(Math.ceil(11/2));//6			//2向下舍入  举例：假设数字为5.6  向下舍入的结果为5console.debug(Math.floor(5.6));  //5			//3四舍五入console.debug(Math.round(5.5));//6console.debug(Math.round(5.4));//5

面试题:

Math.round(11.5)的结果是多少?;//12

Math.round(-11.5)的结果是多少?;//-11

注：Math类中提供了三个与取整有关的方法：ceil,floor,round,这些方法的作用于它们的英文名称的含义相对应，例如：ceil的英文意义是天花板，该方法就表示向上取整，Math.ceil（11.3）的结果为12，Math.ceil(-11.6)的结果为-11；floor的英文是地板，该方法就表示向下取整，Math.floor(11.6)的结果是11，Math.floor(-11.4)的结果-12；最难掌握的是round方法，他表示“四舍五入”，算法为Math.floor(x+0.5),即将原来的数字加上0.5后再向下取整，所以，Math.round(11.5)的结果是12，Math.round(-11.5)的结果为-11

9.3.自定义类

1.在ES5中没有像Java中一样专门的class关键字定义对象，JavaScript中创建类其实和创建函数【函数也是一种对象】是一样的语法:

function 名称(){
   }

2.一种语法代表了多重含义，在JavaScript中若想清楚的区分定义的到底是方法还是类，那么建议方法名称小写，创建类名称首字母大写；

3.对象中定义方法，有下列形式：

(1)通过new的实例化对象添加方法；
(2)通过prototype添加方法；
(3)在对象中使用this关键字；

9.3.1.通过对象添加

需求：创建对象，动态的为对象赋值，添加方法：

function Foo(){
   }var f1 = new Foo();f1.name = "张三";//添加方法f1.say = function(){
   	console.debug(11);}console.debug(f1);//调用方法f1.say();

9.3.2.使用this添加

需求：定义的对象中使用this，this是谁调用就是谁：

//1.定义方法function talk() {
   	console.debug(this.age);}//2.定义构造函数function Person(name, age) {
   	this.name = name;	this.age = age;	this.talk = talk;}//3、创建对象并且调用var p = new Person('zs',21);var p2 = new Person('ls',23);console.debug(p.name);console.debug(p2.name);p.talk();p2.talk();

需求：使用this关键字在对象中定义方法：

function Person(name, age) {
   	this.name = name;	this.age = age;	this.talk = function(){
          console.debug(11);}}var p=new Person('zs',21);p.talk();

9.3.3.使用prototype属性

需求：若在后面每次实例化的对象都有say方法，应当怎么添加方法：

Foo.prototype.say=function(){
   	console.debug(11);}var f2=new Foo();f2.say();

10.BOM

1.BOM是browser object model的缩写，简称浏览器对象模型，这个BOM有如下内容: 在这里插入图片描述

(1)打开一个窗口就是一个window对象；
(2)窗口里面使用location表示地址栏；
(3)窗口的历史记录使用history来表示；
(4)浏览器的信息使用navigator来表示；
(5)窗口里面的内容使用document来表示；

10.1.window

1.window对象是BOM中的顶级对象，默认可以省略（即调用其函数时可以省略window.）；
2.window对象是相对于web浏览器而言的，依赖于浏览器，在浏览器中全局对象指的就是window对象；
3.window对象可以获取其他BOM对象；
注意：全局函数和window对象的函数不一样。全局函数不属于任何一个内置对象；

10.1.1.API

在这里插入图片描述

10.1.2.代码示例

需求：提示框

//1消息框alert('我是alert');//2提示输入框 prompt参数：第一个是标题  第二个参数：提示框中的默认值prompt('111','222');//3 确认框  参数：确认框中的提问信息  返回值：booleanvar res = confirm('你能做我女朋友吗？');console.debug(res);需求：定时器setTimeout('document.getElementById("txt1").value=1', 5000);var res;//JS中不能同时使用单引号或者双引号进行嵌套function start() {
   	res = setInterval("document.getElementById('txt2').value = new Date();", 1000);}function stop() {
   	clearTimeout(res);}

10.2.location

当前访问的网址的相关信息

10.2.1.API

在这里插入图片描述

10.2.2.代码示例

var loc = window.location;for(var name in loc) {
   	console.debug(name, loc[name]); //查看对象信息(了解内容)}window.location.href = "http://www.baidu.com";

11.课程总结

11.1.重点

1.JS三种写法；
2.JS基本语法；
3.JS对象；

11.2.难点

1.JS对象比较多；
2.知识点比较杂，比较多，下来多去归纳总结；

11.3.如何掌握

1.课上认真听课；
2.完成课后练习；
3.抓住课程重点；

11.4.排错技巧

通过浏览器控制台F12查看JS代码错误；

转载地址：http://recmf.baihongyu.com/

你可能感兴趣的文章

python中xrange和range的异同

【Python】关于Python多线程的一篇文章转载

查看>>

【Pyton】【小甲鱼】文件

查看>>

【Pyton】【小甲鱼】永久存储：腌制一缸美味的泡菜

查看>>

【Pyton】【小甲鱼】异常处理：你不可能总是对的

【Pyton】【小甲鱼】类和对象：一些相关的BIF（内置函数）

【Loadrunner】【浙江移动项目手写代码】代码备份

查看>>

Python几种并发实现方案的性能比较

查看>>

[Jmeter]jmeter之脚本录制与回放，优化（windows下的jmeter）

查看>>

Jmeter之正则

查看>>

【JMeter】1.9上考试jmeter测试调试

查看>>

【虫师】【selenium】参数化

查看>>

目录

1.课程介绍

2.JavaScript简介

3.JavaScript三种写法

3.1.行内JS

3.2.内部JS

3.3.外部JS

4.JavaScript变量

4.1.语法

4.2.示例代码

5.JavaScript原始数据类型

5.1number（数值类型）

5.1.1.常用十进制

5.1.2.无穷数

5.1.3.非数

5.2.boolean（布尔类型）

5.3.string（字符串类型）

5.4.null（空对象）

5.5.undefined（未定义或未初始化）

6.JavaScript运算符

6.1.赋值运算符

6.2.算数运算符

6.3.比较运算符（关系运算符）

6.4.逻辑运算符

7.JavaScript流程控制

8.JavaScript函数

8.1.语法

8.2.全局变量和局部变量

8.3.全匿名函数语法

9.JavaScript对象

9.1.本地对象

9.1.1.Date

9.1.1.1 API

9.1.1.2 代码实例

9.1.2.string

9.1.2.1 API

9.1.2.2.示例代码

9.1.3.Array

9.1.3.1.API

9.1.3.2.代码实例

9.2.系统函数

9.2.1.1.API

9.2.1.2.代码示例

9.2.2.Math

9.2.2.1.API

9.2.2.2.示例代码

9.3.自定义类

9.3.1.通过对象添加

9.3.2.使用this添加

9.3.3.使用prototype属性

10.BOM

10.1.window

10.1.1.API

10.1.2.代码示例

10.2.location

10.2.1.API

10.2.2.代码示例

11.课程总结

11.1.重点

11.2.难点

11.3.如何掌握

11.4.排错技巧