一. JavaScript 的学习
1.js的认识#脚本是逐条执行1. 使用dom获取id为first的div(var 变量名 = document.getElementById(‘id名’); )2. 函数:更改背景颜色function 连接 ( ) { 变量名.style.backgroundColor = "red”; }3. 常规的输出函数的交互alert("hello world”);4. 使用js添加页面元素document.write("
”);5. 使用外部js文件 便于维护和可以缓存6. 浏览器不支持JavaScript,或脚本被禁用了。
2.基本概念1. 语法跟c和类c语言(java)很相似CMAScript中的一切区分大小写,比如变量名称、函数的名称、函数的参数的名称等2. 标识符就是指变量、函数名、属性的名称、或者函数的参数等 3. 标识符定义的规则:1.以字母、下划线、$开头。2. 其他后面的字符可以使用字母、数字、下划线、其他字符(不要使用汉字),推荐使用驼峰命名法:第一个单词首字母小写,之后每个单词首字母大写 parentChild(标识符要见其词,识其意4. 语句,以;结尾1. 使开发人员,放心的使用一些压缩工具,压缩代码(把多余的空格、换行删掉) 2. 增强代码的性能,减小解析器的负担5. 语句块{ var b = 2;var c = 3;var d = b + c; }6. 变量的声明var f = 5, g = 6;
基本数据类型#1. undefined(只声明变量,没有赋值) 2.null,空对象 3. number 4. Boolean(true/false) 5. string 6. 类型转换 ( 1. other -> Boolean 2. string -> number 3. parseInt(string, radix) )引用类型:object
运算符1.算术运算符+ - * / % ++ --++/--在前,先运算,再取值,++/--在后,先取值,再运算2. 赋值运算符= 、+= 、-=、*=、/=、%=c+=d c = c + d;3、关系运算符>、<、>=、<=、!=、==、===、!====指得是需要对比的变量转换之后是否相同 ===指,类型和值都相同(恒等)4、逻辑运算符&&、||、! !aa为false的时候,结果为true5. 三元运算符判断条件?条件成立的取值:条件不成立的取值
加法计算器#1.取出第一个输入框的值var firstValue = parseInt(document.getElementById('first').value);2. 获取result输入框var resultInput = document.getElementById('result');
if 语句1.if语句,就是根据对应的条件,选择执行的相应逻辑(相应的代码块),在语句流中会跳跃的执行 2. if (判断条件) { 条件成立需要执行的逻辑 } else { 条件成立需要执行的逻辑 }
例子 : bmi ,计算器
二. 循环语句
switch语句#流控制语句1、switch语句中的对比是=== 2、小心穿透,合理的利用break,不加break默认是穿透 3、注意default,每个switch在最后都有一个default,默认情况下执行default 4.在大多数语言中switch语句只能使用数值,但是在js中可以使用任何数据类型(字符串,对象),每一个case中值不一定是常量,也可能是变量,或者是表达式
for 语句1. for循环,用来处理固定次数的循环 for循环三要素:起始条件,终止条件,变化条件 变化条件可以是多样化的,如i+=5;2. for循环三要素是可选的,省略其中的条件,会创建一个无限循环 3. break 和 continue continue;跳出当前这次循环 4. for-in语句,是一种精确的迭代语句for (var propertyName in window) {console.log(propertyName);}
while语句while(表达式(终止条件)){处理的逻辑}while (num < 0 || num > 100) {num = prompt("请输入你的成绩”);}
例子 : 猴子摘桃 , 抓花生
三.
string字符串#1. js中常用的转义字符\n,\\,\',\”\表示需要对之后的字符进行转义,如果后面的字符有转义的话,显示对应的效果,如果没有,不影响后面的字符的正常输出。1.获取字符串的长度str.length2.字符的大小写转化toLowerCase()/toUpperCase() 3、检索 stringObj.indexOf(searchString: string, position?: int)返回值如果是小于0,代表没有找到相应的子字符串peopleId.lastIndexOf("55", 13)4、截取字符串peopleId.substring(6, 14)substr(start,length)length:要截取的字符串的长度peopleId.substr(6,8)5,遍历for (var a = 0 in peopleId) {console.log(peopleId.substr(a,1));}
array数组#1. 数组是一组有序的集合,可以存放多种类型。取值,需要通过下标来获取array[index] 2.定义一个空数组var array2 = [ ];3.获取数组中的长度console.log(array1.length);4.遍历数组for (var a in array1) {console.log('第' + a + '个是' + array1[a]);}5.检索数组中是否包含某个内容console.log(array1.indexOf("abc",5))6.往数组中追加内容group[0] = "高雅兰”; group.push(["赵宁","魏坤鹏","魏清阳"]); group.pop( );7.shift,取出数组中第一个成员,并把他从数组中删除group.shift();unshift从数组的头部添加成员,并且返回新数组的长度group.unshift("李璐欣","彭付龙","刘哲”)8.concat,往数组中添加新成员,并且返回一个添加后的新数组array3.concat("闫麒麟","范晓东","郭彦松",["陈运发","陈坤","马恒飞"]);9.join,把数组中的每个成员用特殊字符连接成一个新的字符串array4.join("~”);var str1 = "闫媛媛-王俊亚-李明扬-武国庆”; str1.split("-");10.替换数组中的成员 11.splice(start: int, deleteCount: int, items...: any) start:开始索引,(内容插入的位置)deleteCount:删除的个数 items:要插入的新成员 12.排序var array6 = ["ab","hj","ba","gd","bcd","Ab”]; array6.sort(); 13.反向 array6.reverse();
例子 :校验身份证号,注册register
四.
多维数组数组的嵌套,用来解释实际生活中的问题
object对象#1. 对象是一种无序的数据集合,由若干个键值对,大括号就是定义一个对像,如果内容包含多个属性,需要用逗号隔开。定义对象的属性名称的时候需要按照之前定义操作符的规则(驼峰命名法)2. 对象引用如果不同的变量指向同一对象(指向这个对象的内存地址),那么他们都是这个对象的引用,他们指向了同一块内存修改其中一个,另外一个也被修改 取消一个变量对对象的引用,不影响其他的变量 对原始类型的数据的引用,都是值拷贝3. 添加属性obj3.age = 18;删除属性delete obj3["sex”];判断某个属性是否属于对象console.log('sex' in obj3);遍历对象中的属性for (var property in student) {console.log(property);}对象嵌套 动态属性bite:function () {alert(“汪汪汪“);}
date1.获取当前的时间var date = new Date();获取年date.getFullYear()获取月(0-11)date.getMonth()获取日date.getDate()获取星期date.getDay()时间戳(1970-now)(毫秒级)date.getTime()获取时分秒和毫秒date.getHours() date.getMinutes() date.getSeconds() date.getMilliseconds()2.设置datedate.setFullYear(2018);3.对比时间var interval = date2 - date;4.时间相加(转化成毫秒,然后相加) 5.获取本地时间字符串console.log(date4.toLocaleDateString());6.获取标准时区date4.toUTCString()7.把星期转化成汉字var weekDay = ["星期日","星期一","星期2","星期3","星期4","星期5","星期6”]; console.log(weekDay[date4.getDay()]);
计时器#1. setInterval(func,delay);每隔delay(毫秒)触发func2. setTimeout(func,delay)延迟delay(毫秒),触发fund
snakes 贪吃蛇#
五.函数
函数1.文档解析过程是从上到下,依次执行函数对于任何一种编程语言都是核心的内容,特别是对于js,js是面向函数式编程 2. 函数: 1.可以封装任意多条语句, 2. 可以在任何地方,任何时候调用 基本语法:function functionName(arg0,arg1,...argn){逻辑语句}3. 函数的调用functionName(arg0,arg1,....argn);
4. 函数都有返回值,return语句表示当前函数需要返回的内容,函数中遇到return,表示函数结束一个函数中 的返回值,有可能是多条 返回值没有任何内容,这种情况下,函数执行后不需要有任何返回值,这种做法,想要提前停止函数而又不需要有返回值5. 由上面的知识点,我们可以得出,函数有四种"类型”的函数1、无参数无返回值,2、无参数有返回值,3、有参数无返回值,4、有参数有返回值
参数ECMAScript中的函数的参数与其他语言中的参数有所不同1. 不介意传递的参数的个数 2. 不在乎你传递参数的类型 即便函数不需要参数,在调用的时候,你也可以传递参数, 3. 在函数中有arguments对象,传递的参数都存放在arguments,并且是有序的console.log('hello ' + arguments[0] + ',' +arguments[1]);4.在js中没有函数签名(函数签名就是由函数名称、参数的个数、参数的类型以及返回值)由于js中没有函数签名,就没有函数重载,后写的doAdd1会把前面的doAdd1覆盖 传递参数过多,多余部分参数忽略虽然js中函数没有重载,但是我们弥补这一遗憾(用 if else )注意:arguments不是数组,但是可以像数组那样取值 5. arguments和形参可以一起使用console.log(arguments[0] + num2);6. arguments中的值和对应的形参的中一致,注意不要在函数内部更改argments中的值arguments[1] = 10;
变量1.变量其实是存放数据的容器,js中的变量是弱类型以字母,下划线,$开头,后面可以跟字母,下划线,$开头,数字,其他字符,但是不能跟关键字重名(if break)2.js中的变量类型分类: 基本类型:Undefined,null,Number,Boolean,String引用类型:object3.动态属性(仅限于引用类型)基本类型变量不能添加属性4.变量的复制引用类型复制的时候,是复制的对对象的引用5.把变量当成实参传入函数js中所有的函数的参数都是按照值传递的 变量如果是基本类型,那么把值传递到函数中 如果变量是引用类型,把对当前对象的引用传递到函数中
变量作用域1. 全局变量在脚本中任何位置都可以被使用,局部变量,只能在他所在的局部环境中使用。 2. 在js中没有块级作用域if (true) {var a1 = 'hello world’;}相当于全局变量3. 如果在局部环境中,不使用var关键字,来声明变量,那么这个变量就会自动地被添加到全局环 4. 利用查询标识符(变量的名称) 寻找变量,沿着变量的作用域链往上去找,如果找到,那么使用这个变量,如果没有找到,is not defined 5. 变量的声明会上浮,上浮到当前变量所在的环境的上方 函数的声明也会上浮
函数表达式1. 每个函数都是function类型的实例,与其他的引用类型一样,函数的名称就是对函数对象的引用 2. 函数表达式跟上面函数的声明基本上一样,但是,注意在表达式最后,需要加分号var sum2 = function (num1,num2) {return num1 + num2;};3. 函数的名称和函数表达式的区别浏览器中的解析器在解析的过程中,先读取函数的声明,为了让函数在执行之前都可用。 函数表达式,解析的时候,会先解析变量的声明,然后执行到赋值语句的时候,才对变量进行赋值,之后才可以使用函数表达式声明的函数
函数的嵌套#1.函数作为参数 2.函数作为返回值
六. 函数
函数的属性#1.函数参数的默认值(1. 利用if语句设置num2的默认值 if (!num2) {num2 = 10;} 2. 利用三元运算符设置num2的默认值 num2 = !num2 ? 10 : num2; 3. return num1 + (num2 || 10);)2. 在函数内部有两个比较特殊的对象,arguments和this1.arguments对象作用是存储函数调用的时候传递的实参,arguments对象有一个属性为callee,callee属性其实就是一个指针,指向arguments对象的函数 2. 在全局执行环境中this指的是window对象,全局执行环境中的变量是window的属性,全局函数是window对象的方法 函数中的this对象就是指调用函数的执行环境对象(当网页的全局作用域中调用函数,函数中的this值的是window)3. caller保存着调用当前函数的函数的引用,如果说在全局环境中调用函数,caller的值为null 4. length:当前函数的时候传递的形参的个数
函数的方法#1. apply(),有两个参数,第一个参数的是当前的函数的调用者(间接决定了函数的作用域)apply()方法的第二个参数是传递进去的实参,可以是数组,也可以是arguments2. call()方法,也有两个参数第一个参数跟apply() 的第一个参数一样,就是函数的调用者,第二个参数有点区别,是把实参一个一个的传递进去3.总结:apply()和call()重点不在于参数的传递,重点在于第一个参数,第一个参数可以更改函数运行的作用域
立即执行函数#
闭包#1. 在某个函数调用的时候,会创建一个执行环境以及它对应的作用域,然后使用arguments和自己定义的其他的命名参数(形参等)的值来初始化函数的活动对象。 2. 作用域链:当前执行的函数的活动对象--这个函数的外部函数的活动对象--外部函数的外部函数的活动对象--...--全局的执行环境的变量对象3. 当全局环境中的函数执行完毕之后,该函数执行环境和他的活动对象会销毁。对于闭包有所不同。 4. 函数执行完毕之后,它所对应的执行环境被销毁,但是它的活动对象没有被销毁,直到其闭包函数执行完毕的时候,才会销毁闭包函数的执行环境和它对应的作用域链。
闭包和变量 , 闭包练习 , 数组中map的使用#
七. 创建对象
reduce#reduce():数组中的所有成员从左到右依次减少到单一值,使用一个累加器,应用到提供方法
filter#filter():过滤数组中的成员
对象#1. 字面量定义对象 2. 访问对象属性,第一种方式 . 第二种方式 [ ]; 3.对象1.对象是对单个具体实物的抽象 2.对象是一个容器,容器内部封装了属性(对象的状态:姓名,身高,体重...)和方法(对象的行为:吃,喝,玩...) 3.对象是一个无序的数据集合(属性:属性名称)
工厂模式创建对象#对象中this是对象本身 工厂模式的弊端,不能清楚地知道对象的具体类型
构造函数#构造函数是一种专门用来创建对象的函数 1.构造函数首字母大写,2.使用的时候,必须使用关键字new,new代表使用构造函数创建新实例,3.返回值是对象 系统原生的构造函数var student = new Object();自定义构造函数function Student1 () {
原型#1.我们创建的每个函数都有一个prototype属性,prototype就是指向当前函数的原型对象,原型对象的作用:存储所有这个函数的实例共享的属性和方法 2. 原型对象中有一个constructor属性,指向原型的构造函数 3.在实例上动态添加属性,会把原型对象中的相同的属性给屏蔽掉
八. 原型
继承