JavaScript（0318）

---

1.概述

1.1JavaScript

• JavaScript 是一种轻量级的编程语言。
• JavaScript 是可插入 HTML 页面的编程代码。
• JavaScript是一种弱类型语言
• 它的解释器被称为JavaScript引擎，为浏览器的一部分
• 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为
• 跨平台特性，在绝大多数浏览器的支持下。

Node: 默认安装. 浏览器	

Js  node/浏览器
Java  jvm

1.2HTML引入JS

• 内部JS程序：直接写在html页面内部，用<script>标签包裹

    <script>
        function show(){
            //获取按钮元素
            var clickButton = document.getElementById("clickButton");
            //获取展示区元素
            var showName = document.getElementById("showName")
            //名字数组
            var name = ["zs", "ls", "wu", "zl"];
            var index = Math.floor(Math.random()*name.length);

            showName.innerHTML = name[index];

        }
    </script>

• 外部导入:导入外部的js文件, 在head中导入
  

1.3Js日志和注释

如果前端的代码和你想的不一样, 第一步,打开浏览器的控制台, 看一下报了什么错误, 如果没有错误, 日志输出一些关键信息, 
看是否符合预期, 

• 常用测试
  alert()
  console.log()
• 注释语句
  //
  /**/

1.4弱类型和var

Js的变量类型, 不能通过声明来确定, 只能通过赋值类型来决定

---

2.变量和属性

2.1变量的声明

1. JavaScript在声明时统一使用**无类型（**untyped）的“var”关键字

2. var来声明一个变量,这是一个固定的写法，是js的语法

3. JavaScript并没有避开数据类型，它的数据类型是根据所赋值的类型来确定的

4. JavaScript 对大小写敏感

5. 变量名有命名规范：
   只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字

6. 如果重新声明 JavaScript 变量，该变量的值不会丢失:
   在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：
   var carname=“Volvo”;
   var carname;

7. (let const)

2.2类型检测

• typeof表示“某某的类型”
• 语法：
  typeof 变量
  instanceof表示"是某某类型”
• Eg:
  console.log(typeof b)

String

• var str=‘123s’;

Number

• var x1=34.00; //使用小数点来写
• var x2=34; //不使用小数点来写
• 只要是个数，那么就是数值型的，无论整浮、无论大小、无论正负，都是number类型的

Boolean

• var x=true
• var y=false

数组

• var cars=new Array();cars[0]=“Audi”;
• var cars=new Array(“Audi”,“BMW”,“Volvo”);
• var cars=[“Audi”,“BMW”,“Volvo”];

对象

• var person={firstname:“Bill”, lastname:“Gates”, id:5566};
• 获取参数
  name=person.lastname;
  name=person[“lastname”];
• 添加参数并赋值
  person.aaa = 'aaaa’
• 注意：

var person={firstname:"Bill", lastname:"Gates", id:5566};
var b = person
b.lastname = 'b'
console.log(b)      // 结果: lastname为b
console.log(person) // 结果: lastname为b

3.函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function

---

4.分支和循环结构（语言逻辑）

4.1 运算符

• +,-,*,/,%,++,–
• =, +=, -=, *=, /=, %=
• 注意:
  加法:20+10+'20’
  减法:‘30’-‘10’

4.2 比较和逻辑运算符

!=, > , <, >=, <=, ? 三元
&& , ||, !
注意:
	==:值相等
	===:值相等并且类型相等
	!==值不相等或类型不相等

4.3 逻辑for语句

种类一:
var person={fname:“John”,lname:“Doe”,age:25};
for (x in person) {
alert(x)
alert(person[x])
}
种类二:
for (var i=0; i<5; i++) {
x=x + "The number is " + i + “
”;
}

---

5.核心对象

5.1 Number

5.1.1 toString() 以字符串返回数值

var ii = 123
console.log(typeof ii)
console.log(typeof ii.toString())

5.1.2 toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入)：

var x = 9.6544;
x.toFixed(2); // 返回 9.65

5.1.3 toPrecision() 返回字符串值，它包含了指定长度的数字：

var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7

5.1.4 MAX_VALUE 返回 JavaScript 中的最大数字。

var x = Number.MAX_VALUE;

5.1.5 MIN_VALUE 返回 JavaScript 中的最小数字

var x = Number.MIN_VALUE;

5.1.6 parseInt() 方法,允许空格。只返回首个数字：

parseInt(“10”); // 返回 10

5.1.7 parseFloat() 方法.允许空格。只返回首个数字

parseFloat(“10.33”); // 返回 10.33

5.2 String

5.2.1 length 属性返回字符串的长度

var txt = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
var sln = txt.length;

5.2.2 indexOf()方法返回字符串中指定文本首次出现的索引（位置）：

var str = “The full name of China is the People’s Republic of China.”;
var pos = str.indexOf(“China”);
var pos = str.indexOf(“China”, 28);

indexOf() 不存在返回 -1。

5.2.3 slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

var str = “Apple, Banana, Mango”;
var res = str.slice(7,13);//裁剪字符串中位置 7 到位置 13 的片段

5.2.4 split() 将字符串转换为数组

var txt = “a,b,c,d,e”; // 字符串
txt.split(","); // 用逗号分隔
txt.split(" “); // 用空格分隔
txt.split(”|"); // 用竖线分隔
如果分隔符是 “”，被返回的数组将是间隔单个字符的数组：

5.3 Array

5.3.1 toString() 返回数组转换的数组值（逗号分隔）的字符串。

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
alert(fruits.toString()); //Banana,Orange,Apple,Mango

5.3.2 pop() 方法从数组中删除最后一个元素,返回删除的元素

fruits.pop(); // 从 fruits 删除最后一个元素（“Mango”）
var x = fruits.pop(); // x 的值是 “Mango”

5.3.3 push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组长度

fruits.push(“Kiwi”); // 向 fruits 添加一个新元素

5.3.4 splice() 方法可用于向数组添加新项, 返回([])

fruits.splice(2, 0, “Lemon”, “Kiwi”);
// 第一个参数:添加新元素的起始位置。第二个参数:定义应删除多少元素。
// 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

5.3.5 sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组

fruits.sort(); // 对 fruits 中的元素进行排序

5.3.6 reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组

fruits. reverse(); // 对 fruits 中的元素进行排序

5.4 Math

5.4.1 Math.ceil(x)返回大于等于x的最小整数

5.4.2 Math.floor(x)返回小于等于x的最大整数

5.4.3 Math.random() 返回 0 ~ 1 之间的随机数

5.4.4 Math.round(x) 把一个数四舍五入为最接近的整数

5.4.5 Math.max(x,y,z,…,n) 返回最高值

5.4.6 Math.min(x,y,z,…,n) 返回最低值