一、js简介、js和H5的关系
1)、简介
JavaScript一种在浏览器中解释运行的脚本语言,它的解释器被称为JavaScript引擎,为浏览器的一部分, 是广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML(HTML5)网页增加动态功能。
如:表单验证、漂浮的广告、客户端的显示、网页游戏、地图搜索、股市信息查询、web聊天。。。
2)、历史:
1994年:网景公司(Netscape)发布了Navigator浏览器0.9版,只能浏览网页,没法交互。后来,才出现了全新的语言:liveScript。
liveScript ==> javaScript => ECMAScript(规范)
1999年:ES3,JavaScript 的第三版
2009年:出现了 ES5
2010年:出现了 ES6(里程碑的版本),以后,每年增加一次版本。
3)、组成部分
ECMAScript:
是一种由Ecma国际(前身为欧洲计算机制造商协会),定立ECMA-262标准化的脚本程序设计语言。规定了 JavaScript 脚本的核心语法,如 数据类型、关键字、保留字、运算符、对象和语句等。
BOM:
定义了 JavaScript 操作浏览器的接口,提供了访问某些功能(如浏览器窗口大小、版本信息、浏览历史记录等)的途径以及操作方法。
DOM:
定义了 JavaScript 操作 HTML 文档的接口,提供了访问 HTML 文档(如body、form、div、textarea等)的途径以及操作方法。
二、编写和运行js
1. 引入方式
在网页里引入方式js代码的位置有三种
1)、行内式
和CSS的行内是一样的,但是JS的行内式写法真的很少用,几乎不用。
2)、内部式
和css写在一对style标签一样,JS是写在一对script标签里
//内部式
<script>
alert("我用来弹出消息框!") ;
</script>
注:
1、script标签,可以写在HTML中任意位置,可出现多个。但建议写在最后(body标签的末尾)
2、JS大小写敏感
3、每句话后面写上分号,虽然不是必须的,但是建议写上,可以提高性能
3)、外部式
和CSS的外部引入文件是同样的道理
//外部式
<script src="demo.js" ></script>
注意:
1、引入外部js文件时,使用script标签的双标写法,带有src书写
2、不要在外部式的script标签中间写代码,如果要写,再写一对内部式script标签,在内部书写
2. 注释的编写
- 单行注释 //
- 多行注释 /* */
- 文档注释 /** */
3. 运行顺序
Javascript和HTML代码在同一个文件中写,它们的执行顺序是从上朝下,谁在前先执行谁。
三、js语法:变量
1、概念:
变量用来在计算机中存储和表示数据。是会根据程序的执行而变化的量
2、定义(声明):
var age; var 是关键字, age是变量名
3、赋值:
age = 20; 20是数据, 其中"="是赋值
4、定义的同时赋值:
var age = 20;
5、使用变量:
-
- alert(myname); 弹出变量的值
- console.log(myname); 控制台输出变量的值
- document.write(myname); 页面输出变量的值
- age = age+1; 变量运算
注:
1、变量必须先赋值再使用
2、可以一次定义多个变量: var myName="刘德华", age=18,weight=138;
6、变量的命名规则及关键字:
1)、变量命名规则 变量名由数字、字母以及下划线组成,但不能以数字开头 不要使用关键字及保留字
2)、变量命名规范: 尽量使用有意义的单词作为变量名,以驼峰命名法。
3)、关键字及保留字
关键字:
break、do、instanceof、typeof、case、else、new、var、catch、finally、return、void、continue、for、switch、while、debugger、function、this、with、default、if、throw、delete、in、try、
保留字:
abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、Native、synchronized、class、float、package、throws、const、goto、private、transient、 debugger、implements、protected、volatile、double、import、public
四、js语法:数据类型
1、概念
数据: 在计算机的世界里,数据是指所有能输入到计算机并被计算机程序处理的符号的介质的总称,是表示和记录事物的。如:数字,字母,符号、文字、语音、图像、视频等
数据类型: 在计算机中对数据进行了分类,不同类型的数据有不同的运算。
2、js的数据类型
3.、如何判断变量的类型
typeof 运算符 结果是字符串。
var age=20;
alert(typeof age);
alert(typeof typeof age);
五、js语法:运算符
表达式:由操作数和运算符构成的式子就是表达式,分为算术表达式、关系表达式等等。。
计算机编程语言的运算符:算术,关系,逻辑,赋值,自加自减
+:加法
-:减法
*:乘法
/:除法
%:取余,求余数 (保留整数)
由算术运算符组成的式子叫算术表达式,结果是数值类型
> :大于
>= :大于等于
< :小于
<= :小于等于
== :等于
!= :不等于
=== :恒等
!== :不等于
由关系运算符组成的式子叫关系表达式,关系表达式返回的结果是布尔类型
==和===的区别:
=== :恒等,如果两个数据的类型不一样,肯定不等.
== :等同,如果两个数据的类型不相同,但是值一样(还有很多内涵)
会做类型的转换(隐式转换)
&& : 与,运算规则: 一假既假, 全真为真(两个为真就是真).
|| :或,运算规则: 一真既真, 全假为假(两个为假就是假).
! :非,运算规则: 真是假,假是真.
逻辑短路:
当逻辑运算符前面的值能够决定整个表达式的结果. 那么,逻辑运算符后面的式子不再进行运算
= : 把赋值号右边的值赋给左边
+= :加并且赋值,如:x += y 等价于: x = x+y;
-= : 减并且赋值,如:x -= y 等价于: x = x-y;
*=
/=
%=
++:自加一,对变量自加1
如:
var x =1;
x++;等价于:x = x+1;
console.log(x);
--:自减一,对变量自减1
var x =1;
x--;等价于:x = x-1;
console.log(x);
i++和++i的区别?
在参与赋值,运算,输出等操作时,i++先操作后自加,++i先自加后操作
运算符的优先级(了解)
特殊运用
- 字符串连接符
var str="java";
str = str + "script" ;
结果是 javascript
var str1="苹果单价:";
var str1=str1+5; 把数值类型与字符串类型连接,结果会得到字符串类型
结果是 苹果单价:5
- 自加自减
六、语法:类型转换
1、隐式(自动)转换
概念:
有一些不同的数据类型参与运算时,JS会先把数据类型转成一致的,然后进行运算,这叫作隐式(自动)转换。
这个转换不需要程序员参与。
转换规则:
1)、字符串与数值类型:
- 字符串加数字,数字就会转成字符串。
- 数字与字符串进行 减(乘,除,大于,小于)运算时,字符串转成数字。两个字符串也会转成数字
2)、其它的类型的隐式转换先不用着急
2、显式(手动)转换
1)、概念:
程序员按需进行手动转换,需要程序员自己进行转换。
2)、其它类型转数字类型:
- parseInt(): 把其它类型转成整型
- parseFloat():把其它类型转成浮点型(小数)
- Number(): 把其它类型转成数字型
转换规则:
1) parseInt 和parseFloat 会按顺序一个个转字符串中的字符,直到碰到转不成数字的字符为止,
如果第一个字符就转不成数字将返回NaN。
2) parseInt 认为小数点不能转, parseFloat 会转换遇到的第一个小数点。
3)Number对整个字符串进行转换,根据有没有包含一个小数点来确定转换为整数还是浮点,
有任意字符不能转成数字时将返回NaN。
面试题:请问parseInt(),parseFloat(),Number()的区别?
3)、其它类型转字符串
- 变量.toString():有一些数据类型不能使用 toString() 方法,比如 undefined 和 null
- String(变量): 所有数据类型都可以
4)、其它类型转布尔类型
- Boolean(变量)
- 在 js 中,只有 ' '、0、null、undefined、NaN,这些是 false,其余都是 true