js_intro.asp

学习新知识，要学会自己动手去测试这个新知识的使用方法，多自己设计案例

1.概念

JavaScript是一门世界上最流行的脚本语言

2.快速入门

2.1引入JavaScript

创建文件夹那些步骤和CSS一样，就不演示了

内部引入

    <script>
        alert("hello,world!!!!!!!");
    </script>

alert是弹窗

外部引入

<script src="js/qj.js"></script>

注释

和Java一样都是两个斜杠

2.2语法入门

定义变量

和java一样，都是

变量类型 变量名 = 变量值

但是JS里面类型就三种

局部变量:let
全局变量:var
常量:const

条件控制

if(){
}

---

if(){
}else{
}

---

if(){
}else if(){
}

和java一样的
JS严格区分大小写

调试代码

在idea里面没法直接调试JS代码，我们要到浏览器里面去调试

这个Console里面可以输入代码去调试
常用指令

//打印变量
console.log(变量名)

Sources是查看源码用的，可以打断点进行调试

使用方法：打断点之后刷新页面就可以进行调试了

还有一些补充的

网路请求，抓包啥的在这里

查看Cookies

2.3数据类型

数值，文本，视频，音频...都是不同的数据类型

变量名命名规范和Java一样，不能用数字开头

number
JS不区分小数和整数，都用number来表示，不像其他语言又分成什么int float

123
123.123
1.23e3
-99  
NaN  //Not a Number
Infinity //无限大

字符串

"abc"
'abc'

布尔值

true
false

逻辑运算

&& 一假则假
||  一真则真
! 非

比较运算符

=
== 等于(只要值一样就是true)
=== 绝对等于(类型和值都要一样才为true)

补充NaN与所有的数值都不相等，包括自己

可以通过一个方法判断是不是NaN

isNaN()

浮点数问题
尽量避免进行浮点数运算，因为存在精度问题
解决办法：利用高数的极限思想
|A-B|<一个无穷小的数，那么A趋于B
（我都不太记得高数了哈哈哈）

console.log(Math.abs((1/3)-(1 - 2/3)) < 0.0000000001)

Math.abs是绝对值

null和undefined
null 空
undefined 未定义

数组
不需要相同数据类型，因为都用var来表示了

var arr = [1,2,3,"hello",true]

也可以想java那样new一个，但是为了可读性，还是用上面这种

new Array(1,2,3,"hello",true)

这里没有数组下标越界，只会报undefined

对象
对象是大括号，数组是中括号

var person = {
      name:"xiaoHong",
      age: 3,
      tags: [1,2,3,"hello",true]
    }

每个属性之间用逗号隔开，最后一个不用
打印方法

上面都是简单过一遍，下面会详细讲各个数据类型

严格检查模式

'use strict';

用于预防JS的代码的随意性导致的一些问题
这句话必须写在开头

3.数据类型

3.1字符串

1.用' '和'' ''包裹，和Java一样
2.注意转义字符 \

\'
\''
\n
\t
\u4e2d Unicode字符 \u####
\x41 Ascll字符

3.多行字符串编写

var arr = `
    hello
    world
    hell
    `

注意这里不是单引号而是反引号，是按Tab键上面那个键

``

4.模板字符串
Java字符串拼接用+号
JS可以用+号，也可以用

//EL表达式
${}

注意：用el表达式得用反引号的字符串才行,不然是不识别的
实例

let name = "xiaoHong";
let age = 10;
let msg = `Hello, ${name}, you are ${age} years old`

去浏览器里输出一下

console.log(msg)
---
Hello, xiaoHong, you are 10 years old

5.字符串长度

变量名.length

6.字符串可变性

不可变

解释：一旦定义了就不能改变字符串的内容
7.大小写转换

//这里是方法了
变量名.toUpperCase()//大写
变量名.toLowerCase()//小写

注意5.7.里一个是属性，一个是方法

