1.JavaScript分为三个部分:
- ECMAScript标准:JavaScript基本语法
- DOM:文档对象模型
- BOM:浏览器对象模型
2.JavaScript介绍及作用
- JavaScript简称:JS,原名为LiveScript,后改名为JavaScript,由网景公司的Brendan Eich开发设计,是一门基于对象的语言,可以跨平台。
- JS是一门弱类型语言、脚本语言、解析型语言、动态语言。
- JS最初目的:解决交互问题(前后台的交互,数据交接)
3.JS语法及注意事项:
- JS区分大小写:var n=10;console.log(N);小n和大N不是同一个变量
- JS中字符串可以用单引号或者双引号
- 每一行代码结束用分号:var num=100;
- 声明变量都用var:如:var number=10;var str=”哈哈,我又变帅了”;
4.JS中的注释:
- 单行注释:
//注释内容 - 多行注释:
/注释内容/
5.JS的代码写在页面中的script标签:如:
<script>
alert("该行代码可以弹出一个对话框");
</script>
注意:如果js代码是在一个js文件中,那么在html标签中想要使用该js文件中的js内容,需要在html标签中引入外部的js文件,如下:
<script src="路径/test.js"></script>
上面的代码的作用是引入外部的js文件,不可以在这对script标签中再写其他的js代码,否则可能会出现问题.
在html标签中script标签一般在head标签中或者在body标签中的最后,script标签可以出现多对.
6.异步和同步:
同步:直白解释:一个人有顺序的做多件事,例子:小明上厕所后才能吃饭,不可能上厕所同时吃饭.在js中代码执行有先后顺序
- async:异步,属性和值就是自己本身,页面加载后就开始下载js文件,下载完毕后就执行
alert("1");
alert("2");
alert("3");
- async:异步,属性和值就是自己本身,页面加载后就开始下载js文件,下载完毕后就执行
异步:直白解释:多个人同时做多件事,例子:小明切菜,小红煮饭,多件事同时做,在js中代码可以同时进行。
- defer:异步,属性和值就是自己本身,页面加载后就开始下载js文件,所有内容加载和下载完毕后才执行
alert("1");
alert("2");
alert("3");
- defer:异步,属性和值就是自己本身,页面加载后就开始下载js文件,所有内容加载和下载完毕后才执行
7.案例:交换两个变量的值
//第一种:利用第三方变量进行交换
//使用第三方变量
// var num1=10;
// var num2=20;
// var temp=num1;
// num1=num2;
// num2=temp;
// console.log(num1);
// console.log(num2);
//第二种:利用相加和相减进行交换
//使用和差计算
// var num1=10;
// var num2=20;
// num1=num1+num2;//num1=30
// num2=num1-num2;//num2=10
// num1=num1-num2;//num1=20
// console.log(num1);
// console.log(num2);
//第三种:利用位元算进行交换
//使用补位
// var num1 = 10;
// var num2 = 20;
// num1 = num1 ^ num2;//num1=30
// num2 = num1 ^ num2;//num2=10
// num1 = num1 ^ num2;//num1=20
// console.log(num1);
// console.log(num2);
8.JS中变量的命名规范:
- 声明变量都用var,变量名以 、字母、下划线开头,中间可以包含字母、数字、下划线或者、 。
- 如果变量是由多个单词组合,那么第一个单词首字母小写,其他单词的首字母大写,遵循驼峰命名法。
9.JS中的数据类型:
- string,number,boolean,undefined,null,object这些都是js的原始数据类型,这是数据类型定义的变量都是通过typeof关键字来获取变量的类型,代码如下:
- (判断一个已经申明的变量,或者是一个值的类型的方法)。
console.log(typeof 变量名);
或者
console.log(typeof(变量名));
10.数据类型转换:
- 其他类型转数字类型:parseInt(),parseFloat(),Number()
- 其他类型转字符串类型:tostring(),String()
- 其他类型转布尔类型:Boolean()
11.运算符:
- 算数运算符:+ - * / % ++ –
- 算术运算表达式:有算术运算符连接起来的表达式
复合运算符: += -= *= /= %=
- 复合运算表达式:由复合运算符连接起来的表达式
var num=10;
num+=10;
console.log(num);
以上代码等价于下面的代码
var num=10;
num=num+10;
console.log(num);
- 复合运算表达式:由复合运算符连接起来的表达式
比较运算符: > < >= <= == === != !==
- 比较运算表达式:由比较运算符连接起来的表达式
- 比较运算表达式的结果为布尔类型
var num1=10;
var num2=20;
console.log(num1===num2);//结果为false
- 逻辑运算符:&& || !
- 逻辑运算表达式:由逻辑运算符连接起来的表达式
- 逻辑运算表达式的结果为布尔类型
var name=”admin”;
var pwd=”123”;
console.log(name===”admin”&&pwd===”123”);//结果true - 逻辑运算表达式关系如下:
表达式1&&表达式2 只要有一个表达式的结果为false,整个结果为false
表达式1||表达式2 只要有一个表达式的结果为true ,整个结果为true
!表达式 表达式结果为false,整个结果为true,否则结果为false
12.流程控制:
- 顺序结构:代码从上至下的执行顺序
分支结构:if,if-else,if-else if-else if-else switch-case,三元运算符: 表达式1?表达式2 :表达式3
- if语句:语法: if(表达式){ 代码1} 如果表达式结果为true,则执行代码1
var num=10;
if(num>5){
console.log(“哈哈,我又变帅了”);
}//结果为:哈哈,我又变帅了 - if-else语句:语法:if(表达式){代码1}else{代码2}如果表达式结果为true则执行代码1,否则执行代码2
var age=18;
if(age>=18){
console.log(“可以看电影了”);
}else{
console.log(“写作业去”);
}//结果为:可以看电影了 - if-else if语句:语法:if(表达式1){代码1}else if(表达式2){代码2}else{代码3},表达式1为true则执行代码1,如果表达式2结果为true则执行代码2,否则执行代码3
var score=90;
if(score>90){
console.log(“A”);
}else if(score>80){
console.log(“B”);
}else{
console.log(“C”);
}//结果为:B - switch-case语句:switch(表达式){case 值1:代码1;break;case 值2:代码1;break;default:break;}
var num=10;
switch(num){
case “10”:console.log(“字符串类型”);break;
case 10:console.log(“数字类型”);break;
default:console.log(“都不是”);break;
}//结果为:数字类型
//注意:switch-case 中的表达式在判断的时候等价于 ===
- if语句:语法: if(表达式){ 代码1} 如果表达式结果为true,则执行代码1
循环结构: while循环,do-while循环,for循环,for-in循环
- while语句:while(表达式){代码1}表达式如果为true则一直执行代码1
var i=0;
while(i<10){
console.log(“爱学习,我好开心”);
i++;
} - while循环特点:先判断条件是否成立,成立则一直循环
- do-while语句:do{代码}while(表达式)先执行代码,然后判断表达式是否成立为true
var num=10;
do{
console.log(“哈哈,我又变帅了”);
num++;
}while(num<5); - do-while循环特点:至少执行一次循环
- while语句:while(表达式){代码1}表达式如果为true则一直执行代码1
- continue:在循环中遇到continue直接进行下一次循环
- break:循环中遇到break则会跳出当前循环