一、JavaScript基本介绍及发展趋势
JavaScript是一种在浏览器中解释运行的脚本语言,他的解释器被称为JavaScript引擎,是浏览器的一部分,是广泛用于客户端的解释性语言(边编译便运行)。
二、JS和H5的关系
H5狭义上,指HTML的第五个版本;广义上指web前端的所有技术,由于web前端是在H5出现后开始火爆起来,所以,
习惯上把web前端也叫H5。web前端开发也叫H5开发。
H5包括 HTML,CSS,JavaScript,等一切前端技术。
三、编写JS及运行JS
一个完整的 JavaScript 应该由下列三个不同的部分组成。
1.核心(ECMAScript)
是一种由Ecma国际(前身为欧洲计算机制造商协会),定立ECMA-262标准化的脚本程序设计语言。规定了JavaScript 脚本的核心语
法,如 数据类型、关键字、保留字、运算符、对象和语句等。
2.文档对象模型(DOM)
定义了 JavaScript 操作浏览器的接口,提供了访问某些功能(如浏览器窗口大小、版本信息、浏览历史记录等)的途径以及操作方法。
3.浏览器对象模型(BOM)
定义了 JavaScript 操作 HTML 文档的接口,提供了访问 HTML 文档(如body、form、div、textarea等)的途径以及操作方法
如何在页面中写入Javascript:
<script>......</script>
这组标签,是用于在 html 页面中插入 js 的主要方法,可以写多个。
一般来说,JS 代码越来越庞大的时候,我们最好把他另存为一个 js 文件,通过 src 引入即可。
<script type="text/javascript" src="demo1.js"></script>
四、变量的概念
变量用来在计算机中存储和表示数据
①、变量定义(声明):(var 是variable的简写)
var age;
//var 是关键字,age是变量名
②、赋值:
age = 20;
//20是数据 “=”是赋值
③、定义的同时赋值(初始化):
var age=20;
④、可以一次定义多个变量:
var height = 170, age=18,weight=125;
⑤、使用变量:
alert(height);
注:
1、变量必须先赋值再使用。
2、区分大小写。比如:text 和 Text 不是同一个变量。
变量的取名规范:
1.第一字符必须是一个字母、下划线(_)或一个美元符号($)。
2.其他字符可以是字母、下划线、美元符号或数字。
3.不能把关键字、保留字、true、false 和 null 作为变量。
五、数据类型
①、String
类型:
对于值又叫字符串类型,用双(单)引号括起来的一串字符,比如: "hello", 'world'
※ 必须成对出现,不能穿插使用,否则会出错。
var box = '老王";
//出错
②、Number
类型:
就是在数学中使用到的数字, 比如: 12, -34, 12.3 等。分为整型 和 小数型(浮点型)
③、Boolean
类型:
布尔有两种值 true
和 false
,表示真或假。比如: 4>3
④、Undefined
类型:
Undefined
类型只有一个值undefined
,使用变量未被赋值。
⑤、Null
类型:
Null
类型也只有一个值null
。
⑥、Object
类型:
JavaScript中最为复杂的类型就是Object
,它是一系列属性的无序集合。
typeof
操作符
typeof
操作符是用来检测变量的数据类型。或变量使用typeof
操作符会返回如下字符串。
示例:
var box = '小张';
alert(typeof box);
//string
六、算术运算符(重要,常用)
算术(数学)运算符,由算术运算符组成的式子叫算术表达式,结果是数值类型。
ECMAScript 定义了 5 个算术运算符,包含加、减、乘、除、求模(取余)。
1.加法
var box = 100 + 1;
//101
2.减法
var box = 100 - 120;
//-20
var box = 100 - 70;
//30
3.乘法
var box = 100 * 70;
//7000
4.除法
var box = 100 / 70;
//1.42....
5.求模(求余)
var box = 10 % 3;
//1,余数为 1
七、赋值运算符
示例:给定 x=10 和 y=5
运算符 | 示例 | 等价于 | 结果 |
---|---|---|---|
= | x=y | x=5 | |
+= | x+=y | x=x+y | x=15 |
-+ | x-=y | x=x-y | x=5 |
*= | x*=y | x=x*y | x=50 |
/= | x/+y | x=x/y | x=2 |
%= | x%=y | x=x%y | x=0 |
八、字符串连接符,字符串拼接表达式
- 运算符:
① 用于将文本值或字符串变量连接起来。
② 用于数值的累加运算。
九、JS变量的类型转换
强类型:定义变量时,会有明确的变量类型(如:c,c++,java,c#等等)。
弱类型:定义变量时,并不能(不会)确定变量的类型(javascript,php等等)。
①、var age; --> 变量age的类型是根据后面的值的类型决定。
age=250;
②、变量的类型在使用中可变
age=“年纪”; --> age的类型是string
十、JS的数据类型转换
1)隐式(自动)转换
①、字符串加数字,数字就会转成字符串。
‘hello’+ 23 ==> 'hello23'
var box = 100 + "100"; //100100,字符串连接符,有字符串就不是加法
var box = "您的年龄是:" + 10 + 20; //您的年龄是:1020,被转换成字符串
var box = 10 + 20 + "是您的年龄"; //30 是您的年龄,没有被转成字符串
②、数字减字符串,字符串转成数字。如果字符串不是纯数字就会转成NaN,字符串减数字也一样。两个字符串相减也先转成数
字。
‘12’ - 5 ==> 7
'hello' - 23 ==> NaN
NaN,即非数值(Not a Number)是一个特殊的值。
▲ 注:NaN 仍是数值Number类型。
③、乘,除,大于,小于跟减的转换也是一样。
2)显式(手动)转换
字符串转数值:string->number
Number( )、parseInt( )、parseFloat( )
数值转字符串: number->string
toString( )
显式(手动)转换:
alert(Number(25));
//25,数值型直接返回
alert(Number('456'));
//456
alert(Number('Lee123'));
//NaN
由于 Number()函数在转换字符串时比较复杂且不够合理,因此在处理整数的时候更常用的是 parseInt()。
alert(parseInt('456Lee'));
//456,会返回整数部分
alert(parseInt('Lee456Lee'));
//NaN,如果第一个不是数值,就返回 NaN
alert(parseInt('12Lee56Lee'));
//12,从第一数值开始取,到最后一个连续数值结束
alert(parseInt('56.12'));
//56,小数点不是数值,会被去掉
parseFloat( )
是用于浮点数值转换的,和 parseInt()
一样,从第一位解析到非浮点数值位置。
alert(parseFloat('123Lee'));
//123,去掉不是别的部分
alert(parseFloat('123.4.5'));
//123.4,只认一个小数点
alert(parseFloat('0123.400'));
//123.4,去掉前后导
简答:Number 与 parseInt 和 parseFloat 的区别(考试题简答题):
①、 parseInt 和parseFloat 会按顺序一个个转字符串中的字符,直到碰到转不成数字的字符为止,如果第一个字符就转不成数字将
返回NaN。
②、parseInt 认为小数点不能转, parseFloat 会转换遇到的第一个小数点。
③、Number对整个字符串进行转换,根据有没有包含一个小数点来确定转换为整数还是浮点,有任意字符不能转成数字时将返回
NaN。
//数值转字符串
var age = 12;
var t = age.toString();
十一、关系运算符
运算符 | 名称 | 示例 | 功能 |
---|---|---|---|
< | 小于 | x<y | x小于y时,返回真,否则返回假 |
<= | 小于等于 | x<=y | x小于等于y时,返回真,否则返回假 |
> | 大于 | x>y | x大于y时,返回真,否则返回假 |
>= | 大于等于 | x>=y | x大于等于y时,返回真,否则返回假 |
== | 等于 | x==y | x等于y时,返回真,否则返回假 |
!= | 不等 | x!=y | x不等于y时,返回真,否则返回假 |
=== | 全等(恒等) | x===y | 数据类型和值都要相等 |
!== | 不全等 | x!==y | 同上,取反 |