JavaScript语法

JavaScript基础语法

语言介绍

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

js用途

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

js语言的组成
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是变量名

赋值：

age = 20;

定义的同时赋值：

var age=20;

可以一次定义多个变量：

var name="zhangsan", age=18, weight=108;

输出
alert() 弹窗输出
console.log() 输出到控制台
innerHTML 输出到双标签元素内容
value 输出到表单元素

JS代码规范:

JS变量的命名规范

变量名必须是数字,字母,下划线_和美元符$组成;
第一个字符不能为数字
不能使用关键字或保留字
代码可读性
标识符区分大小写，如：age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。
变量命名尽量遵守驼峰原则: myStudentScore
变量命名尽量见名知意
保持代码缩进
JS语句的末尾尽量写上分号;
运算符两边都留一个空格, 如 var n = 1 + 2;

注释

单行注释：//注释内容
多行注释（和CSS注释一样）
/*注释内容*/

多行注释不能嵌套

JS数据类型

基本数据类型

Number：数字

NaN：是一个特殊的值，即非数值(Not a Number)。数学运算无法得到数字时，就会返回NaN
不代表任何值，也不等于任何值，甚至自己都不等于自己
任何数据与它运算都返回NaN
isNaN(a)：用来判断a到底是不是非数字,返回布尔值

String：字符串

用引号（单/双引号）括起来的内容

Boolean: 布尔类型

Boolean 类型有两个值：true和false

引用数据类型

Array：数组
Object：对象

特殊数据类型

Null

Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)

Undefined

Undefined类型只有一个值，即特殊的 undefined，在使用 var 声明变量，但没有对其赋值，这个变量的值就是 undefined
数据类型判断

typeof
typeof 'html5'; //=>string
typeof 100; //=>number
typeof true //=>boolean
typeof null //=>object

数据类型转换

基本数据类型转换：利用内置函数进行转换(主动)

 var str = '10';//string
    Number(str);//10,number
    Boolean(str);//true

隐式转换(被动)

如果运算不能进行下去，内部就会尝试进行数据类型的转换
支持隐式转换的运算：逻辑运算、关系运算、算术运算

运算

算术运算：

+, -, *, /, %:加,减,乘,除,取余(取模)

toFixed(num): 在数字后面调用，num为小数位，有四舍五入的功能，得到一个字符串
parseInt()：取整:获取到第一个不为数字的字符为止
parseFloat()：取小数
的特殊用法：字符串拼接
+号两侧只要有一个是字符串则为字符串拼接

赋值操作：

var num1=10;//表示把10赋值给num1变量
+=：在原来的内容基础上追加内容
str += 'test' <==> str = str + 'test'
-=：
var n=10; n -= 2 <==> n = n - 2
*=,/=,%=
关系运算（返回布尔值）
==(等于), !=(不等于)
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)
===、恒等于/全等于，比较的时候要求值和类型都相等（不会进行类型隐式转换）
!==、不全等于

关系运算符的比较规则:

数字和数字比较, 直接比较大小
数字和字符串比较, 字符串转换为数字后再比较
字符串和字符串比较, 进行字符的ASCII码值比较

[案例]

一个引号引发的公司倒闭
计算两个文本框的和
为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
[练习]

小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
提示：摄氏度与华氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)

逻辑运算（返回布尔值）

&&: 逻辑与
&&比||优先级高

||：逻辑或
!: 逻辑非
!true //=> false
!false //=> true
一元运算
++: 自增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)时，执行这里的代码
}

三元运算

格式：条件 ? 条件成立代码 : 条件不成立代码

var a=20;
var b = 50;
var sum = a>b ? a-b : a+b;
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中指的是循环执行某部分代码.
循环结构是程序中一种很重要的结构，其特点是在给定条件成立时，反复执行某程序段，直到条件不成立为止
只要条件成立，就会不断地执行花括号里的语句
编写条件时，要避免出现死循环

while循环

//变量初始化
while(条件){
    //条件成立就会不断地执行这里的代码，直到条件不成立
    //所以这里一般会伴随着条件的更新
}
do…while
//变量初始化
do {
    //不管条件是否成立，先执行一次这里的代码，再进行条件判断，如果条件依然成立，则再次执行这里的代码，依此类推
    //所以这里一般会伴随着条件的更新
} while(条件)
for循环
for(变量初始化; 条件判断; 变量更新){
    //循环条件成立，则执行这里的代码
}

两个分号必须写

函数

函数的定义

关键字声明（声明式）：

格式：function 函数名(){}
function sum(){}

函数的声明会提前 ==> 解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）;

函数表达式(赋值式)

var sum = function(){}

函数的执行

手动调用:

sum();

事件驱动:

格式：元素.事件 = 函数名;
buton.onclick = sum;

常见事件触发函数

onclick：点击事件
ondblclick：双击事件
onmouseover：鼠标移入事件
onmouseout:鼠标移开事件
onchange：内容改变事件（一般用于表单元素）
onkeyup：键盘按键弹起事件

作用域

俗称“使用范围”，即能够使用某个变量的范围，分<全局作用域>和<局部作用域>

全局变量与局部变量

@全局变量：在全局作用域下声明的变量，可以在任意地方中使用，作用范围比较大，我们称为全局变量
@局部变量：在函数内（局部作用域）声明的变量，只在函数中可以使用，作用范围较小，我们称之为局部变量变量的访问规则

@就近原则（如查找变量a）：

使用变量a时先从当前函数查找，如果当前函数有变量a则使用;
如果当前函数无变量a,则往父级函数查找，如果找到则使用，并停止查找;
如果在父级函数还是无法找到，则继续往上一层函数查找，以此类推，直到最顶层(全局作用域)，如果还是没找到，则报not defined错误;

@作用域链：

每个函数在定义时就形成了局部作用域，如果存在多个函数嵌套，他们之间就会建立起某种联系，直到全局作用域，这种联系称之为作用域链。当函数访问变量时，根据就近原则在这个作用域链中从内到外查询变量。
函数的参数
形参，就是局部变量形参与实参的区别:
形参：声明函数时圆括号内定义的变量
实参：函数执行时传入的参数形参和实参的数量可以不同

@arguments

函数内部隐藏的对象（是一个类数组），保存着实参的信息

@length: 实参的数量

引用数据类型与基本数据类型的传参（引用传递与值传递）

函数作为参数传递
@函数返回值

终止函数的执行,return后的代码不会执行
return后如果有值，则把这个值返回到函数执行的地方
如果函数没有return,执行完后返回undefined

@函数中的this

函数中的this是一个关键字，表示当前对象，而当前对象是谁，取决于谁调用了这个函数

转载自：老谢