JavaScript基础

JavaScript基础

JavaScript显示方案：

1、使用window.alert（）写入警告框

2、使用document.write()写入HTML输出

3、使用innerHTML写入HTML元素

4、使用console.log（）写入浏览器控制台

JS可以使用document.getElementById（id）的方法

document.getElementById(“do”).innerHTML = “hello”;

注意：

innerHTML后面是等号 = 不是括号

write是document的方法并不是getElement的方法

JS声明变量一般用var，可以进行数字和字符的逻辑运算以及拼接

后期会写let以及其他变量的声明方式

方法内部是局部变量，方法外部是全局变量

在脚本的开头声明所有变量是个好习惯！

字符串需要使用" " 或者 ’ ', 俩者的区别在于“ ” 的内部是否还需要’ ‘，必须使用’ ‘

算数运算和其他语言都一样

变量的起名一般使用驼峰式 大驼峰 FirstName 小驼峰 firstName

JS注释可以增强代码的可读性

单行注释 // 注释内容

多行注释/* */

JS标识符：

• 名称可包含字母、数字、下划线和美元符号
• 名称必须以字母开头
• 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
• 名称对大小写敏感（y 和 Y 是不同的变量）
• 保留字（比如 JavaScript 的关键词）无法用作变量名称

字符串的连级 “8”+1+2 = 812

JS块作用域

通过var的关键词声明的变量没有块作用域

也就是说

{   
var x = 100；
}
//在这也可以使用x

let关键字声明的块作用域是拥有块作用域的变量

也就是说

{   
let x = 100；
}
//在这也不可以使用x

情景：使用 var 关键字重新声明变量会带来问题

在块中重新声明变量也将重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

ES2015不仅引入了let 还有const

const定义的变量与let类似，但是不能重新赋值

var x = 10;
// 此处，x 为 10
{ 
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10

const不可以先声明在赋值，只能在声明时候直接赋值

如果声明一个常量对象，就可以对常量对象进行更改

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

数组:

// 您可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];

// 您可以更改元素：
cars[0] = "Honda";

// 您可以添加元素：
cars.push("Volvo");

JS运算与其它编程语言大致相同。我没发现什么区别

介绍一个我不知道的方法 Math.pow(5,2); //结果是25

JS的数据类型只要有五种：

布尔值（true、false）、数字、字符串、数组、对象

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

科学计数法123e5 = 12300000 123e-5 = 0.00123

数组是[ ]

对象是{属性：赋值}

声明一个变量但是不给它赋值的时候，它的值是 undefined，类型是 undefined（typeof方法）

当使用 === 运算符时，相等字符串是不相等的，因为 === 运算符需要类型和值同时相等

对象、数组、null 类型都是object 方法的对象是function

JS函数

function myFunction(p1, p2) {
    return p1 * p2;              // 该函数返回 p1 和 p2 的乘积
}

JS对象

var person = {
  firstName: "Tom",
  lastName : "Gates",
  id       : 001,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

访问对象属性值的方式有两种：

1、对象.属性

2、对象[“属性”]

JS事件

<button onclick="this.innerHTML=Date()">现在的时间是？</button>

常见的HTML事件：

onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

字符串有时候内部也有" ",要有用到\进行转义字符的转义

字符串长度length

查找字符串在字符串中首次出现的位置索引 indexOf( )

最后一次出现的位置索引lastIndexOf（）

如果没有找到就返回 -1

slice（开始位置，结束位置）

如果索引为负数则从末尾来数

replace（字符串中的内容，替换的内容）替换字符串中的内容，大小写敏感，如果不需要敏感则需要/ /i （正则表达式）如果需要全局搜索则需要/ /g

通过 toUpperCase() 把字符串转换为大写

通过 toLowerCase() 把字符串转换为小写

trim() 方法删除字符串两端的空白符

concat() 方法可用于代替加运算符

charAt() 方法返回字符串中指定下标（位置）的字符串

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码

JS数字

数字和字符串的级联需要注意

toString() 以字符串返回数值

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字

toFixed() 返回字符串值，它包含了指定位数小数的数字

这三种 JavaScript 方法可用于将变量转换为数字：

• Number() 方法
• parseInt() 方法
• parseFloat() 方法

JS数组的两种定义方式：

var cars = new Array("Saab", "Volvo", "BMW");

var cars = ["Saab", "Volvo", "BMW"]  //优

数组的方法

toString() 把数组转换为数组值（逗号分隔）的字符串

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

join() 方法也可将所有数组元素结合为一个字符串

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

pop() 方法从数组中删除最后一个元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

push() 方法（在数组结尾处）向数组添加一个新的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

sort() 方法是最强大的数组方法之一

reverse() 方法反转数组中的元素

forEach(函数名称) 方法为每个数组元素调用一次函数（回调函数）

filter() 方法创建一个包含通过测试的数组元素的新数组

JS的数学方法

Math.round(6.8); //返回7

Math.pow(8,2) ;//返回64

Math.sqrt(x);//返回8

Math.abs(-4,7);//返回4.7

Math.ceil(6.4);//返回7 向上取整

Math.floor(6.4);//返回4 向下取整

Math.sin(弧度制)

Math.min

Math.max

Math.random()

三元运算符：

var voteable = (age < 18) ? "太年轻":"足够成熟";

JS条件

• 使用 if 来规定要执行的代码块，如果指定条件为 true
• 使用 else 来规定要执行的代码块，如果相同的条件为 false
• 使用 else if 来规定要测试的新条件，如果第一个条件为 false
• 使用 switch 来规定多个被执行的备选代码块

JS循环

for循环一样

来电不一样的，遍历对象for/in for/of，不仅可以遍历对象还可以遍历数组

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x;
}

JS while和do…while

while (条件) {
    //要执行的代码块
}

do {
    //要执行的代码块
}

while (条件);

break 语句“跳出”循环。

continue 语句“跳过”循环中的一个迭代。

正则表达式

我就记住了/ /i 和/ /g 平时没见到过，见到过也可能忘记了。

JS异常处理

try 语句使您能够测试代码块中的错误。

catch 语句允许您处理错误。

throw 语句允许您创建自定义错误。

finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
} 

