转：http://www.imdsx.cn/index.php/2017/07/27/html4/

 

HTML中的三把利器的JS 又称为JavaScript，看着好像和Java有点联系，实际上他和java半毛钱关系都没有，JavaScript和我们学习的Python、Go、Java、C++等，都是一种独立的语言，Python的解释器有Python2.7、Python3.x，浏览器具有解释JavaScript的功能，所以它才是HTML的三把利器之一。

在HTML中可以将JavaScript/JS的代码写在head中，被script标签所包裹，当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释。

引入JavaScript代码，类似于Python的import

<script src="public.js" type="text/javascript"></script>

head中引入JS与body中引入JS区别

html代码从上而下解析，如果在head中引入JS，影响页面打开的速度，存在风险，所以通常放在htmlbody的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。

注释

单行注释通过 //  多行通过 /* */

JS变量

 

name = 'dsx'; // 默认全局变量 function func() {    var name = 'niulaoshi'; // 局部变量 }

JS基本数据类型（JavaScript 声明数据类型通过new）

字符串

//定义字符串 var str = '你开心就好！'; var name = '大师兄'; // 字符串的拼接 var name_str = name+str;  //字符串操作 str = '大师兄' str.charAt(0) 根据角标获取字符串中的某一个字符  char字符 str.substring(1,3) 根据角标获取 字符串子序列 大于等于x  小于y str.length 获取字符串长度 str.concat('牛教授')  拼接字符串 str.indexOf('大师') 获取子序列的位置 str.slice(0,1)  切片 start end str.toLowerCase()  变更为小写 str.toUpperCase() 变更大写 str.split('师',1) 切片 返回数组 参数2 为取分割后数组的前x个元素 数字类型（JavaScript 只有一种数字类型。数字可以带小数点，也可以不带） var age = 18;var score = 89.22; number = '18'; // 字符串转var n = parseInt(number); // 转换成小数 f =parseFloat(number)布尔类型（true 或 false）var t = true; var f = false;

 

数组类型（就是Python的列表）

// 第一种创建方式 var list = new Array(); list[0] = '大师兄'; list[1] = '牛教授';  // 第二种创建方式 var list2 = new Array('大师兄','牛教授');  // 第三种创建方式 var list3 = ['大师兄','牛教授'];  数组操作 var list3 = ['大师兄','牛教授']; list3.length 数组的长度  list3.push('dsx') 尾部追啊参数  list3.shift() 头部获取一个元素 并删除该元素  list3.pop() 尾部获取一个元素 并删除该元素  list3.unshift('dsx') 头部插入一个数据  list3.splice(start, deleteCount, value) 插入、删除或替换数组的元素  list3.splice(n,0,val) 指定位置插入元素  list3.splice(n,1,val) 指定位置替换元素  list3.splice(n,1) 指定位置删除元素  list3.slice(1,2) 切片; list3.reverse() 反转  list3.join('-') 将数组根据分割符拼接成字符串  list3.concat(['abc']) 数组与数组拼接  list3.sort() 排序

对象类型（等同于Python的字典）

var dict = {name:'dsx',age:18,sex:'男' };var age = dict.age; var name = dict['name'];delete dict['name'] 删除delete dict.age 删除

定时器

setInterval(alert('大师兄'),5000); //参数1 为定时器执行的功能，第二个参数为定时器工作的间隔时间 毫秒为单位 function t1() {    console.log('我是大师兄')}setInterval('t1()', 5000);// 可以运行方法

JS条件判断语句

