一、JAVAScript的诞生
JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言 名字起源: Mocha->LiveScript->JavaScript
二、js用途
它的主要目的是,验证发往服务器端的数据、增加 Web互动、加强用户体验度等。可用于开发网站、游戏、移动端App等
三、js语言的组成
javascript = ECMAScript + BOM + DOM
- 核心(ECMAScript)
- 浏览器对象模型(BOM)
- 文档对象模型(DOM)
1、关键字
breakdoinstanceoftypeofcaseelsenewvarcatchfinallyreturnvoidcontinueforswitchwhiledebuggerfunctionthiswithdefaultifthrowdeleteintry
2、保留字
classenumextendssuperconstexportimport
3、术语
- 返回值:运算后得到的值
- 程序的三大流程控制我们的计算机在执行一个程序的时候,最基本的方式是一条语句接一条语句的执行。但不可能所有的问题都能用顺序执行方式就能解决,总会有一些跳转。采用结构化的程序设计,可以大大提高开发程序的速度、提高程序的可读性、程序运行的速度和效率顺序:从上朝下执行的代码就是顺序分支(选择):根据不同的情况,执行对应代码循环:重复做一件事情
javascript = ECMAScript + BOM + DOM
- 核心(ECMAScript)
- 浏览器对象模型(BOM)
- 文档对象模型(DOM)
四、js代码的编写位置
- html属性 <a href="javascript:alert(100)"></a>
- script标签<script type="text/javascript">
alert('你好')
</script>
- js文件 独立的js文件需要引入页面才能执行 <script type="text/javascript" src="js/common.js"><script> script标签属性type:类型src :js文件路径 带src属性的script标签内不能写js代码
五、JS变量的定义
- 变量定义(使用var关键字):变量是存储数据的容器 var age; //var 是关键字,age是变量名var obj = / /; 是JavaScript中正则对象的写法
- 赋值: age = 20;
- 定义的同时赋值: var age=20;
- 可以一次定义多个变量: var name="zhangsan", age=18, weight=108;
1、数组Array
一系列数据的集合,每一项可以保存任何类型的数据,称为数组的元素,每个元素之间用逗号隔开
数组格式:[1,2,3]
2、数组创建方式
//1)字面量(推荐)var arr = [1,2,3];//2)使用构造函数创建var arr = new Array();//创建一个空数组var arr = new Array('王大锤',18 ,'普通青年','广州');//创建数组并同时写入数据
3、数组访问与写入
- 索引(下标):从0开始var arr = ['html5','css3','javascript'];
//访问
arr[0]; //=> 'html5'
arr[2]; //=> 'javascript'
//写入
arr[3] = 'web前端';
- length:表示数组的长度 arr.length; //=> 3
4、数组遍历
- for循环格式:for(变量初始化;判断条件;变量更新){执行语句}var arr = ['html5','css3','javascript'];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
5、数组方法
- push: 往数组尾部添加一个或多个元素,返回数组新的长度
- pop:删除数组最后一个元素,返回删除的元素
- unshift:往数组开头添加一个或多个元素,返回数组新的长度
- shift:删除数组第一个元素,返回删除的元素
- splice(start,deleteNum,…items):在数组中插入、删除、替换的通用方法start:起始索引位置deleteNum:要删除的数量items:插入的元素(可以是多个)
- slice(start[,end]):返回数组的片段或子数组,从start开始到end(不包括end所对应的元素)如果省略end参数,则截取到数组的最后一项 支持负数
- sort:将数组中的元素排序,并返回排序后的数组默认以字符串的排列方式(转换成ASCII码进行对比)
- reverse:将数组中的元素颠倒顺序,返回逆序后的数组
- join(separator) 返回字符串值,其中包含了连接到一起的数组的所有元素separator为分隔符,默认为逗号
- indexOf(keyword)方法返回keyword所在数组中的索引值,如果数组不存在keyword,则返回-1
- forEach(fn) 遍历方法,for循环没有太大差别,比for循环方便
- map(fn)返回一个数量相等的数组,内容是什么取决于在fn中返回的值以上方法都对数组中的每一项运行给定函数fn,,函数中有三个形参分别为item:数组中的每一项,index:遍历过程中对应的索引值,array:对数组的引用
6、对象Object
- 字面量(推荐):var obj = {name:'小明',age:18}
- 构造函数:var obj = new Object();
7、读取属性值
obj.name;//==>小明
如果读取一个不存在的属性,返回undefined
8、添加属性
obj.sex = '男'; obj.marry = false; obj['weight'] = 60
9、删除属性
var obj = {name:'laoxie',age:18,gender:'man'} //删除age属性 delete obj.age;
10、遍历对象for…in
var obj = { name:'laoxie', age:18 gender:'男' } //遍历对象 for(var attr in obj){ //遍历过程把每次把对象属性赋值给attr //所以获取对象属性值为:obj[attr] document.write(obj[attr]);//分别输出:'laoxie',18,'男' }
11、数组与对象的组合
[{ id:'001', name:'iphone7 plugs', imgurl:'img/ip7.jpg', price:5899.00, sale:5888.00, color:'土豪金' },{ id:'002', name:'Note7', imgurl:'img/note7.jpg', price:3899.00, sale:998.00, color:'黑色' },{ id:'003', name:'荣耀7', imgurl:'img/honor7.jpg', price:1999.00, sale:1899.00, color:'白色' }]
六、输出
- alert() 弹窗输出
- console.log() 输出到控制台
- innerHTML 输出到双标签元素内容
- value 输出到表单元素
七、JS代码规范:
- JS变量的命名规范变量名必须是数字,字母,下划线_和美元符$组成;第一个字符不能为数字不能使用关键字或保留字
- 代码可读性标识符区分大小写,如:age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。变量命名尽量遵守驼峰原则: myStudentScore变量命名尽量见名知意保持代码缩进JS语句的末尾尽量写上分号;运算符两边都留一个空格, 如 var n = 1 + 2;注释单行注释://注释内容多行注释(和CSS注释一样)/*注释内容*/多行注释不能嵌套
八、JS数据类型
- 基本数据类型Number:数字NaN:是一个特殊的值,即非数值(Not a Number)。数学运算无法得到数字时,就会返回NaN不代表任何值,也不等于任何值,甚至自己都不等于自己任何数据与它运算都返回NaNisNaN(a):用来判断a到底是不是非数字,返回布尔值String:字符串 用引号(单/双引号)括起来的内容Boolean: 布尔类型 Boolean 类型有两个值:true和false
- 引用数据类型Array:数组Object:对象
- 特殊数据类型Null Null 类型是一个只有一个值的数据类型,即特殊的值 null。它表示一个空对象引用(指针)Undefined Undefined类型只有一个值,即特殊的 undefined,在使用 var 声明变量,但没有对其赋值,这个变量的值就是 undefined
- 数据类型判断typeoftypeof 'html5'; //=>string typeof 100; //=>number typeof true //=>boolean typeof null //=>object
- 数据类型转换基本数据类型转换:利用内置函数进行转换(主动) var str = '10';//string Number(str);//10,number Boolean(str);//true 隐式转换(被动)如果运算不能进行下去,内部就会尝试进行数据类型的转换支持隐式转换的运算:逻辑运算、关系运算、算术运算
九、运算
1、算术运算:
+, -, *, /, %:加,减,乘,除,取余(取模)
- toFixed(num): 在数字后面调用,num为小数位,有四舍五入的功能,得到一个字符串
- parseInt():取整:获取到第一个不为数字的字符为止
- parseFloat():取小数
+ 的特殊用法:字符串拼接
+号两侧只要有一个是字符串则为字符串拼接
2、赋值操作:
- = var num1=10;//表示把10赋值给num1变量
- +=:在原来的内容基础上追加内容 str += 'test' <==> str = str + 'test'
- -=: var n=10; n -= 2 <==> n = n - 2
- *=,/=,%=
3、关系运算(返回布尔值)
- ==(等于), !=(不等于)
- <(小于)、>(大于)、<=(小于等于)、>=(大于等于)
- ===、恒等于/全等于,比较的时候要求值和类型都相等(不会进行类型隐式转换)
- !==、不全等于
- 关系运算符的比较规则: 1. 数字和数字比较, 直接比较大小 2. 数字和字符串比较, 字符串转换为数字后再比较 3. 字符串和字符串比较, 进行字符的ASCII码值比较
4、逻辑运算(返回布尔值)
- &&: 逻辑与&&比||优先级高
- ||:逻辑或
- !: 逻辑非!true //=> false !false //=> true
5、一元运算
- ++: 自增1(在原来的数值基础上加1)
- –:自减1(在原来的数值基础上加1)
- 前置:var num = 10; ++num;--num; 返回值:返回值是减1(加1)之后的值
- 后置:var num = 10; num++;num-- 返回值:返回值是没减1(加1)之前的值
十、条件判断语句
if语句
- if单分支:if(条件){ //条件成立(返回true)时,执行这里的代码,否则不执行 }
- if双分支: 当if括号内的表达式结果成立,执行执行语句1,否则执行执行语句2 if(条件){ 语句1 //条件成立(返回true)时,执行这里的代码,忽略以下代码 }else{ 语句2 //条件不成立(返回false)时,执行这里的代码 }
- if多分支: 从上往下,满足哪个条件就执行其相对应的语句,都不满足时,执行最后的else的语句,只能进入其中之一if(条件1){ //条件1成立(返回true)时,执行这里的代码,忽略以下代码 }else if(条件2){ //条件2成立(返回true)时,执行这里的代码,忽略以下代码 }else{ //以上条件都不成立(都返回false)时,执行这里的代码 }
1、三元运算
格式:条件 ? 条件成立代码 : 条件不成立代码
var a=20;var b = 50;var sum = a>b ? a-b : a+b;
2、switch语句
switch(值) { case value1: //要求value1与值恒等 //如果表达式的值恒等于value1,代码从这里开始执行 break; case value2: //如果表达式的值恒等于value2,代码从这里开始执行 break; case value3: //如果表达式的值恒等于value3,代码从这里开始执行 break; case value4: //如果表达式的值恒等于value4,代码从这里开始执行 break; default: 如果以上条件都不成立,默认执行这里的代码}
- switch语句在比较值时使用的是全等操作符,因此不会发生类型转换
- case: 当符合条件时,会从符合条件的那一条case语句开始,依次顺序向下执行
- break: 跳出switch语句
- default: 当所有的case都不满足的情况下会执行defalut下面的语句
十一、循环语句
- 循环就是重复做一件事, 在JS中指的是循环执行某部分代码.
- 循环结构是程序中一种很重要的结构,其特点是在给定条件成立时,反复执行某程序段,直到条件不成立为止
只要条件成立,就会不断地执行花括号里的语句 编写条件时,要避免出现死循环
1、while循环
//变量初始化while(条件){ //条件成立就会不断地执行这里的代码,直到条件不成立 //所以这里一般会伴随着条件的更新}
2、do…while
//变量初始化do { //不管条件是否成立,先执行一次这里的代码,再进行条件判断, 如果条件依然成立,则再次执行这里的代码,依此类推 //所以这里一般会伴随着条件的更新} while(条件)
3、for循环
for(变量初始化; 条件判断; 变量更新){ //循环条件成立,则执行这里的代码}
十二、函数
1、函数的定义
- 关键字声明(声明式): 格式:function 函数名(){}function sum(){} 函数的声明会提前 ==> 解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问); 函数表达式(赋值式)var sum = function(){}
2、函数的执行
- 手动调用: sum();
- 事件驱动: 格式:元素.事件 = 函数名; buton.onclick = sum;事件发生都是一瞬间的
3、常见事件触发函数
- onclick:点击事件
- ondblclick:双击事件
- onmouseover:鼠标移入事件
- onmouseout:鼠标移开事件
- onchange:内容改变事件(一般用于表单元素)
- onkeyup:键盘按键弹起事件
- onkeydown: 键盘按下时触发(会连续触发)
4、作用域
俗称“使用范围”,即能够使用某个变量的范围,分<全局作用域>和<局部作用域>
- 全局变量与局部变量全局变量:在全局作用域下声明的变量,可以在任意地方中使用,作用范围比较大,我们称为全局变量局部变量:在函数内(局部作用域)声明的变量,只在函数中可以使用,作用范围较小,我们称之为局部变量
- 变量的访问规则就近原则(如查找变量a):使用变量a时先从当前函数查找,如果当前函数有变量a则使用;如果当前函数无变量a,则往父级函数查找,如果找到则使用,并停止查找;如果在父级函数还是无法找到,则继续往上一层函数查找,以此类推,直到最顶层(全局作用域),如果还是没找到,则报not defined错误;作用域链:每个函数在定义时就形成了局部作用域,如果存在多个函数嵌套,他们之间就会建立起某种联系,直到全局作用域,这种联系称之为作用域链。当函数访问变量时,根据就近原则在这个作用域链中从内到外查询变量【声明提前:提前到当前作用域最顶部】。比如: var name = 'liang'; function show(){ console.log(name); var name = 'xiao'; } 由于js的声明提前,name会提前到函数show内的最顶部, 执行语句console.log(name)时会输入undefined。
5、函数的参数
- 形参,就是局部变量
- 形参与实参的区别:形参:声明函数时圆括号内定义的变量实参:函数执行时传入的参数形参和实参的数量可以不同
- arguments 函数内部隐藏的对象(是一个类数组),保存着实参的信息length: 实参的数量
- 引用数据类型与基本数据类型的传参(引用传递与值传递)函数作为参数传递
6、函数返回值
- 终止函数的执行,return后的代码不会执行
- return后如果有值,则把这个值返回到函数执行的地方如果函数没有return,执行完后返回undefined
7、函数中的this
函数中的this是一个关键字,表示当前对象,而当前对象是谁,取决于谁调用了这个函数。
十三、文档对象模型 DOW
节点操作 * 操作属性 * 设置css样式 * 操作内容
- 绑定事件
- 生成document.createElement()
- 插入父级元素.appendChild(添加的元素) : 追加
- 获取节点:document.getElementById();//nodegetElementsByClassName();//[node,node]getElementsByTagName();//[node,node]获取元素的捷径 * html: document.documentElement * body: document.body * a : document.links //[] * image: document.images //[]
<body><h1 class="title">节点操作</h1><div id="list"><a href="#">google</a><a href="#" id="baidu">Baidu</a><a href="#">Yahoo</a></div><a href="#">360</a><script> var baidu = document.getElementById('baidu'); //node console.log(baidu); var title = document.getElementsByClassName('title'); //[node] console.log(title); var link = document.getElementsByTagName('a'); console.log(link); var list = document.getElementById('list'); var list_link = list.getElementsByTagName('a'); console.log(list_link); // 生节成点 var h2 = document.createElement('h2'); h2.id = 'subTitle'; h2.innerHTML = '人工智能'; // 获取body // var body = document.getElementsByTagName('body')[0]; //[body] var body = document.body; body.appendChild(h2)</script></body>
十四、浏览器对象模型 BOM
- window 可省略不建议省略window的场景事件属性事件onload 页面所有元素(包括DOM,图片等资源文件)加载完成后执行函数(方法)alert() 弹出框parseInt() 字符转为整型parseFloat() 字符转为浮点型Number() String()Boolean()浏览器可视区域的宽高:window.innerWidthwindow.innerHeight自动:设置定时器:var timer = setInterval(fn,duration)每个duration时间(ms),执行一次fn,返回一个定时器标识clearInterval(timer) :清除定时器 对象document<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02函数的执行</title> <style> #box{width:200px;height:100px;background-color: #f00;} </style> <script> window.onload = function(){ var box = document.getElementById('box');//节点(对象) //节点(对象) function show(){ console.log('laoxie'); } // 手动执行(主动) show(); // 事件驱动执行(被动) box.onclick = show; box.onmouseover = function(){ console.log('over'); } box.onmouseout = function(){ console.log('out') } // document.onkeyup = function(event) {console.log(event.keyCode,event.key) // // 事件对象:event // console.log('upupup') // } // document.onkeydown = function(event){ // // 事件对象:event // if(event.keyCode === 38){ // } // console.log('down') // } // 表单改变事件onchange username.onchange = function(){ console.log(666) } } </script> </head> <body> <div id="box"></div> <input type="text" id="username"> </body> </html>
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。