JavaScript
用于实现页面的交互效果。JavaScript
的语言大量借鉴了java
的语法,但是二者并没有关系。主要作用:
JavaScript
是世界用的最多的脚本语言(解释型语言,解释一行执行一行),同时也是一种客户端脚本语言,运行在浏览器上。
由ECMAScript
、DOM
、BOM
三部分组成:
ECMAScript
定义JavaScript语言规范。
DOM
Document Object Mode 文本对象模式,JavaScript操作网页元素的API。
BOM
Browser Object Mode 浏览器对象模式,JavaScript操作浏览器部分的API。
属性值 | 描述 |
---|---|
type | 版本类型 |
src | 引入外部样式 |
async | 异步(多个人同时在做多件事) |
sync | 同步(一个人有序的做多件事) |
defer | 异步 |
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步和同步区别title>
<script src="main.js" async="async">script>
head>
<body>
<div>看看我会不会显示div>
body>
html>
因为JavaScript
是解释型脚本语言,从上到下,从左到右顺序执行。默认为同步执行,首先解释script
中的代码,解释完成后才会往下执行div
中的内容,也就是先弹出窗口哈哈哈
,点击确定后,浏览器页面显示看看我会不会显示
。要让它们同时显示,需要通过async
属性设置为异步,多个人同时在做很多事。
defer与async都为异步,区别async加载.js文件完成后,就马上执行;而defer需整个HTML页面加载执行完成之后,才会执行script。
HTML页面书写JavaScript。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">script>
head>
<body>
body>
html>
通过的src属性,引入外部的
js
文件。(推荐使用)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="01.js">script>
head>
<body>
body>
html>
// 单行注释
/*多行注释*/
标识符是指变量、函数或者属性的参数名,标识符按照下面格式进行命名:
;
(推荐)//每一行之后加;
alert(123);
alert("error");
//换行,可以不加;
alert(3)
alert(4)
//错误 同一行显示,不加;
alert(1) alert(2)
如果不加分号,也不换行,同一行写语句,浏览器解释器会报错。
JavaScript
是严格区分大小写的。
变量名使用驼峰标识,首字母小写,第二个单词的第一个字母大写。
变量是在计算机中存储数据的一个标识符。var
定义变量,js
所有的变量都是使用var
来定义。变量类型通过数据类型来反馈。
var message; //局部变量
function test() {
var a; //局部变量,在text()函数中有效
b;//全局变量
}
alert(a);//错误
alert(b);//正确
在b定义时没有写var
默认为全局变量。
typeof
操作符是一种检测数据类型的手段。使用方式如下:
alert(typeof("a"));
alert(typeof "a");
基本数据类型对应的是值类型。
String
类型用于表示由零个或者多个16位Unicode字符组成,即为字符串,可以由" "
或' '
两者表示。
var zxy = "我不是歌神!";
var zjl = '你是我的偶像';
var ldh = 'zjl:"你是我的偶像"';
字符 | 描述 |
---|---|
\n | 换行 |
\t | 缩紧tab |
\b | 空格 |
\r | 回车 |
\ | \ |
\' |
’ |
\" |
" |
/*
小明说:
"今天天气'不错哦'"*/
var say = "小明说:\t \"今天天气\'不错哦\'";
Number
数值类型包含整数、浮点和NAN。
最基本的数值为十进制整数,十进制可以像下面代码这样直接输入:
var intNum = 100; //十进制
除了十进制之外也可以采用八进制和十六进制,浏览器解释器会自动转换为十进制数值显示。
var a = 070; //八进制 56
var b = 079;//不是八进制,默认为十进制
var c = 0xa;//十六进制 10
所谓的浮点数值,精确度小数点后17位。
var a = 1.1;
var c = .1;//有效,不推荐
var n = 5e-324; //科学计数法
注意:
var n1 = 0.1; var n2 = 0.2; alert(n1+n2); // 0.30000000000000004 console.log(n1+n2==0.3); //false console.log(0.07*100);//7.000000000000001
不要直接去判断两个浮点数是否相等,先取没有数值为(0.07)乘100取7之后,通过parseInt()转换为整数再去比较。
NAN
即非数值(Not a Number)是一个特殊的数值,可以理解为不是正常数值。
var a = 123; //Number
var b = "456"; //String
alert(typeof a-b); //NAN
isNaN
是否是非数值,用于判断NAN类型,是boolean类型,当返回true时,表示该是数值正常;返回false时表示该数值不正常。
alert(isNaN("123"-100));//NAN false
alert(isNaN(123));//number true
Undefined
类型只有一个值,在使用时如果一个变量未进行赋值时,这个数据类型为undefined。
var message;
alert(typeof message);
Bollean
类型有两个值true
和false
。
需要注意的是,Boolean类型的true和false都是小写,如果改为True和False,浏览器解释器会报错。(严格区分大小写)
var a = True;//true
var b = False;//false
alert(typeof a);
alert(typeof b);
boolean主要用于逻辑判断,使用方面:
var c = 1>3;//bollean类型
var d = 10;
var e = 11
var isEqual = d==e;
var is
复杂数据类型对应的是引用。
Null
类型是第二个自由一个值的数据类型,这个特殊值也为null。typeof操作符检测null值会返回一个object
,因为null值表示一个空指针对象。
var a = null;//a为空指正对象
alert(typeof a);
对象的创建
var a = new Object();
对象属性的添加
a.name = "zhangsan";
a.achievement = 100;
new Array()
来创建数组,相当于在堆中创建一块内存地址;下标从0开始;元素可以任意添加,数量不受限制,数据类型不受限制(弱语言)。
var a = new Array();//创建数组
a[0] ="81";
a[1] = "23";
a[2] = 100;
a[3] = false;
console.log(a[2]);
.length
数组的长度。
for(var i=0;i<a.length;i++) {
alert(a[i]);
}
字符串也也能看成一个数组,如var a = “abcd”;可以看a[0]=a;a[1]=b…
作用:用来封装一些经常使用的代码。
function 函数名(形参) {
//要封装的代码;
}
函数名();
//计算两个数的和
function addtion (num1,num2) {
alert(num1+num2);
}
addtion(10,20);
当创建函数的时候函数名后面的参数叫做形参(形式参数);当调用函数的时候后面传入的参数叫做实参(实际参数)。
//函数的返回值 通过return
function subtraction(n1,n2) {
return n1-n2;
}
alert(subtraction(20,10));
如果函数没有return
,默认返回undefined
。
Number()
// 文本框输入值,进行加1运算
var txt = prompt("请输入一个数值");
var num = Number(txt);
console.log(typeof num);
console.log(num);
注意:
- 如果输入的字符是数子,会自动转换为number类型;
- 如果输入的字符是其他,不会转换,其类型为NAN;
- 如果在内容中出现小数,那么小数会保留;
- 如果内容为空,那么转化为0。
parseInt()
var a = "abc";
// var a = "123";
// var a = "123.123" 123
// var c =" 1123asfsa123" 1123
a = parseInt(a);
console.log(a);//NAN
console.log(typeof a); //number
注意:
- 字符串内容不是数值,仍然会强制类型转换,结果为NAN,但是通过typeof类型查看,类型为number;
- 如果是小数,转换后小数点后的内容被省略,四舍五入;
- 如果第一个字符是数字,则据需解析直至字符解析完毕后或者遇到第一个非数字符号为止。
parseFloat()
parseFloat
与parseInt
相似,主要用于小数进行转换。
var a = "123.123";
a = parseFloat(a);
console.log(a); //123.123
console.log(typeof a); //number
直接调用这个变量的toString()方法,能加数值转化为字符串类型。(包装类)
var a = 123;
a = a.toString();
console.log(a);
console.log(typeof a);
将转换的内容放置括号内部,就可以将数据类型转化string类型。
var a = true;
a = String(a);
console.log(a);
console.log(typeof a);
除了“ ”(空字符串)、NAN、undefined转换为false,其余的任何都转换为true。
var a = 0;
a = Boolean(a);
console.log(a); // false
console.log(typeof a); //boolean
+
。var a = prompt("请输入内容");
a = +a;
console.log(a);
console.log(typeof a);
var a = 123;
var b = a + "";
console.log(a);
console.log(typeof a);
!!
相当于boolean(),!
相当于boolean()值取反。
var a = 123;
// a = !a; !boolean(a) false
a = !!a; //boolean(a)
console.log(a);
console.log(typeof(a)); //ture
+ - * / %
var a =123;
var b ="123";
alert(typeof(a+b));
console.log(a+a+a+b); // 369123
console.log(b+a+a+a); //123123123123
console.log("123"-3);//120
console.log(123-"3");//120
console.log(typeof("123"-3)); //number
中间不能有空格,否则编译器会提示报错。
var a =5;
a+=5;
a-=5;
a*=5;
a/=5;
a%=2;
()
优先级最高,算数比较复杂的情况,优先使用括号。
Math
函数提供了很多算数运算的方法。
方法 | 描述 |
---|---|
Math.pow(2,10) | 幂运算 2^10=1024 |
Math.round(1.6) | 四舍五入 2 |
Math.ceil(0.6) | 上取整1.0 |
Math.floor(0.6) | 下取整0 |
Math.abs(-5) | 绝对值 5 |
Math.max(10,20,30) | 返回最大值30 |
Math.min(10,20,30) | 返回最小值10 |
Math.random() | 生成一个大于0小于1.0的随机数 |
Math.PI | π |
Math.sqrt(4) | 平方根 2 |
Math.pow(27,1/3) | 立方根 3 |
先进行++或—计算,在进行赋值。
先赋值,再进行自身++或—计算。
var a = 5;
var b = a++;
alert(a);// a=6
alert(b);//b=5 a先赋值给b,在+1
a++ = b
逻辑运算符 | 例子 | 描述 |
---|---|---|
& | var a = 1>3; var b=3>1;alert(a&b); | 与运算,0表示false,1表示true,全1为1 |
&& | alert(a&&b); | 与运算,值为true或false,全true为true |
| | alert(a|b); | 或运算,0表示false,1表示true,其中一个为1为1 |
|| | alert(a||b); | 或运算,值为true或false,其中一个为true就为true |
! | alert(!a); | 非运算,值为true或false |
! > && > ||
var a = true || false && true; //true
var b = false || true && false;//false;
var c = true ||true && !false; //true
关系运算符 | 描述 | 例子 |
---|---|---|
> | 大于 | var a=1>3; false |
< | 小于 | var a=1<3; true |
>= | 大于等于 | var a=1>=0; true |
<= | 小于等于 | var a=1<=10; true |
== | 等等于,判断的是的内容,而不是数据类型 | var a=“3”; var b=3; alert(a==b); true |
=== | 全等,即看内容,又看数据类型 | var a=“3”; var b=3; alert(a===b); false |
!= | 不等于,相当于==结果取反 | var a=“3”; var b=3; alert(a!=b); false |
!== | 不全等,相当于===结果取反 | var a=“3”; var b=3; alert(a!==b); false |
boolean
类型的数据,在存储到内存时,true存储为1,false存储为0。在==
判断时,虽然不看数据类型,但是内容实际存储的为1。
var a = true;
var b = "true";
alert(a==b);//false 1不等于true
NAN
类型比较特殊,在进行关系运算时特别注意,自己都不等与自己。
三元运算符
可以看做简化的if_else,用于判断某一条件是否满足。
boolean ? 语句1:语句2;
表示如果结果为true执行语句1,否则执行语句2。
var a = 14;
var b = 15;
/* if(a>b) {
alert(a);
} else {
alert(b);
}*/
/*使用三元运算符
结构 :boolean表达式?操作1:操作2;
*/
a>b?alert(a):alert(b);//a>b 成立输出a ,否则输出b
以上为比较两个数的大小,同样也能进行三个数的比较。利用三元运算符的表达式的嵌套,先让前两个数进行比较,选择出大的数在于第三个数进行比较。
var a1 = 16;
var a2 =15;
var a3 = 20;
//让a1和a2比较,找出大的在和a3比较
(a1>a2?a1:a2)>a3? alert(a1>a2?a1:a2):alert(a3);
判断条件是否满足如果满足执行if里面的代码,不满足执行else里面的代码。
if(条件/boolean) {
语句1;
} else {
语句2;
}
用于判断多个条件是否执行。
if(条件/boolean) {
语句1;
} else if (条件2/boolean) {
语句2;
} else {
语句3;
}
作用于if_else if_else 相同,用于判断多个条件中那个条件满足要求。
switch(变量) {
case 变量值1:
语句1;
break;
case 变量值2:
语句2;
break;
case 变量值3:
语句3;
break;
....
default:
默认语句块;
break;
}
先判断后执行。一定要写循环控制语句,否则一直执行。
while(条件/boolean) {
语句;
控制循环条件语句;
}
执行:当程序运行到while,首先判断while中的内容,如果内容为true,执行代码;否则跳过while循环。
终止循环。
结束本次循环,开始下一次循环。
//除去 1+..+100 中含有9的数
var a = 1;
var sum = 0;
while (a<=100) {
if(a%10 == 9) {
a++;
//结束本次循环,开始下一次循环
continue;
}else {
sum+=a;
a++;
}
console.log("现在的值为:"+sum);
}
alert(sum);
先执行后判断。
do{
语句;
}while(条件/boolean)
执行过程:先执行do中的语句,执行之后判断是否满足while中的条件,如果满足继续执行下一次循环,否则循环结束。
//输入用户名和密码,如果正确,提示正确,如果不对,一直输入
do {
var username = prompt("请输入用户名");
var password = prompt("请输入密码");
}while(username!="admin" || password!="123");
alert("登录成功");
首先执行do里面的代码,如果用户名和密码输入正确,循环退出,显示登录成功;否则用户名或密码错误,满足条件继续执行。
for(var i=0;boolean表达式;i++) {
//循环代码
}
执行过程:当代码从上到下执行到for,首先声明变量i并赋值,之后判断是否满足boolean表达式,满足执行循环代码,不满足循环结束,最后再来执行i++;接着进行下次循环判断,i++之后的值赋值给i,进行boolean表达式判断,同理。
//1+..+100的和
var sum = 0;
for(var i=1;i<=100;i++) {
sum+=i;
}
console.log(sum);
程序执行到断点所在的行数后,会停止编译,当前所在行没有执行。刷新会启动断点。
双击右侧的函数,会出现蓝色的选中状态。选择上图右侧watch
点击+
输入qian=100
,变量值就会改变。
主要查看HTML、.CSS、.js文件的加载信息,Network主要查看响应状态,pending
未响应,数值大于等于200为响应状态。