console.log(msg.toUpperCase())
---
VM98:1 HELLO, XIAOHONG, YOU ARE 10 YEARS OLD

下面补充一些方法

8.获取字符下标

变量名.indexOf('字符')

9.截取字符串

//从从下标为1的字符串截取到最后一个字符串
变量名.substring(1)

//含头不含尾,从下标为1的字符串截取到下标为2的字符串
变量名.substring(1,3)

3.2数组

Array数组可以包含任意类型的数据

var arr = [1,2,3,4,5,6]

1.长度

arr.length

注意：给arr.length赋值，数组大小会发生变化填充为undefine类型值

但如果赋值过小，元素会丢失
2.indexOf
和上面字符串一样，通过元素获得下标索引

元素2的下标是1

3.slice()截取数组一部分，返回一个新数组
类似于String中的substring，也是包头不包尾

4.push()和pop()，类似于入栈和出栈

//压入到尾部
arr.push('a', 'b')
---
(8) [1, 2, 3, 4, 5, 6, "a", "b"]

//弹出尾部元素
arr.pop()
---
"b"

5.unshift(),shift()

unshift() 压入到头部
shift() 弹出头部元素

6.排序sort()

var arr = [6,2,3,7,5,1]
arr.sort()
(6) [1, 2, 3, 5, 6, 7]

7.反转reverse()

arr.reverse()
---
(6) [7, 6, 5, 3, 2, 1]

8.追加concat()

arr.concat(9, 2, 0)
(9) [7, 6, 5, 3, 2, 1, 9, 2, 0]
arr
(6) [7, 6, 5, 3, 2, 1]

concat()并没有修改数组，只是会返回一个新数组
9.连接符join
打印拼接数组，使用特定的字符串连接（自己定义）

arr.join('--')
"7--6--5--3--2--1"

10.多维数组
和Java一样，就不演示了
还有很多方法，要用的时候查一下手册就行了

3.3对象

若干个键值对
JS中所有的键（属性名）都是字符串，值（属性值）是任意对象！

var 对象名= {
      属性名: 属性值,
      属性名: 属性值,
      属性名: 属性值
    }

---

var person = {
      name:"xiaoHong",
      age: 3,
      email: "1002568778@qq.com" 
    }

1.对象赋值

person.name = "jojo"
"jojo"
person.name
"jojo"

2.使用一个不存在的对象属性不会报错！

person.hahaha
undefined

3.动态的删减属性,通过delete删除

delete person.name
true
person.name
undefined

4.动态的添加

person.hahaha = "hahaha"
"hahaha"

5.判断属性是否在这个对象中

'属性名' in 对象名
---
'age' in person
true
---
//继承
'toString' in person
true

6.判断一个属性是否是这个对象自身拥有的

对象名.hasOwnProperty()
---
person.hasOwnProperty('age')
true
---
//报错
person.hasOwnProperty(age)
VM468:1 Uncaught ReferenceError: age is not defined
    at <anonymous>:1:23

报错原因：键（属性名）都是字符串，一定要用引号括起来，单双引号都可以

3.4流程控制

if判断
和java一样，不写了

while循环
和java一样，不写了
注意避免死循环

for循环
和java一样，不写了
补充：

for (let i = 0; i < 100; i++) {
    console.log(i);
}

这里尽量用局部变量let来赋值

for...in循环

var age = [12,3,55,1234,45,1235,756];

for (var ageKey in age) {
    console.log(age[ageKey]);
}

for...of循环

for (var ageKey of age) {
    console.log(ageKey);
}

两者效果一样，但是for...of可以用来遍历下面的Map和Set

3.5Map和Set

Map

get方法

//定义几个键值对
var map = new Map([["xiaoMing", 100], ["xiaoHong", 200], ["jojo", 300]]);
//get方法：通过Key获得Value
var name = map.get("xiaoMing");
console.log(name);

set方法

