免费制作网站软件,深圳大森设计,上海市场监督管理局,自己做的视频网站视频加载慢JavaScript新手入门教程大全~~~一。 js教程介绍#xff1a;JavaScript是一种运行在浏览器中的解释型的编程语言。
那么问题来了#xff0c;为什么我们要学JavaScript#xff1f;因为你没有选择。在Web世界里#xff0c;只有JavaScript能跨平台、跨浏览器驱动网页#xff0…JavaScript新手入门教程大全~~~一。 js教程介绍JavaScript是一种运行在浏览器中的解释型的编程语言。
那么问题来了为什么我们要学JavaScript因为你没有选择。在Web世界里只有JavaScript能跨平台、跨浏览器驱动网页与用户交互。Flash背后的ActionScript曾经流行过一阵子不过随着移动应用的兴起没有人用Flash开发手机App所以它目前已经边缘化了。相反随着HTML5在PC和移动端越来越流行JavaScript变得更加重要了。并且新兴的Node.js把JavaScript引入到了服务器端JavaScript已经变成了全能型选手。JavaScript一度被认为是一种玩具编程语言它有很多缺陷所以不被大多数后端开发人员所重视。很多人认为写JavaScript代码很简单并且JavaScript只是为了在网页上添加一点交互和动画效果。但这是完全错误的理解。JavaScript确实很容易上手但其精髓却不为大多数开发人员所熟知。编写高质量的JavaScript代码更是难上加难。一个合格的开发人员应该精通JavaScript和其他编程语言。如果你已经掌握了其他编程语言或者你还什么都不会请立刻开始学习JavaScript不要被Web时代所淘汰。二。 js快速学习入门JavaScript代码可以直接嵌在网页的任何地方不过通常我们都把JavaScript代码放到head中
html
headscriptalert(Hello, world);/script
/head
body...
/body
/html由script.../script包含的代码就是JavaScript代码它将直接被浏览器执行。
第二种方法是把JavaScript代码放到一个单独的.js文件然后在HTML中通过script src.../script引入这个文件
html
head script src/static/js/abc.js/script
/head
body...
/body
/html这样/static/js/abc.js就会被浏览器执行。
把JavaScript代码放入一个单独的.js文件中更利于维护代码并且多个页面可以各自引用同一份.js文件。
可以在同一个页面中引入多个.js文件还可以在页面中多次编写script js代码... /script浏览器按照顺序依次执行。比较运算符
当我们对Number做比较时可以通过比较运算符得到一个布尔值
2 5; // false
5 2; // true
7 7; // true实际上JavaScript允许对任意数据类型做比较
false 0; // true
false 0; // false要特别注意相等运算符。JavaScript在设计时有两种比较运算符
第一种是比较它会自动转换数据类型再比较很多时候会得到非常诡异的结果
第二种是比较它不会自动转换数据类型如果数据类型不一致返回false如果一致再比较。
由于JavaScript这个设计缺陷不要使用比较始终坚持使用比较。数组
数组是一组按顺序排列的集合集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。例如
[1, 2, 3.14, Hello, null, true];上述数组包含6个元素。数组用[]表示元素之间用,分隔。
另一种创建数组的方法是通过Array()函数实现
new Array(1, 2, 3); // 创建了数组[1, 2, 3]然而出于代码的可读性考虑强烈建议直接使用[]。
数组的元素可以通过索引来访问。请注意索引的起始值为0
var arr [1, 2, 3.14, Hello, null, true];
arr[0]; // 返回索引为0的元素即1
arr[5]; // 返回索引为5的元素即true
arr[6]; // 索引超出了范围返回undefined对象
JavaScript的对象是一组由键-值组成的无序集合例如
var person {name: Bob,age: 20,tags: [js, web, mobile],city: Beijing,hasCar: true,zipcode: null
};JavaScript对象的键都是字符串类型值可以是任意数据类型。上述person对象一共定义了6个键值对其中每个键又称为对象的属性例如person的name属性为Bobzipcode属性为null。
要获取一个对象的属性我们用对象变量.属性名的方式
person.name; // Bob
person.zipcode; // null变量
变量的概念基本上和初中代数的方程变量是一致的只是在计算机程序中变量不仅可以是数字还可以是任意数据类型。
变量在JavaScript中就是用一个变量名表示变量名是大小写英文、数字、$和_的组合且不能用数字开头。变量名也不能是JavaScript的关键字如if、while等。申明一个变量用var语句比如
var a; // 申明了变量a此时a的值为undefined
var $b 1; // 申明了变量$b同时给$b赋值此时$b的值为1
var s_007 007; // s_007是一个字符串
var Answer true; // Answer是一个布尔值true
var t null; // t的值是null变量名也可以用中文但是请不要给自己找麻烦。
在JavaScript中使用等号对变量进行赋值。可以把任意数据类型赋值给变量同一个变量可以反复赋值而且可以是不同类型的变量但是要注意只能用var申明一次例如
var a 123; // a的值是整数123
a ABC; // a变为字符串这种变量本身类型不固定的语言称之为动态语言与之对应的是静态语言。静态语言在定义变量时必须指定变量类型如果赋值的时候类型不匹配就会报错。例如Java是静态语言赋值语句如下
int a 123; // a是整数类型变量类型用int申明
a ABC; // 错误不能把字符串赋给整型变量和静态语言相比动态语言更灵活就是这个原因。strict模式
如果一个变量没有通过var申明就被使用那么该变量就自动被申明为全局变量
i 10; // i现在是全局变量使用var申明的变量则不是全局变量它的范围被限制在该变量被申明的函数体内函数的概念将稍后讲解同名变量在不同的函数体内互不冲突。
为了修补JavaScript这一严重设计缺陷ECMA在后续规范中推出了strict模式在strict模式下运行的JavaScript代码强制通过var申明变量未使用var申明变量就使用的将导致运行错误。
启用strict模式的方法是在JavaScript代码的第一行写上
use strict;这是一个字符串不支持strict模式的浏览器会把它当做一个字符串语句执行支持strict模式的浏览器将开启strict模式运行JavaScript。
来测试一下你的浏览器是否能支持strict模式
use strict;
// 如果浏览器支持strict模式
// 下面的代码将报ReferenceError错误:
abc Hello, world;console.log(abc);
字符串JavaScript的字符串就是用或括起来的字符表示。如果本身也是一个字符那就可以用括起来比如Im OK包含的字符是Im空格OK这6个字符。如果字符串内部既包含又包含怎么办可以用转义字符\来标识比如I\m \OK\!;
表示的字符串内容是Im OK!转义字符\可以转义很多字符比如\n表示换行\t表示制表符字符\本身也要转义所以\\表示的字符就是\。ASCII字符可以以\x##形式的十六进制表示例如\x41; // 完全等同于 A
还可以用\u####表示一个Unicode字符\u4e2d\u6587; // 完全等同于 中文模板字符串要把多个字符串连接起来可以用号连接var name 小明;
var age 20;
var message 你好, name , 你今年 age 岁了!;
alert(message);
如果有很多变量需要连接用号就比较麻烦。ES6新增了一种模板字符串表示方法和上面的多行字符串一样但是它会自动替换字符串中的变量var name 小明;
var age 20;
var message 你好, ${name}, 你今年${age}岁了!;//主要这里的是在esc按键下面的那个按钮
alert(message);操作字符串字符串常见的操作如下var s Hello, world!;
s.length; // 13
要获取字符串某个指定位置的字符使用类似Array的下标操作索引号从0开始var s Hello, world!;s[0]; // H
s[6]; //
s[7]; // w
s[12]; // !
s[13]; // undefined 超出范围的索引不会报错但一律返回undefined
需要特别注意的是字符串是不可变的如果对字符串的某个索引赋值不会有任何错误但是也没有任何效果var s Test;
s[0] X;
alert(s); // s仍然为Test
JavaScript为字符串提供了一些常用方法注意调用这些方法本身不会改变原有字符串的内容而是返回一个新字符串toUpperCasetoUpperCase()把一个字符串全部变为大写var s Hello;
s.toUpperCase(); // 返回HELLO
toLowerCasetoLowerCase()把一个字符串全部变为小写var s Hello;
var lower s.toLowerCase(); // 返回hello并赋值给变量lower
lower; // hello
indexOfindexOf()会搜索指定字符串出现的位置var s hello, world;
s.indexOf(world); // 返回7
s.indexOf(World); // 没有找到指定的子串返回-1
substringsubstring()返回指定索引区间的子串var s hello, world
s.substring(0, 5); // 从索引0开始到5不包括5返回hello
s.substring(7); // 从索引7开始到结束返回world数组JavaScript的Array可以包含任意数据类型并通过索引来访问每个元素。要取得Array的长度直接访问length属性var arr [1, 2, 3.14, Hello, null, true];
arr.length; // 6
请注意直接给Array的length赋一个新的值会导致Array大小的变化var arr [1, 2, 3];
arr.length; // 3
arr.length 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length 2;
arr; // arr变为[1, 2]
Array可以通过索引把对应的元素修改为新的值因此对Array的索引进行赋值会直接修改这个Arrayvar arr [A, B, C];
arr[1] 99;
arr; // arr现在变为[A, 99, C]
请注意如果通过索引赋值时索引超过了范围同样会引起Array大小的变化var arr [1, 2, 3];
arr[5] x;
arr; // arr变为[1, 2, 3, undefined, undefined, x]
大多数其他编程语言不允许直接改变数组的大小越界访问索引会报错。然而JavaScript的Array却不会有任何错误。在编写代码时不建议直接修改Array的大小访问索引时要确保索引不会越界。indexOf与String类似Array也可以通过indexOf()来搜索一个指定的元素的位置var arr [10, 20, 30, xyz];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到返回-1
arr.indexOf(30); // 元素30的索引为2
注意了数字30和字符串30是不同的元素。sliceslice()就是对应String的substring()版本它截取Array的部分元素然后返回一个新的Arrayvar arr [A, B, C, D, E, F, G];
arr.slice(0, 3); // 从索引0开始到索引3结束但不包括索引3: [A, B, C]
arr.slice(3); // 从索引3开始到结束: [D, E, F, G]
注意到slice()的起止参数包括开始索引不包括结束索引。如果不给slice()传递任何参数它就会从头到尾截取所有元素。利用这一点我们可以很容易地复制一个Arrayvar arr [A, B, C, D, E, F, G];
var aCopy arr.slice();
aCopy; // [A, B, C, D, E, F, G]
aCopy arr; // false
push和pop就像堆栈一样push()向Array的末尾添加若干元素pop()则把Array的最后一个元素删除掉var arr [1, 2];
arr.push(A, B); // 返回Array新的长度: 4
arr; // [1, 2, A, B]
arr.pop(); // pop()返回B
arr; // [1, 2, A]
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错而是返回undefined
arr; // []unshift和shift
如果要往Array的头部添加若干元素使用unshift()方法shift()方法则把Array的第一个元素删掉
var arr [1, 2];
arr.unshift(A, B); // 返回Array新的长度: 4
arr; // [A, B, 1, 2]
arr.shift(); // A
arr; // [B, 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错而是返回undefined
arr; // []sort
sort()可以对当前Array进行排序它会直接修改当前Array的元素位置直接调用时按照默认顺序排序
var arr [B, C, A];
arr.sort();
arr; // [A, B, C]能否按照我们自己指定的顺序排序呢完全可以我们将在后面的函数中讲到。
reverse
reverse()把整个Array的元素给掉过来也就是反转
var arr [one, two, three];
arr.reverse();
arr; // [three, two, one]splice
splice()方法是修改Array的“万能方法”它可以从指定的索引开始删除若干元素然后再从该位置添加若干元素
var arr [Microsoft, Apple, Yahoo, AOL, Excite, Oracle];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, Google, Facebook); // 返回删除的元素 [Yahoo, AOL, Excite]
arr; // [Microsoft, Apple, Google, Facebook, Oracle]
// 只删除,不添加:
arr.splice(2, 2); // [Google, Facebook]
arr; // [Microsoft, Apple, Oracle]
// 只添加,不删除:
arr.splice(2, 0, Google, Facebook); // 返回[],因为没有删除任何元素
arr; // [Microsoft, Apple, Google, Facebook, Oracle]concat
concat()方法把当前的Array和另一个Array连接起来并返回一个新的Array
var arr [A, B, C];
var added arr.concat([1, 2, 3]);
added; // [A, B, C, 1, 2, 3]
arr; // [A, B, C]请注意concat()方法并没有修改当前Array而是返回了一个新的Array。
实际上concat()方法可以接收任意个元素和Array并且自动把Array拆开然后全部添加到新的Array里
var arr [A, B, C];
arr.concat(1, 2, [3, 4]); // [A, B, C, 1, 2, 3, 4]join
join()方法是一个非常实用的方法它把当前Array的每个元素都用指定的字符串连接起来然后返回连接后的字符串
var arr [A, B, C, 1, 2, 3];
arr.join(-); // A-B-C-1-2-3如果Array的元素不是字符串将自动转换为字符串后再连接。
多维数组
如果数组的某个元素又是一个Array则可以形成多维数组例如
var arr [[1, 2, 3], [400, 500, 600], -];上述Array包含3个元素其中头两个元素本身也是Array。对象JavaScript的对象是一种无序的集合数据类型它由若干键值对组成。JavaScript的对象用于描述现实世界中的某个对象。例如为了描述“小明”这个淘气的小朋友我们可以用若干键值对来描述他var xiaoming {name: 小明,birth: 1990,school: No.1 Middle School,height: 1.70,weight: 65,score: null
};
JavaScript用一个{...}表示一个对象键值对以xxx: xxx形式申明用,隔开。注意最后一个键值对不需要在末尾加,如果加了有的浏览器如低版本的IE将报错。上述对象申明了一个name属性值是小明birth属性值是1990以及其他一些属性。最后把这个对象赋值给变量xiaoming后就可以通过变量xiaoming来获取小明的属性了xiaoming.name; // 小明
xiaoming.birth; // 1990
访问属性是通过.操作符完成的但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符就必须用括起来var xiaohong {name: 小红,middle-school: No.1 Middle School
};xiaohong的属性名middle-school不是一个有效的变量就需要用括起来。访问这个属性也无法使用.操作符必须用[xxx]来访问
xiaohong[middle-school]; // No.1 Middle School
xiaohong[name]; // 小红
xiaohong.name; // 小红也可以用xiaohong[name]来访问xiaohong的name属性不过xiaohong.name的写法更简洁。我们在编写JavaScript代码的时候属性名尽量使用标准的变量名这样就可以直接通过object.prop的形式访问一个属性了。
实际上JavaScript对象的所有属性都是字符串不过属性对应的值可以是任意数据类型。
如果访问一个不存在的属性会返回什么呢JavaScript规定访问不存在的属性不报错而是返回undefined
use strict;var xiaoming {name: 小明
};Map
Map是一组键值对的结构具有极快的查找速度。
举个例子假设要根据同学的名字查找对应的成绩如果用Array实现需要两个Array
var names [Michael, Bob, Tracy];
var scores [95, 75, 85];给定一个名字要查找对应的成绩就先要在names中找到对应的位置再从scores取出对应的成绩Array越长耗时越长。
如果用Map实现只需要一个“名字”-“成绩”的对照表直接根据名字查找成绩无论这个表有多大查找速度都不会变慢。用JavaScript写一个Map如下
var m new Map([[Michael, 95], [Bob, 75], [Tracy, 85]]);
m.get(Michael); // 95初始化Map需要一个二维数组或者直接初始化一个空Map。Map具有以下方法
var m new Map(); // 空Map
m.set(Adam, 67); // 添加新的key-value
m.set(Bob, 59);
m.has(Adam); // 是否存在key Adam: true
m.get(Adam); // 67
m.delete(Adam); // 删除key Adam
m.get(Adam); // undefined由于一个key只能对应一个value所以多次对一个key放入value后面的值会把前面的值冲掉
var m new Map();
m.set(Adam, 67);
m.set(Adam, 88);
m.get(Adam); // 88Set
Set和Map类似也是一组key的集合但不存储value。由于key不能重复所以在Set中没有重复的key。
要创建一个Set需要提供一个Array作为输入或者直接创建一个空Set
var s1 new Set(); // 空Set
var s2 new Set([1, 2, 3]); // 含1, 2, 3重复元素在Set中自动被过滤
var s new Set([1, 2, 3, 3, 3]);
s; // Set {1, 2, 3, 3}注意数字3和字符串3是不同的元素。
通过add(key)方法可以添加元素到Set中可以重复添加但不会有效果
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}通过delete(key)方法可以删除元素
var s new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}iterable遍历Array可以采用下标循环遍历Map和Set就无法使用下标。为了统一集合类型ES6标准引入了新的iterable类型Array、Map和Set都属于iterable类型。具有iterable类型的集合可以通过新的for ... of循环来遍历。for ... of循环是ES6引入的新的语法请测试你的浏览器是否支持use strict;
var a [1, 2, 3];
for (var x of a) {
}
console.log(你的浏览器支持for ... of);
用for ... of循环遍历集合用法如下var a [A, B, C];
var s new Set([A, B, C]);
var m new Map([[1, x], [2, y], [3, z]]);
for (var x of a) { // 遍历Arrayconsole.log(x);
}
for (var x of s) { // 遍历Setconsole.log(x);
}
for (var x of m) { // 遍历Mapconsole.log(x[0] x[1]);
}
你可能会有疑问for ... of循环和for ... in循环有何区别for ... in循环由于历史遗留问题它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后for ... in循环将带来意想不到的意外效果var a [A, B, C];
a.name Hello;
for (var x in a) {console.log(x); // 0, 1, 2, name
}for ... in循环将把name包括在内但Array的length属性却不包括在内。
for ... of循环则完全修复了这些问题它只循环集合本身的元素
var a [A, B, C];
a.name Hello;
for (var x of a) {console.log(x); // A, B, C
}这就是为什么要引入新的for ... of循环。
然而更好的方式是直接使用iterable内置的forEach方法它接收一个函数每次迭代就自动回调该函数。以Array为例
use strict;
var a [A, B, C];
a.forEach(function (element, index, array) {// element: 指向当前元素的值// index: 指向当前索引// array: 指向Array对象本身console.log(element , index index);
});A, index 0B, index 1C, index 2注意forEach()方法是ES5.1标准引入的你需要测试浏览器是否支持。
Set与Array类似但Set没有索引因此回调函数的前两个参数都是元素本身
var s new Set([A, B, C]);
s.forEach(function (element, sameElement, set) {console.log(element);
});Map的回调函数参数依次为value、key和map本身
var m new Map([[1, x], [2, y], [3, z]]);
m.forEach(function (value, key, map) {console.log(value);
});如果对某些参数不感兴趣由于JavaScript的函数调用不要求参数必须一致因此可以忽略它们。例如只需要获得Array的element
var a [A, B, C];
a.forEach(function (element) {console.log(element);
});参考博文https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