<p id="demo"></p>

<script>
try {
    adddlert("欢迎访问！");//错误的代码不会被执行
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

<!DOCTYPE html>
<html>
<body>

<p>请输入 5 - 10 之间的数字：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="message"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "空的";
         if(isNaN(x)) throw "不是数字";
         x = Number(x);
        if(x < 5) throw  "太小";
        if(x > 10) throw "太大";
    }
    catch(err) {
        message.innerHTML = "输入是 " + err;
    }
}
</script>

</body>
</html> 

再来一个终极版的;

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "是空的";
        if(isNaN(x)) throw "不是数字";
         x = Number(x);
        if(x >  10) throw "太大";
        if(x <  5) throw "太小";
    }
    catch(err) {
        message.innerHTML = "错误：" + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

错误名	描述
EvalError	已在 eval() 函数中发生的错误
RangeError	已发生超出数字范围的错误
ReferenceError	已发生非法引用
SyntaxError	已发生语法错误
TypeError	已发生类型错误
URIError	在 encodeURI() 中已发生的错误

编写js的时候认真点就行了

哎，有个问题1、编写js的时候不声明直接赋值也能用，这样会有什么后果呢，什么时候必须声明呢？

“use strict”;

js中加入这个就是严格模式，就是本来对的就可能不对的意思。

JS的this关键字

• 在方法中，this 指的是所有者对象。
• 单独的情况下，this 指的是全局对象。
• 在函数中，this 指的是全局对象。
• 在函数中，严格模式下，this 是 undefined。
• 在事件中，this 指的是接收事件的元素。

像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

单独调用this关键字得到的是window对象 [object window]严格模式下也是

对于函数中this得到的也是window对象，严格模式就是underfined

JS箭头函数

这个东西让我想起了拉姆达表达式

hello = function() {
  return "Hello World!";
}

//等价与

hello = () => {
  return "Hello World!";
}

hello = () => "Hello World!";

JS JSON

对象：

{"firstName":"Bill", "lastName":"Gates"} 

数组：

"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"}, 
    {"firstName":"Alan", "lastName":"Turing"}
]

把JSON转成文本格式

var obj = JSON.parse(text);

JS调试

console.log()方法可以调试

debugger断点