1.1 JavaScript基本结构
JavaScript语言特点：脚本语言，基于对象，简单，跨平台，嵌入式
<!-- 在一个html页面中，javaScript代码可以写在script标签中 -->
<script type="text/javascript" language="JavaScript">
//在控制台输出“hello world！”
console.log('hello world!');
</script>
<!-- JavaScript是一种解释型脚本语言，可以直接执行 -->
<!-- JavaScript可以放在html文件中的任意位置 -->
<!-- 页面上可以有多个script标签 -->
<!-- type="text/javascript" language="JavaScript"可以不写 -->
<script type="text/javascript" language="JavaScript">
<!-- 在控制台打印和输出"hello"字符串内容-->
console.log("hello")
<!-- 在浏览器的页面上打印输出"HelloWorld"字符串内容-->
document.write("HelloWorld")
<!-- 弹出一个窗口并打印输出"Hi"字符串内容-->
alert("Hi");
</script>
-
JavaScript在页面中的位置——可以放在html文件中任何位置。
- 放在head部分: 最常用的方式是在页面中head部分放置script元素，head部分会先加载，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。所以进行页面显示初始化的js必须放在head里面。
- 放在body部分: JavaScript代码在网页读取到该语句的时候就会执行。也就是按照顺序执行。
- script标签可以有多个。
-
引入外部JavaScript
<!-- 引入外部js文件 -->
<!-- 引入的js文件最好设置成和需要引入的html文件名一样 -->
<script src="js/index2.js"></script>
1.2 JavaScript基本语法
-
使用let声明变量
声明变量语法： let 变量名 = 变量值；
let num = 10;
console.log(num);
注意：
let是关键词，后面跟变量名。表示声明一个变量，
变量的数据类型由所赋值的类型来决定。
变量的命名规范：
变量必须使用字母、下划线( _ )或者美元符( $ )开始。
然后可以使用任意多个英文字母、数字、下划线或者美元符组成。
变量名区分大小写，如:A与a是两个不同变量。
不能使用JavaScript关键词与JavaScript保留字。
变量名最长为255个字符（实际上可以超过）。
-
使用var声明变量
声明变量语法： var 变量名 = 变量值；
var num = 10;
console.log(num);
1.3 JavaScript数据类型
- undefined-未定义类型：未被赋值的变量，值为undefined
- boolean-布尔类型：值为true/false
- number-数字类型：任何数字（NaN也是number类型，表示“非数”）
- string-字符串类型：值用引号（单引号或者双引号）括起来
- object-对象类型：null、数组、Date等
- function-函数类型：function函数
// 【1】undefined--未定义类型
let un ;
console.log(un); //undefined值
console.log(typeof un);
// 【2】boolean--布尔类型：值为true或者false
let bol = true;
console.log(bol); //true值
console.log(typeof bol);
// 【3】number--数字类型：任何数字（NaN也是number类型，表示“非数”）
// ###声明变量：声明一个变量num，将10这个值赋值到变量中
let num = 10; //定义变量
console.log(num); //使用变量
// ###typeof关键字能查看变量类型
console.log(typeof num);
document.write(num);// 在浏览器页面显示
// 【4】string--字符串类型：使用引号（单双都行）括起来
let uname = "zifuchuan";
console.log(uname);
console.log(typeof uname);
// 【5】object--对象类型：null、数组、Date等
let obj = null;
console.log(typeof obj);
// 【6】function--函数类型：function函数
let fun = function(){}
console.log(typeof fun);
1.4 特殊值 NaN、Infinity
NaN，即非数值(Not a Number)是一个特殊的值，用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)。
console.log(parseInt('a')); //NaN
NaN和任何数据进行运算结果仍然是NaN。因此，想要判断一个变量是不是NaN时，不能使用这种形式：a==NaN，而要使用isNaN()函数：
isNaN()函数在接收到一个值之后，会尝试将这个值转换为数值，如果可以转就返回false:
console.log(isNaN(5)); //false
console.log(isNaN('5')); //false
console.log(isNaN('a')); //true
Infinity 即无穷，是一个特殊的值
console.log(10/0); //Infinity
// let num = parseInt('123');//函数：功能的封装
// console.log(typeof num);
let num = parseInt('zhangsan');//int--整数，float--小数
console.log(num);//NaN(不是一个数/非数字)
console.log(typeof num);
// NaN跟任何数据的运算结果仍然是NaN
// 判断一个变量是不是NaN，使用isNaN函数
console.log(NaN + 1);
console.log(NaN / 2);
let a = 10;
console.log(a == NaN);
let bo = isNaN(5);
console.log(bo);
let bo1 = isNaN('5');
console.log(bo1);
// 涉及类型转换(自动转)
let bo2 = isNaN('fff');
console.log(bo2);
// Infinity为无穷，是一个特殊的值
console.log(10/0);
1.5 JavaScript运算符
| 运算符 | 优先级 |
|---|---|
| 算术运算符 | ++、--、*、/、%、+、- |
| 比较运算符 | <、<=、>、>=、==、！=、===、！== |
| 逻辑运算符 | ！、&& |
| 赋值运算符 | =、+=、-=、*=、/= |
// 【***赋值运算符***】
let num = 10;
num = 20;//变量的重新赋值
console.log(num);
num = num + 10;
console.log(num);
let nn = 10;
nn = nn + 20;
console.log(nn);
let mm = 10;
mm += 20;// mm = mm + 20
console.log(mm);
let ss = 10;
ss -= 20;// ss = ss - 20
console.log(ss);
let rr = 10;
rr *= 20;// rr = rr * 20
console.log(rr);
let pp = 40;
pp /= 10;// pp = pp / 10
console.log(pp);
// 【***算数运算符***】
console.log(5 % 3);//用运算符连接叫做表达式，输出值
let n = 10;
console.log(n++);
console.log(++n);
// [++/--写在变量后面]
// console.log(n);
// n = n + 1;
// console.log(n);
// [++/--写在变量前面]
// n = n + 1;
// console.log(n);
let m = 20;
m++;
console.log(m);
console.log(5 >= 3);
console.log(5 <= 3);
console.log(5 != 3);
// == 比较的是字符串两边的内容
console.log('hello' == 'hello');
console.log('halo' == 'hello');
// === 严格相等，不光比较内容，还比较类型
console.log('5' == 5);
console.log('5' === 5);
// 【***逻辑与运算符***】
//--前后都为true，结果就为true，只要有一个false，结果就为false
console.log(true && true);//true
console.log(false && true);//false
console.log(true && false);//false
console.log(false && false);//false
//&&运算符截断: 一旦前面表达式结果为false，后面的表达式就不予考虑，不参与运行
let o = 5;
console.log(o > 6 && o++ >= 6);
console.log(o);
// 【***逻辑或运算符***】
//--前后都为false，结果就为false，只要有一个true，结果就为true
console.log(true || true);//true
console.log(false || true);//true
console.log(true || false );//true
console.log(false || false );//false
//||运算符截断: 一旦前面表达式结果为true，后面的表达式就不予考虑，不参与运行
let y = 5;
console.log(y == 5 || y -- > 5);
console.log(y);
-
==与===
“==”操作符会自动将两端的操作数转换为同一种数据类型后再作比较。
console.log(1=='1'); //true
“===”是严格意义上的相等，两个值和它们的类型完全一致时才返回true。
console.log(1==='1'); //false
-
数据类型转换
隐式转换：减、乘、除可自动进行隐式转换。
let num1 = '10';
let num2 = '5';
console.log(num1-num2) //5
console.log(num1*num2) //50
console.log(num1/num2) //2
强制转换：
parseInt()：将字符串转换成整
parseFloat() ：将字符串转换成浮点数
let str1 = '10';
let str2 = '10.5'
console.log(parseInt('10')+parseFloat('10.5')); //20.5
-
字符串拼接
<script>
console.log('数字是:',5);
//字符串拼接: 字符串参与连接运算，+叫字符串连接符
console.log('数字是:' + 5);
</script>
1.6 JavaScript流程控制语句
-
if语句
let score = 60;
if(score >= 60){
console.log("及格");
}else{
console.log("不及格");
}
//多重if语句
let grade = 80;
if(grade>=90){
console.log('优秀');
}else if(grade >= 80 && grade < 90){
console.log('良好');
}else if(grade >= 60 && grade < 80){
console.log('中等');
}else{
console.log('不及格');
}
//***三目运算符（ ? : ）***
let chengji = score >= 60 ? '及格' : '不及格'
console.log(chengji);
// 等价于
if(score >= 60){
console.log("及格");
}else{
console.log("不及格");
}
-
switch语句
let i = 1;
switch(i){
case 1:
console.log('运行了1')
break;
case 2:
console.log('运行了2')
break;
case 3:
console.log('运行了3')
break;
default:
console.log('运行了默认')
break;
}
let score = 60;
switch(parseInt(score/10)){
case 10:
case 9:
console.log('优秀');
break;
case 8:
console.log('良好');
break;
case 7:
console.log('中等');
break;
case 6:
console.log('及格');
break;
default:
console.log('不及格')
break;
}
-
while语句
// while语句
let i = 0;
while(i < 5){
console.log("Hello");
i++;
}
let n = 1;
while(n <= 5){
console.log("World");
n++;
}
// do while语句
let e = 0;
do{
console.log("执行了");
e++;
}while( e < 6);
-
for语句
for(let i = 0; i < 10; i++){
console.log("hello");
}
