定义
简称js,是一种脚本语言,只能在浏览器中执行。是一种弱类型的语言。是一门基于对象和事件驱动的脚本语言,通常用来提高网页与用户的交互性
名词解释
基于对象:它不仅可以创建对象,也能使用现有的对象。JS没有类的概念,也没有编译的过程。是一边解释一边执行。
事件驱动:在JS中,大部分情况下都是通过事件触发驱动函数执行的,从而实现特定的功能。(比如点击div将内容替换为时间、当鼠标滑过元素,元素就有翻转的动态。)
脚本语言:在网络前端开发环境下,用于嵌入在客户端浏览器中的一段小程序。
特点和优势
特点:
(1)JS是一门直译式的语言,直接执行的就是源代码.
是一边解释一边执行,没有编译的过程(不像Java需要提前编译为class文件再运行).
(2)JS是一门弱类型的语言,没有严格的数据类型.
优势:
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)
只要有浏览器的地方都能执行JS
HTML中引入.js文件
- 通过script标签引入JS代码
<head>
<meta charset="utf-8"/>
<script>/* JS代码 */
function fn(){
alert("JS的第1种引入方式");
}
</script>
</head>
<body>
<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>
- 通过script标签引入外部的JS文件
// 另存为一个1.js的文件
function fn(){
alert("JS的第2种引入方式");
}
// 然后在html文件里面引入
<head>
<meta charset="utf-8"/>
<script src="1.js"> </script>
</head>
<body>
<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>
数据类型
-
数字number
在JS中,数值类型只有一种,就是浮点型。
在JS中,需要时会自动的进行数据类型的转换,比如:在显示和处理的时候,浮点型和整型会自动的转换。 -
字符串类型-string
在JS中,字符串是基本数据类型。
在JS中,字符串直接量是通过单引号或者双引号引起来。 -
布尔类型-boolean
值为true或者是false; -
undefined
值只有一个就是undefined。表示变量没有初始化值 -
null
值也只有一个,就是null。表示空值或者不存在的对象。 -
复杂数据类型
函数、数组、对象(自定义对象、内置对象、DOM对象、BOM对象…)
a=[1,2,10,20];
a.sort();//返回 [1, 10, 2, 20]
a.sort((a,b)=>{return a-b;});//传一个比较函数就可以变成正常顺序了
- 数组的遍历
let arr = ['a', 'b', 'c'];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//这种形式,不光会把length以内的索引遍历出来。而且如果arr同时绑定了其他的属性,比如arr.name='zhangsan',那么 forin这种形式会把name也遍历出来,所以也可以使用arr[i]打印出来
for (var i in arr) {
console.log(arr[i]);
}
//下面这个说是ES6引进的
for (var i of arr) {
console.log(i);
}
JS的变量
js是弱类型语言,所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
javascript没有类似采用静态语言类型,如java的变量类型是编译期就确定的;而它采用了动态类型,也就是说在编译期类型不确定,运行时会动态根据变量的赋值来决定它的类型,这点比较灵活。这也是双刃剑,编译期就难以检查出其赋值的错误。
assignment
const
: immutable,尽可能的使用该种方式声明变量
let
:block scope,如果确定该变量的值在稍后会发生改变,才使用这种方式
var
:function scope,尽量不要用该种方式
运算
运算符的运算方式与Java里面大致相同。
operators | |
---|---|
+= -= *= /= ++ -- | assignment |
+ - * / ** | |
> < >= <= | comparison |
优先级
==
比较的是两者的值,忽略类型,类似java里面的重写后的equals
===
全等,值和类型都要一致才返回 true
1==1 //true
1=="1" //true
1===1 //true
1==="1" //false
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5
模板字符串
`反引号包裹的内容 ${这里可以直接写变量名} ${也可以写javascript表达式}`
`I'm ${firstName}, a ${year - birthYear} year old ${job}!`
流程控制
与java一 样有 if、while、for、switch用法 也基本一致,switch中是区分数值类型的1
和字符串类型的"1"
的,这两个值在switch里面是不相等的。
var a = prompt("请输入");
toWeek(a);
function toWeek(a) {
if (typeof a != 'number') {
console.log(typeof a + ":" + a)
a = parseInt(a);
}
switch (a) {
case 1:
console.log("周一")
break
case 2:
console.log("周二")
break;
case 3:
console.log("周三")
break;
case 4:
console.log("周四")
break;
case 5:
console.log("周五")
break;
case 6:
console.log("周六")
break;
case 7:
console.log("周天")
break;
case true:
console.log(true);
break;
}
}
类
DOM树结构
提供给js用来操作html元素的一套W3C的标准