转: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都为hhh function 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) 转义字符串解码
原文:https://www.cnblogs.com/shmily2018/p/9222114.html