JavaScript基础语法

 

 

 

一、JAVAScript的诞生

JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言 名字起源: Mocha->LiveScript->JavaScript

二、js用途

它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等。可用于开发网站、游戏、移动端App等

三、js语言的组成

javascript = ECMAScript + BOM + DOM

0. 核心(ECMAScript)
1. 浏览器对象模型(BOM)
2. 文档对象模型(DOM)

1、关键字

breakdoinstanceoftypeofcaseelsenewvarcatchfinallyreturnvoidcontinueforswitchwhiledebuggerfunctionthiswithdefaultifthrowdeleteintry

2、保留字

classenumextendssuperconstexportimport

3、术语

• 返回值：运算后得到的值
• 程序的三大流程控制我们的计算机在执行一个程序的时候，最基本的方式是一条语句接一条语句的执行。但不可能所有的问题都能用顺序执行方式就能解决，总会有一些跳转。采用结构化的程序设计，可以大大提高开发程序的速度、提高程序的可读性、程序运行的速度和效率顺序：从上朝下执行的代码就是顺序分支(选择)：根据不同的情况，执行对应代码循环：重复做一件事情

javascript = ECMAScript + BOM + DOM

0. 核心(ECMAScript)
1. 浏览器对象模型(BOM)
2. 文档对象模型(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、函数的执行

0. 手动调用: sum();
1. 事件驱动: 格式：元素.事件 = 函数名; 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、函数返回值

0. 终止函数的执行,return后的代码不会执行
1. 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>