JavaScript基础
-
JavaScript： 基于对象和事件驱动，运行在浏览器客户端的脚本语言。
js的运行环境： 运行在浏览器端的一种语言 最后将所有的js代码都要以对象的形式去执行，都要通过事件的方式去触发执行【DOM】 -
JavaScript组成：
☞ ECMASCRIPT 定义了javascript的语法规范,描述了语言的基本语法和数据类型 ☞ BOM （Browser Object Model） 即浏览器对象模型。 浏览器对象模型,一套操作浏览器功能的API,通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等 ☞ DOM (Document Object Model) 文档对象模型,一套操作页面元素的API,DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作 -
JavaScript书写位置
▶内嵌式写法☞ 在html页面内部设置 <script type="text/javascript"> js </script> 注意： 该标签可以放到head标签中或者body标签中▶
外联式写法1. 新建js文件 2. 通过script标签引用到当前页面中 <script type="text/javascript" src="test.js"></script> 注意： 1. 不能将代码写到外联式标签中。 2. 一个网页中可以同时调用多个外部js文件 <script type="text/javascript" src="test.js"></script> <script type="text/javascript" src="test.js"></script> <script type="text/javascript" src="test.js"></script> <script type="text/javascript" src="test.js"></script>▶
行内式写法☞ 将js代码写到标签内部 <div onclick="js代码"></div> 注意： onclick 是一个点击事件： 当点击div的时候，会触发该事件，执行该事件中的代码 -
JavaScript中输入消息方式
alert(); document.write('<h1>我是一段文字</h1>'); 在网页中输出信息 prompt("请输入姓名","测试"); //接收用户输入的 confirm("确定么"); console.log("abcd"); //在控制台中输出消息 总结： 1. 在js中如果希望输出一个具体的文本信息，必须带引号 2. 在使用document.write();的时候，可以在方法内输出html标签，加引号。 -
变量
▶概念☞ 变量： 变量指的是在程序中保存数据的一个容器▶
定义变量及赋值☞ 定义变量 var 变量名； ☞ 赋值 变量名 = 值; ☞ 总结： 1. 一个变量一次只能保存一个值 2. 最后一次的赋值结果 3. 变量是区分大小写（js区分大小写）▶
变量命名规范☞ 规则 必须遵守的，不遵守的话 JS引擎 发现并报错 1. 由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：var usrAge,num01, _name 2. 区分大小写 强调：JS 严格区分大小写 ，var app; 和 var App; 是两个变量 3. 不能 以数字开头，或者汉字定义变量名 4. 不能 是关键字、保留字 和 代码符号，例如：var、for、while、&, class 5. 不能出现空格 ☞ 规范 建议遵守的，不遵守的话 JS引擎 也不会报错 1. 变量名必须有意义 2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 -
数据类型
☞ 数据类型：数据类型指的是变量的数据类型①简单的数据类型
▶数值类型（number）☞ 凡是数字都属于该类型【整数，小数，负数】 ☞ 只要变量的值是一个具体的数字，那么当前变量的数据类型就是数值类型 ☞ number类型表示的数字大小： 最大值是±1.7976931348623157乘以10的308次方 Number.MAX_VALUE 最小值是±5 乘以10的-324次方 Number.MIN_VALUE ☞ 数值类型表示方式： ✔ 十进制表示 var n1=10,n2=9, n3=100; ✔ 十六进制表示 以 0x开头 0到9之间的数字，a(A)-f(F)之间字母构成。 a-f对应的数字是10-15 var num = 0xA; ✔ 八进制表示 八进制直接以数字0开始，有0-7之间的数字组成。 var num1 = 07; var num2 = 06; var num3 = 05; ☞ 备注： 进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。▶
字符串类型(string)☞ 字符串可以是引号中的任意文本。可以使用单引号或双引号 ☞ 在js中一般写字符串类型的变量时候，推荐使用单引号。 ☞ 注意： 1. 单引号和双引号之间的嵌套 例如： 输出 我是"高帅富"程序猿; 2. 转义字符 \n 换行 \\ 斜杠 \' 单引号 \" 双引号 \r 回车符▶字符串特性及方法
◆字符串特性：不可变性。 注意: 尽量不要大量的拼接字符串 ◆字符方法 1. charAt(index) //获取指定位置处的字符 2. str[index] //获取指定位置的字符 （H5中的方法） ☞ 字符串方法 1. concat() //拼接字符串 等效于 + 2. slice(strat,end) //从指定位置开始，截取字符串到结束位置，end值取不到 3. substring(start,end) //从指定位置开始，截取字符串到结束位置， end值取不到 4. substr(start,length) //从指定位置开始，截取length长度个字符 ☞ 位置方法 1. indexOf(字符) //返回字符在字符串中的位置 2. lastIndexOf(字符) //从后往前找，只找第一个匹配的字符 ☞ 去除空白 trim() //只能去除字符串前后空白 ☞ 大小写转换法 toLocaleUpperCase() //转化为大写 toLocaleLowerCase() //转化为小写 ☞其他 replace(a,b) // 用b替换a split() // 以一个分割符,将一个字符串串分割成一个数组▶
布尔类型(boolean)true 和 false▶
undefined类型//如果一个变量没有赋值，该变量的默认是undefined var n1; //如果一个变量的值是undefined，那么该变量的数据类型就是undefined类型▶
null 空对象类型◆ null类型被看做空对象指针只有一个值，即 null 值 ◆ null 空比如一个变量原先有值 可以将变量的值设置为null 代表清空变量容器中的数据 ◆ 作用为了清空对象。②复杂数据类型
▶object类型js中对象是一组属性与方法的集合。这里就要说到引用类型了，引用类型是一种数据结构，用于将数据和功能组织在一起。引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法。
Object类型 我们看到的大多数类型值都是Object类型的实例，创建Object实例的方式有两种。 ☞第一种是使用new操作符后跟Object构造函数，如下所示 var person = new Object(); person.name = "Xiaoming"; person.age = 24; ☞第二种方式是使用对象字面量表示法，如下所示 var person = {name : "Xiaoming",age : 24 };③数据类型判断
☞ 使用 typeof 变量 可以得到对应变量的数据类型 ☞ 例如： var n1 = 123; //获取n1的数据类型 console.log(typeof n1); var n2 = '123'; console.log(typeof n2); var n3 = true; console.log(typeof n3);④判断一个变量是不是数字
isNaN(x) 方法 例如： var usrAge = 21; var isOk = isNaN(usrAge); console.log(isNum); // false ，21 不是一个 非数值 var usrName = "James"; console.log(isNaN(usrName));//true ，"James"是一个 非数值⑤数据类型转换
▶转数值类型☞ Number(变量)： 总结： 1. 可以通过该方法将数据类型转换为数值类型 var n1 = '123'; console.log(typeof n1); //方法一：通过Number() n1 = Number(n1); console.log(typeof n1); 2. 在转换的过程中可以将原来的值保留，遇到小数直接保留下来，不会舍去 3. 如果变量无法转换为数值类型，那么返回的结果是NaN； 对应的数据类型依然是数值类 4. 如果将布尔类型转换为数值类型，true 转化后的结果是 1 false 转化后的结果是0 ☞ parseInt(变量) var num1 = parseInt("12.3abc"); // 返回12，如果第一个字符是数字会解析知道遇到非数字结束 var num2 = parseInt("abc123"); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN 备注： 1 只会保留整数部分，通过该方式进行数据类型转换后得到就是一个整数 2. 如果一个变量中的值无法转换为具体数字，那么返回的结果是一个 NaN 的值 3. NaN (not a number) ----NaN对应的数据类型是数值类型 4. 通过该方法可以将其他数据类型转为数值类型 ☞ parseFloat(变量) 总结： 1. 通过该方法可以将其他数据类型转换为数值类型 2. 在转换过程中，如果遇到小数，那么会直接将小数部分保留 3. 如果转化不成功过，返回的结果NaN parseFloat()把字符串转换成浮点数▶
转字符串类型☞ 变量.toString() var num = 5; console.log(num.toString()); ☞ String(变量) 备注： String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null▶
转布尔类型☞ Boolean() 备注： 0 |''(空字符串) | null | undefined | NaN 会转换成false 其它都会转换成 true -
循环
①语法☞如果能明确循环次数，推荐使用for循环,如果循环次数不确定,可以使用while获取do while循环 for (变量初始化; 条件表达式 ; 变量自增（变量自减）) { 循环体代码 }②执行过程
1. 先执行变量初始化 2. 条件判断，结构是否为true 3. 如果条件为true，进入循环体中执行代码 【如果条件为false，循环立即结束】 4. 变量自增或自减 -- 条件判断 -- true --- 执行代码③案例（冒泡循环）
// 冒泡排序 var arr = [5,6,8,4,1,2,3]; function paixu(arr){ // 循环趟数 for(var i=0;i<arr.length-1;i++){ // 比较次数 for(var j=0; j<arr.length-1-i;j++){ // 比较交换次数 if(arr[j]>arr[j+1]){ var a=arr[j]; arr[j]=arr[j+1]; arr[j+1] = a; } } } } paixu(arr) console.log(arr)//1,2,3,4,5,6,8④continue语句
当程序遇到continue的时候，会结束本次循环，后面的代码也不会执行。进入到下一次循环中。
⑤break语句
当程序遇到break语句的时候，程序会立即终止，后面的代码不执行
-
数组
数组： 可以一次保存多条数据， 数组也是一个用来保存数据的容器。
①创建数组构造函数创建数组 : var 自定义数组名称 = new Array(); 字面量创建数组 : var 自定义数组名称 = [] ;②数组赋值
☞构造函数方式 var ary = new Array (1,2,3,5,6); ☞字面量方式赋值 var ary = [1,2,3,4,6]; ☞通过索引方式赋值 var ary = []; ary[0]=1; ary[1]=2; ★总结： 1. 数组中索引值是从 0 开始的 2. 通过索引的方式给数组赋值，要按照顺序个数设置 3. 通过 数组名.length 可以获取到当前数组的长度③数组属性方法
☞ 数组中的属性 length ☞ 判断变量是不是数组 数组变量名 instanseOf Array ☞ 判断变量是不是一个数组 Array.isArray(ary) //存在浏览器兼容 （H5）中的新方法 ☞ toString() // 把数组转换为字符串，使用逗号分隔 ☞ valueOf() // 返回数组对象本身 ☞ 栈方法(先进后出) ary.push() // 该方法有一个返回值，表示数组最新的长度，该方法中可以设置多个参数 ary.pop() //返回数组中最后一个字，且会修改数组的长度 ☞ 队列方法(先进先出) ary.shift() //取出数组中的第一个元素，修改数组的长度 ary.unshift(number) //在数组中最开始位置添加一个值 ☞ 排序方法 ary.reverse() // 翻转数组 ary.sort() //数组排序 默认是从字符编码排序的 ☞ 其他方法汇总 ◆ concat() //把两个数组拼接到一块,返回一个新数组 ◆ slice(startindex, endindex) //从当前数组中截取一个新的数组 ✔ 第一个参数表示开始索引位置,第二个参数代表结束索引位置 ◆ splice(startindex, deletCont, options) //删除或者替换数组中的某些值 ✔ 第一个参数代表从哪开始删除 ✔ 第二个参数代表一共删除几个 ✔ 第三个参数代表要替换的值 ◆ indexOf(content[,index])，lastIndexof() //没找到返回-1 ✔ 找数组中的某个值,如果找到返回索引位置,如果没有找到返回-1 ✔ lastIndexof() 从数组的末尾开始找,如果找到,返回索引位置,如果没有找到返回-1 ◆ Join() //将数组中的每一个元素通过一个字符链接到一块 ◆ 数组遍历 filter(function(item,index, ary) {}) //返回一个新数组,可以获取赛选结果 map(function(item,index,ary) {}) //遍历数组,返回一个新数组 forEach(function(item,index, ary) {}) //遍历数组,没有返回值 -
函数
可以封装一段特定功能代码，然后通过函数名调用，实现对该段代码重复使用
①函数的作用实现代码的重复使用。 ✔ 对分散代码整合（封装） ✔ 重复使用②创建函数
方式一： 函数声明及执行方式 ☞ 函数的声明： function 自定义函数名() { 具体的功能代码 } 注意： 1. 由于函数是用来实现某种特定功能代码，所以一般我们设置函数名的时候，以动词开始。 2. 函数不能自己执行代码，需要通过函数名调用实现代码的执行 ☞ 调用函数（执行函数） 函数名(); //函数的调用 方式二：函数表达式（字面量）及执行方式 var fn = function () { } fn(); -
函数其他
①arguments☞ arguments 对象，里面保存了所有参数信息 ☞ 注意使用： ✔ 如果一个函数的参数列表个数不确定（形参不确定），可以通过arguments获取 ✔ 如果一个函数能够确定参列表，还是推荐使用固定的参数列表arguments小案例// 求任意个数中的最大值 function get_max () { //假设最大值为max var max = arguments[0]; //arguments里面放的是函数的参数个数 for (var i = 1; i < arguments.length; i++) { if (max < arguments[i]) { max = arguments[i]; } } return max; } console.log(get_max(8,6,2,3));②作用域
概念： 变量或者函数可以起作用的区域 //简单理解（1.全局作用域）（2.局部作用域）（3.作用域链） 1.函数外部的区域就是全局作用域 2.函数内部就是一个局部作用域 3.当访问一个变量时，会先从本作用域中去找这个变量，若找不到则向上一级作用域中去找，依次类推，就形成了一个作用域链。//作用域链案例 //☞ 分析代码执行结果 var a = 1; function fn1(){ var a = 2; function fn2(){ console.log(a); //a的值 2 } fn2() } f1(); //☞ 分析代码执行结果 function f1 () { var num = 123; function f2 () { console.log( num );//123 } f2 (); } var num = 456; f1();③预解析
☞ 代码在执行前会进行预解析。 1. 变量声明提升，把变量提升到当前作用域的最上面，不包括赋值 2. 函数声明提升，把函数提升到当前作用域的最上名，不包括函数的调用//① var a = 25; function abc () { alert(a);//undefined var a = 10; } abc(); //② var num= 10; fun (); function fun () { console.log( num );//undefined var num = 20; } //③ f1(); console.log(c);//9 console.log(b);//9 console.log(a);//9 function f1 () { var a = b = c = 9; console.log(a);//报错‘var a 在函数中声明属于局部作用域 ，b 和 c 没有var 属于全局’ console.log(b);//9 console.log(c);//9 } -
对象
☞ 现实世界： 万事万物皆对象。 ✔ 对象：必须是一个具体的事物。 （手机，汽车不是对象，属于一类对象） ◆ 对象是由 特征（名词）【属性】 和 行为（动词）【方法】 ☞ 程序中的对象： 对现实对象的抽象 ☞ 总结： 1. 程序中的对象： ✔ 对象必须有对应的属性【描述对象的特点，在程序中一般使用名词描述】 ✔ 对象必须有行为动作方法 【方法用来描述具体对象的行为动作，一般方法使用动词】①创建对象
创建对象方式： ✔ 字面量方式 var obj = { key ： 值, key ： function () { } } ✔ 通过构造函数, var obj = new Object(); obj.自定义属性名 = 值; obj.自定义方法名 = function () { } ✔ 工厂模式创建对象（本质就是对第二种方式的封装，创建多个对象） function people (name) { var obj = new Object(); obj.自定义属性名 = name; return obj } var dzx= people('dzx'); ✔ 自定义构造函数创建对象（确定对象的类型） function People (name) { this.自定义属性名 = name; } var dzx= new People('dzx'); ☞ 对象的基本操作 ✔ 获取对象的属性或方法 1. 对象.自定义属性名 || 对象['属性名'] 2. 对象.自定义方法名() ☞ 判断对象的具体类型 对象名称 instanceOf 构造函数②new关键字执行过程
1. 在内存中创建一个空对象 2. this指向创建的对象 3. 执行函数 4. 返回当前对象 注意： 在构造函数中，默认的返回值就是当前创建的对象③this关键字
1. 函数中的this 指向Window 2. 在方法中的this 指向当前方法所属的对象 3. 在构造函数的this 指向创建的对象 总结： 谁调用函数，this就指向谁 -
内置对象
①Math对象☞ 提供了一系列与数学相关的方法或属性 ( 静态 | 实例) ☞ Math.PI 获取圆周率【属性】 ☞ Math.random() 返回大于等于0小于1之间的随机数 ☞ Math.floor() 向下取整，返回一个小于当前数字的整数 ☞ Math.ceil() 向上取整，返回一个大于当前数字的整数 ☞ Math.round() 四舍五入（小数如果小于0.5,返回小于当前数字的整数，如果小数部分大于0.5返回大于当前数字的一个整数） ☞ Math.abs() 取绝对值（返回当前数字的绝对值，正整数） ☞ Math.max() 返回一组数中的最大值 （可以设置多个参数，返回其中最大值，参数不可以是数组） ☞ Math.min() 返回一组数中的最小值 （可以同时设置多个参数，与最大值效果一样） ☞ Math.sin(x) 返回一个正弦的三角函数 ( 注意： x 是一个以弧度为单位的角度) ☞ Math.cos(x) 返回一个余弦的三角函数 （注意： x 参数是一个以弧度为单位的角度） ☞ Math.pow(x,y) 返回x的y次幂②Date对象
☞ Date是一个构造函数，必须通过 new Date() 创建一个实例成员才能使用 ☞ 用法一：空构造函数 var d = new Date(); ☞ GMT 格林威治时间（0时区） ☞ 用法二：在构造函数中传入毫秒值 var d = new Date(d.valueOf()); ☞ 用法三： 传入日期格式的字符串 var d = new Date("1988-8-8") ☞ 用法四： 传入数字 var d = new Date(year, month[,day,time,second]); //必须设置年和月 备注： 月份从0 开始， 0 代表1月 ☞ 获取当前时间的毫秒值： d.valueOf() d.getTime() // 推荐使用 Date.now() //H5 新方法 有兼容信息③Date中的方法
☞ 日期格式化方法 var d = new Date(); d.toString(); //转化成字符串 d.toDateString(); //转换成日期字符串 d.toTimeString(); //转换成时间字符串 d.toLocaleDateString(); //返回本地的日期格式 （不同浏览器不同效果） d.toLocaleTimeString(); //返回本地的时间格式 （不同浏览器不同效果） ☞ 获取日期其他部分 d.getSeconds() //获取秒 d.getMinutes() //获取分钟 d.getHours() //获取小时 d.getDay() //返回周几 （0表示周日） d.getDate() //返回当前月的第几天 d.getMonth() //返回月份 （从0开始） d.getFullYear() //返回年份
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