if (条件) {    执行代码块} else if (条件) {    执行代码块} else {    执行代码块}; if (1 == 1) {    console.log()} else if (1 != 1) {    console.log()} else if (1 === 1) {    console.log()} else if (1 !== 1) {    console.log()} else if (1 == 1 && 2 == 2) { //and    console.log()} else if (1 == 1 || 2 == 2) { //or    console.log()} switch (a) {    case 1:        console.log(111);        break;    case 2:        console.log(222);        break;    default:        console.log(333)}

JS循环语句

第一种循环循环的是角标tmp = ['宝马', '奔驰', '尼桑'];tmp = '宝马奔驰尼桑';tmp = {'宝马': 'BMW', '奔驰': 'BC'};for (var i in tmp) {    console.log(tmp[i])}第二种循环不支持字典的循环for (var i = 0; i < 10; i++) {    console.log(tmp[i])}第三种循环while (1 == 1) {    console.log(111)}

函数定义

1、普通函数function 函数名(形参, 形参, 形参) {    执行代码块}函数名(形参, 形参, 形参); 2、匿名函数 匿名函数没有名字，无法调用时找到，将整个函数当做一个参数传递setInterval(function () {    console.log(11)}, 5000);3、自执行函数创建函数并且自动执行当引入多个js文件时，函数名可能会出现重复，这时通过自执行函数，保证每一个js文件都会被解析，从而生成独立的容器，防止调用冲突(function (name) {    console.log(name)})('dsx'); 作用域Python的作用域是以函数作为作用域的，其他语言以代码块（{}）作为作用域的。JavaScript是以函数作为作用域function tmp() {    var name = 'dsx';    console.log(name)}tmp();console.log(name);2、函数作用域在函数未被调用之前，已经创建var name = 'nhy';function a() {    var name='dsx';    function b() {        console.log(name);    }    return b} var c = a();c();3、函数的作用域存在作用域链（代码不执行时，先生成作用域链）当函数嵌套函数时，每一个函数为一个作用域，多层就叫做作用域链，查找遵循作用域链规则function outer() {    name = 'nn';    function inner() {        var name = 'ii'        console.log('in', name)    }     console.log('out', name);    inner()}outer();函数不调用时，只生成作用域，当调用时遵循作用域链执行，name都为hhhfunction outer() {    var name = 'nn';    function inner() {        console.log('in', name)    }     var name = 'hhh';    console.log('out', name);    inner()}outer();4、函数内,局部变量提前声明 JavaScript的函数在运行前会找到函数内的所有局部变量执行var xxx;function func() {    console.log(name);    var name = 'dsx';}func();

面向对象

 

// 在JavaScript中，方法和类写法类似，区别方式为是否有this，如果有就可以当做是类来用 // JavaScript的类默认就拥有了Python的构造函数__init__function Foo(name) {    this.name = name;}// 创建对象时JavaScript需要用到new关键字来创建对象 var obj = new Foo('dsx');console.log(obj.name); // 类中定义方法，虽然可以用，但是在多个实例时存在重复实例方法，浪费资源// 创建对象时，say每次创建对象，都会创意一个say的方法。 function Foo1(name) {    this.name = name;    this.say = function () {        console.log(this.name)    }}var obj1 = new Foo1('dsx_obj1');obj1.say();// 完善类的定义 function Foo2(name) {    this.name = name}// 类的原型,将共用的的方法抽出来，当在实例化后，只创建了一个叫做Foo2的对象，对象内只有name，在调用方法时去现在Foo中找，没有找到，会在去原型中找是否有该方法。有执行，没有就报错 Foo2.prototype = {    say: function () {        console.log(this.name)    }};var obj2 = new Foo2('dsx_obj2');obj2.say();

序列化

JSON.stringify(obj) 序列化 JSON.parse(str) 反序列化

转义

转义中文或特殊字符

1、在标准的url的规范中是不允许出现中文字符或某些特殊字符的，所以要进行转义2、& 代表参数的链接，如果就是想传& 给后端那么必须转义 decodeURI(url) URl中未转义的字符decodeURIComponent(url) URI组件中的未转义字符 encodeURI(url) URI中的转义字符encodeURIComponent(url) 转义URI组件中的字符 字符串转义var name='大师兄' escape(name) 对字符串转义 unescape(name) 转义字符串解码