map.set("teacher", 1111111111);
---
map
Map(4) {"xiaoMing" => 100, "xiaoHong" => 200, "jojo" => 300, "teacher" => 1111111111}

delete方法

map.delete("xiaoMing");
---
map
Map(3) {"xiaoHong" => 200, "jojo" => 300, "teacher" => 1111111111}

Set：无序不重复的集合

var set = new Set([3,1,2,3,4,1,3]);
---
set
Set(4) {3, 1, 2, 4}

重复出现的不会打印
添加

set.add(9);

删除

set.delete(1);

是否包含某个元素

console.log(set.has(3));

4.函数

4.1定义函数

方式1：（推荐）

function abs(x){
  if(x >= 0){
    return x;
  }else {
    return -x;
  }
}

方式2：

var abs = function(x){
  if(x >= 0){
    return x;
  }else {
    return -x;
  }
}

方式2是匿名函数，但是可以把结果赋值给abs，通过abs来调用函数
补充：JS函数可以传任意个参数，也可以不传递参数，但是不会报错。

但是可以手动抛出异常
例子1：不传参数

function abs(x){
//typeof获取类型
  if(typeof x !== 'number'){
    throw 'Not a Number';
  }
  if(x >= 0){
    return x;
  }else {
    return -x;
  }
}

不传参数

例子2：传多个参数

arguments-->JS的一个关键字

代表所有传递进来的参数是一个数组,可以通过arguments获得传进来的所有参数


function abs(x){
  console.log("x=>" + x);
  for (let i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
  
  if(x >= 0){
    return x;
  }else {
    return -x;
  }
}

4.2变量的作用域

JS定义的变量是有作用域的

1.假设在函数体中声明，在函数体外则不可使用
(通过闭包可以实现，后面再讲)

'use strict';
function test(){
    var x = 1;
    x = x + 1;
}
x = x + 2;

2.两个函数使用了相同的变量名，只要都在各自的函数内部，就不会冲突，和Java一样

3.内部函数可以访问外部函数的成员，反之不行
（类似Java的内部类，内部类可以访问外部类的属性，外部类无法访问内部类的属性）

function test1(){
    var x = 1;
    function test2(){
        var y = x + 1;
    }
}

两个都输出不了

4.内部函数和外部函数的变量重名了

function test1(){
    var x = 1;
    function test2(){
        var x = 2;
        console.log('inner' + x);
    }
    console.log('outer' + x);
    test2();
}

test1();

JS函数查找变量从自身的函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
执行路线图

好久没看Java都有点忘了

如果test2放开头的话就是这样

5.提升变量的作用域

function test3(){
    var x = 'x' + y;
    console.log(x);
    var y = 'y';
}

执行结果

上面代码等效于

function test3(){
    var y;
    var x = 'x' + y;
    console.log(x);
    y = 'y';
}

说明：JS执行引擎，自动提升了y的声明，但不会提升变量y的赋值
规范：所有都变量定义都放在函数的头部，不要乱放
（有点像C语言，之前用devc写C语言的时候就要全部在函数头部定义）

function test4(){
var x = 1;
    y = x + 1;
    z,i,a;
}

先定义好了，之后随便用

6.全局函数
全局变量
就是定义在函数外面，那就哪里都可以用
全局对象window
默认所有的全局变量，都会自动绑定在window对象里

var x = 'xxx';
alert(x);
alert(window.x);

alert()这个函数本身也是一个window的变量（函数也可以视为变量）

规范：由于所有的全局变量，都会自动绑定在window对象上，如果不同的JS文件使用了相同的全局变量名，就会发生冲突，所以我们要自己定义一个全局唯一变量

//自定义唯一全局变量(对象)
var nomadApp = {}


//定义全局变量
nomadApp.name = 'nomad15234';
nomadApp.add = function (a,b){
    return a + b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

7.局部作用域let

function test5(){
    for (var i = 0; i <10; i++) {
        console.log(i);
    }
    console.log(i + '还可以执行！');
}