javascript简介
JavaScript ,简称js，可以嵌入到html页面中，是基于对象和事件驱动的网络脚本语言(解释性脚本语言,即代码不进行预编译)
1 特点
- 交互性：可以校验用户在html表单中的输入数据
- 安全性：javascript不能访问客户端的本地磁盘
- 跨平台：所有的浏览器中都具备js解析器,在绝大多数浏览器的支持下,可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）
2 作用
javascript可以动态的修改、增加、删除html和css的代码,且可以动态的校验用户输入的表单数据
3 组成部分:
ECMAScript 描述了该语言的基本语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口。主要用来获取文档中标签的属性，例如获取html中某个input的value的值。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口,主要用来获取浏览器的属性和行为，比如获取浏览器的版本，获取浏览器中的历史记录等等。
4 注释方式
javascript中注释使用//单行注释 和/**/多行注释,跟java相似,但是没有java中的文档注释/** */
5 html中引入javascript的三种方式:
方式1:内嵌脚本,不利于后期维护
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" onclick="alert('welcome here')"/>
</body>
</html>方式2:内部脚本,使用html的<script></script>标签,设置它的type属性值为"text/javascript"即可引入
样例
<script type="text/javascript">
js的代码
<script>示例:打开网页时弹出helloworld通知
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
alert("helloworld")<!--在script标签内部写javascript代码-->
</script>
<title>javascript的引入</title>
</head>
<body>
</body>
</html>方式3:外部脚本,在js文件(后缀名是.js)中编写代码,在html中使用<script></script>标签,设置type属性值为"text/javascript",src值为js文件路径即可.如下:
<script type="text/javascript" src="js文件路径"></script>示例:在网页打开时显示通知
js文件:
alert("helloworld3");html文件: (要注意相对路径的问题)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/embed.js" ></script>
<title>js的引入</title>
</head>
<body>
</body>
</html>三种方式对比:
方式2,浏览器刚开始加载时执行js部分,再执行html代码,js代码放到前后都一样,也不易维护
方式3:引入js的语句放到<head></head>中间时,浏览器会先加载js(指的是从服务器下载js文件,不一定先执行),放到</body></html>中间时,会先加载html,再从服务器下载js文件,提升性能
方式3在不影响html功能的前提下,放到html最下面
语法:
1 变量
在javascript中,所有类型的变量都用var(variable的缩写)来声明,可以在声明的时候赋值,也可以省略var关键字
var a=5;
var b="hello";
var c=true;
var d=null;
var e=undefined;
f=15;
var g; //如果没有赋值,g的变量类型是未定义的2 基本数据类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型,意思是相同的变量可以赋值成不同类型
javascript中的基本数据类型:字符串、数字、布尔、null、undefined即
number:数字类型,可带小数点也可不带小数点,特点大或者小的数字用科学计数法(指数形式)来表示
string:字符串类型,字符串类型既可以用""一对双引号,也可以用''一对单引号,跟java不同
boolean:布尔类型
null:空类型
undefined:未定义
关键字 typeof 用来查看变量的数据类型
用法: typeof 变量名其中number,string,boolean也是对象,可以调用对象的方法
类型转换:
number ,boolean转换成string类型:
使用toString()方法转成string
string、boolean抓换成number类型
使用parseInt()和parseFloat()转成number,
说明:boolean转换成number后值是一个NaN,(not a number的缩写)
string类型的字符串转成number,如果string字符串开头不是数字,结果是NaN,如果开头部分是数字,则会将开头部分的数字转换成number类型的数字,比如“123abc456hello789” 转成123
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变量</title>
<script type="text/javascript">
var a=10.50;
alert(a);//10.5
a="123hello456world";
alert(a);//123hello456world
b=parseInt(a)
alert(b);//123
a=true;
alert(a);//true
c=parseInt(a);
alert(c);//NaN
alert(typeof c);//number
a=123;
alert(a.toString());//"123"
a=false;
alert(a.toString());//"false"
</script>
</head>
<body>
</body>
</html>3 运算符
1 赋值运算符
js的变量是动态类型,可以通过赋值改变其变量类型
如 var a=10;
var a="hello";
a=true;2 算术运算符
算数运算符常见的有五种 +加,-减,*乘,/除,%取余
+:遇到字符串时,变成连接字符串,如一个数字加一个字符串,结果是字符串
- * /:遇到字符串时,先讲字符串转换成数字类型,然后运算,如果遇到字符串,那结果是NaN(number类型的)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
a=12;
b="126hello";
alert(a+b);
alert(a-b);//NaN
alert(a*b);//NaN
alert(a/b);//NaN
var c="126hello";
alert(b-c);//NaN
d=10;
e=20;
alert(d+e);//30
alert(d-e);//-10
alert(d*e);//200
alert(d/e);//0.5
</script>
<title>运算符</title>
</head>
<body>
</body>
</html>3 逻辑运算符
&&逻辑与
||逻辑或
4 比较运算符
>大于 <小于 >=大于等于 <= 小于等于 !=不等于
==判等,判断两者的值是否相等,不同类型也可以判断,如 a=5; b="5"; a==b 为true
===判断类型与值是否都想等,如a=5;b="5";a===b为false
a=5;
b="5";
a==b //true,两者的值相等
a===b//false,两者的值相等,但类型不同,一个number,一个string5 三元运算符
a > b ? c:d示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
a=15;
b=20;
alert(a>b?"大于":"小于");
</script>
<title>三元运算符</title>
</head>
<body>
</body>
</html>6 void运算符
void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值,常用在<a/>标签中,点击后没有任何操作
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="javascript:void(0)">这是空操作</a>
</body>
</html>7 类型运算符
javascript中的两个用来判断变量类型的关键字 typeof和instanceof
typeof:判断并返回变量的数据类型
instanceof:判断变量是否属于某种数据类型,常用于判断对象时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var a=15;
alert(typeof a);//number
a=new Array();
alert(a instanceof Array);//true
</script>
<title>Insert title here</title>
</head>
<body>
</body>
</html>4 逻辑语句
1 if-else语句
条件语句用于基于不同的条件来执行不同的动作。在javascript中,判断条件可以是单个的字符串或者数字或者布尔类型变量
如果字符串不为空,则为真,数字不为0,则为真
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var a=10;
//判断条件
if(a>5){
alert("a大于9");
}else{
alert("a小于9");
}
//a不为0
if(a){
alert("a不等于0");
}else{
alert("a等于0");
}
//字符串
var b="";
if(b){
alert("b不是空字符串");
}else{
alert("b是空字符串");
}
//布尔类型
c=true;
if(c){
alert("c为true");
}else{
alert("c为false");
}
</script>
<title>if-else</title>
</head>
<body>
</body>
</html>2 switch语句
switch 语句用于根据不同的条件来执行不同的动作.
break 语句可用于跳出循环。跳出循环后,继续执行该循环体之后的代码,也可以用来跳出switch语句
在switch语句中加入break的作用,不加break时,当case语句找到对应的值后,执行该条语句,后面的case语句都会执行,但是每条case语句后加break,即执行完对应的case语句后跳出该switch语句体
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var a=0;
switch(a){
case 0:alert(0);
case 1:alert(1);
}
var b=0;
switch(a){
case 0:alert(0);break;
case 1:alert(1);break;
}
</script>
</head>
<body>
</body>
</html>3 for循环
for循环常用于遍历操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var arr=[1,2,3,"hello",true];
for( var i=0;i<arr.length;i++){ //可以不声明i的类型,但良好的习惯
alert(arr[i]);
}
</script>
<title>Insert title here</title>
</head>
<body>
</body>
</html>4 for in 循环
使用for (index in arr)的方式,每次取出索引,利用索引来遍历数组或者对象(的属性)
示例:以遍历数组为例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var arr=[1,2,3,"hello",true];
for(i in arr){//i表示索引,对数组依次取索引
alert(i);
}
for(i in arr){//取索引,用索引来遍历数组
alert(arr[i]);
}
</script>
<title>Insert title here</title>
</head>
<body>
</body>
</html>参考:小猴子视频整理