JavaScript概述
JavaScript简介
一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了
javaScript的发展史
- 起源：上世纪末1995年时，Netscape（网景）公司推出Navigator浏览器。发布后用的人不多，这咋整啊？这家公司就想了一个好方案，不仅在浏览器实现静态HTML，还想要有动态效果，比如：在前端处理表单验证。
- 动手：有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。
- 竞争：看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。
- 标准： Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西。
JavaScript的功能
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript特点
- js源码不需要编译，浏览器可以直接解释运行
- js是弱类型语言，js变量声明不需要指明类型
JavaScript组成
组成部分 | 作用 |
ECMA Script | 构成了JS核心的语法基础 |
BOM | Browser Object Model 浏览器对象模型，用来操作浏览器上的对象 |
DOM | Document Object Model 文档对象模型，用来操作网页中的元素（标签） |
JavaScript基础语法
HTML引入JS
内部js
定义script标签，标签体内容就是js代码
<script>
</script>==注意事项==
<script>标签可以写在任意位置，推荐写在<body>的尾部。浏览器在执行时，是从下往下依次执行！
外部js
定义<script>，通过src属性引入外部的js文件
<script src="js/文件名.js"></script>总结：
- script标签不能自闭合
- 如果script标签使用src属性，那么浏览器将不会解析此标签体的js代码
JS三种输出数据方式
浏览器弹框输出字符
<script>
alert('浏览器弹框输出字符');
</script>输出html内容到页面
<script>
document.write('输出html内容到页面');
</script>输出到浏览器控制台
<script>
console.log('输出到浏览器控制台');
</script>3.3 JS注释
单行注释
// 注释内容多行注释
/*注释内容*/JS变量声明
java是强类型语言，注重变量的定义，所以在定义变量时都需要指定数据类型。
js是弱类型语言，不注重变量的定义，所以在定义变量时不需要指定数据类型。
语法
定义变量
let 变量名 = 值;
var 变量名 = 值;定义常量
const 常量名 = 值;代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 使用let关键字 定义字符串
let str1 = "你好JS!";
// 使用var关键字 定义字符串
var str2 = "你好JavaScript!";
console.log(str1);
console.log(str2);
// 定义整数
let num = 1314;
console.log(num);
// 定义浮点数
let score = 99.9;
console.log(score);
// 定义boolean类型
let flag = true;
console.log(flag);
// 定义常量
const PI = 3.1415926;
// 常量定义之后值不能改变
// PI = 1;
console.log(PI);
// 定义变量a并末赋值，能不能使用?
let a;
console.log(a); // undefined 表示变量末定义类型
</script>
</head>
<body>
</body>
</html>==注意事项==
- ECMAScript6之前定义变量使用
var但是会有很多坑，所以ECMAScript6之后开始推出let声明变量，const声明常量 - 在js中，末赋值的变量，也是可以使用的，但是这个值是
undefined,末定义的变量
JS数据类型
js与java一样，数据类型分为基本数据类型(原始数据类型) 和 引用数据类型
属性 | 描述 |
number | 数字类型,不区别整数和小数 |
string | 字符串类型，不区别单双串 |
boolean | true/false |
object | 对象(function、null) |
undefined | 未定义 |
==类型判断==
typeof 判断数据类型
语法： typeof 变量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 使用let关键字 定义字符串
let str1 = "你好JS!";
let str2 = 'a';
console.log(typeof str1);
console.log(typeof str2);
// 定义整数
let num1 = 1314;
let num2 = 13.14;
console.log(typeof num1);
console.log(typeof num2);
// 定义boolean类型
let flag = true;
console.log(typeof flag);
// 末定义类型
let a;
console.log(typeof a);
// 引用数据类型
let obj = new Object();
console.log(typeof obj);
</script>
</head>
<body>
</body>
</html>==输出结果：==
JS运算符
JavaScript中的运算符和大多数编程语言中的运算符都接近，只有个别运算符因其灵活性而带来了些许不同
运算符 | 说明 |
算数运算符 |
|
赋值运算符 |
|
比较运算符 |
|
逻辑运算符 |
|
三元运算符 | 关系表达式 ? 值1 : 值2; |
算数运算符
在js中数值可与字符串进行数学运算，底层实现隐式转换。
<script type="text/javascript">
let str = "10";
let num = 20;
console.log(str + num); // 1020
console.log(str - num); // -10
console.log(str * num); // 200
console.log(str / num); // 0.5
</script>==输出结果:==
==注意事项:==
var a = 3;
var b = 4;
var c = "一燕";
alert(a/b);//js相除可以得到小数
alert(typeof(a+c));// number类与字符串类型相加，字符串拼接
var d = 6;
var f = '4';
alert(d+f);//拼接的64
var a1 = 3;
var a2 = "4";
alert(a1-a2);//1 如果字符串与number类型进行相减，默认把字符串的数字转成number类型
var b1 = 3;
var b2 = "abc";
alert(b1-b2);//NaN not a number ;
//如果数值与boolean类型为的数据，进行做运算时，会将boolean数据转换成数值。true转为1，false转为0
var bo1 = true;
var bo2 = false;
alert(a+bo1);//4
alert(a+bo2);//3比较运算符
== 、 ===(全等于)之间的区别？
== : 只比较内容是否相同 根本不比较数据类型
===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false<script type="text/javascript">
let num = 100;
let str = "100";
console.log(num == str); // true
console.log(num === str);// false
</script>三元运算符
/*
三(目)元运算符？
格式： 表达式 ？ 结果1 ： 结果2 ；
如果表达式运算的结果是true,把结果1返回
如果表达式运算的结果是false,把结果2返回
*/
//定义一个变量为3
let a = 3;
//定义一个变量为4
let b = 4;
//页面输出
document.write(a>b ? a : b);js特有转换
/*
三(目)元运算符？
格式： 表达式 ？ 结果1 ： 结果2 ；
如果表达式运算的结果是true,把结果1返回
如果表达式运算的结果是false,把结果2返回
*/
//定义一个变量为3
let a = 3;
//定义一个变量为4
let b = 4;
let c = 0;
//页面输出
document.write( (a>b ? a : b) );
document.write("<hr>");
//在js中表达式不必满足boolean
//如果满足的 非0 ，非null， 非undefined 为true
//如果满足的 是0 ，是null , 是undefined 为false
document.write( (c ? a : b) );JS流程控制语句
js与java一样，也有三个流程控制语句： 顺序结构 选择结构 循环结构
选择结构
if结构
<script type="text/javascript">
if (条件表达式) {
代码块;
} else if(条件表达式){
代码块;
} else {
代码块;
}
</script>- ==注意事项==
JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别。
JS中对各种数据类型作为布尔值有以下特点：
类型 | 用法 |
boolean | true为真、false为假 |
number | 非0为true |
string | 除了空字符串("")，其他都是true |
null&undefined | 都是false |
对象 | 所有对象都为true |
==总结：== 无意义的数据都为false 反之都为true
<script type="text/javascript">
let obj = new Object();
//if...elseif...else
//if(true){
//if(""){//string只有空字符为假
//if(0){number只有0为假
//if(false){//booleanfalse为假true为真 //if(null){//objectnull为假
//if(undefined){//undefined永为假
// if("undefined") { // 这不是undefined类型，而是字符串，内容是undefined
if(obj) { // 对象
console.log("满足条件");
} else {
console.log("不满足条件");
}
</script>switch结构
<script type="text/javascript">
var score = 90;//定义一个变量
/* parseInt 取整的一个函数（方法） */
/*
注意事项：
1、switch表达式一定会先找case,找到后一定要给break
2、switch给位置没有关系，跟case有关
3、如果找到后没有break，可以继续执行，直到找到break或都程序结束
*/
switch(parseInt(score/10)){
case 10:
case 9:
alert("学霸");
// break;
default:
alert("学渣");
// break;
case 8:
alert("优秀");
// break;
case 7:
alert("还行");
break;
}
</script>- ==注意事项==
* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
* switch(变量):
case 值:
* 在JS中,switch语句可以接受任意的原始数据类型循环结构
for循环
- ==普通for循环==
for(let 初始化语句; 条件表达式; 条件控制语句){
循环体;
}- ==增强for循环==
for(let 变量名 of 对象){
需要执行的代码;
}- ==索引for循环 是js特有==
for(let 变量 in 对象){
需要执行的代码;
}代码演示
<script type="text/javascript">
// 定义数组
let arr = ["张三","李四","王五"];
console.log("===================普通for循环===================");
// 普通for循环
for (let i = 0 ; i < arr.length ; i++) {
console.log(arr[i]);
}
console.log("===================forof循环===================");
// for of循环
for (let e of arr) {
console.log(e);
}
console.log("===================forin循环===================");
// for in循环
for (let index in arr) {
console.log(arr[index]);
}
</script>==forof 与 forin之间的区别==
1. forin可以遍历对象,forof不能遍历对象
2. forin遍历出数组中的索引,forof遍历出数组中的元素while循环
<script>
/*
for一般用在某一个范围中循环
while一般用在一个确定范围中循环
for中的var i = 1;这个只能在for循环中使用
while中的var i = 1; 可以全局中使用
*/
for(let i = 1; i <= 10; i++){
document.write(i);
document.write("<br>");
}
// document.write(i);
document.write("<hr>");
let y = 1;
while( y <= 10){
document.write(y);
document.write("<br>");
y++;
}
// document.write(y);
document.write("<hr>");
//1 ~ 100 求和
let sum = 0;
let num = 1;
while(num <= 100){
sum += num;
num++;
}
document.write(sum);
</script>doWhile循环
do...while循环就不再单独演示，跟java中的do...while循环用法是一致的！
<script>
//定义了一个变量
let a = 1;
do{
//循环体，至少执行一次
document.write(a)
a++;
}while(a <= 10);//循环判断条件
</script>循环总结
while 和Java一样
do while 和Java一样
重点掌握:
普通for 与 java一样
forin：遍历出数组的索引
遍历出对象中的属性名key
forof: 遍历数组中的元素
