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是一个关键字,表示当前对象,而当前对象是谁,取决于谁调用了这个函数
转载自:老谢