前端基础-JavaScript

时间：2019-11-07 20:37:13 阅读：66 评论：0 收藏：0 [点我收藏+]

JavaScript语言基础

var x; // 此时x是undefined
var x = 1; // 此时x是数字
var x = "Alex" // 此时x是字符串 
还有一种NaN，表示不是一个数字（Not a Number）。
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。

var a = true;
var b = false;
""(空字符串)、0、null、undefined、NaN都是false。

var a = [123, "ABC"];
console.log(a[1]); // 输出"ABC"

实例：
function sortNumber(a,b){
return a - b 
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
console.log(a[i]);}

示例
var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

示例
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

示例
var day = new Date().getDay();#判断当前周几返回数字
switch (day) {#绑定开关
  case 0:#如果是0返回周天
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:#都不成立执行以下
  console.log("...")
}

# switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

示例
for (var i=0;i<10;i++) {
  console.log(i);
}

示例
var i = 0;
while (i < 10) {
  console.log(i);
  i++;#i自增1
}

示例
var a = 1;
var b = 2;
var c = a > b ? a (true返回的值): b(false返回的值)

// 普通函数定义
function f1() {
    console.log("Hello world!");
    }

// 带参数的函数#JS函数传参数多或少都不会报错
function f2(a, b) {
    console.log(arguments);  // 内置的arguments对象
    console.log(arguments.length);
    console.log(a, b);
    }

// 带返回值的函数
function sum(a, b){
    return a + b;
    }
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
     return a + b;
    }
sum(1, 2)

// 立即执行函数#只能执行一遍#外部访问不到函数内部定义的变量(用立即执行函数防止变量污染全局)
(function(a, b){
    return a + b;
    })(1, 2);

var city = "BeiJing";
function f(){
　　var city = "ShangHai";
　　function inner(){
　　　　console.log(city);
　　　　}
　　return inner;
　　}
var ret = f();
ret();

直接创建示例：
var a = {"name": "Alex", "age": 18};#自定义对象
console.log(a.name);#一种取值
console.log(a["age"]);#另一种取值
遍历对象中的内容：
var a = {"name": "Alex", "age": 18};
for (var i in a){
console.log(i, a[i]);#i为键名 a为对象
}

对象创建示例：
var person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性

BOM和DOM

例如：
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
注意：
this是实参，表示触发事件的当前元素。
函数定义过程中的ths为形参。

例如：
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>

原文：https://www.cnblogs.com/binHome/p/11813884.html

前端基础-JavaScript

JavaScript语言基础

声明变量 JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。 声明变量使用 var 变量名; 的格式来进行声明

注意： 变量名是区分大小写的。 推荐使用驼峰式命名规则。 保留字(关键字)不能用做变量名。

关键字： [byte，char，class，const，debugger，double，enum，export，extends，final，float，goto，implements，import，int，interface，long，native，package，private，protected，public，short，static，super，synchronized，throws，transient，volatile]

JavaScript数据类型 JavaScript拥有动态类型

JavaScript不区分整型和浮点型，就只有一种数字类型。

转化数据类型 parseInt 转化为数字类型 parseFloat 转回为小数类型

字符串(String) var x =‘字符串‘ 拼接字符串一般使用"+"

slice和substring的区别： string.slice(start, stop)和string.substring(start, stop)：

两者的相同点： 如果start等于end，返回空字符串 如果stop参数省略，则取到字符串末 如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点： 如果 start > stop ，start和stop将被交换 如果参数是负数或者不是数字，将会被0替换

silce()的特点： 如果 start > stop 不会交换两者 如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符) 如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

布尔值 区别于Python，true和false都是小写。

对象(Object) JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

数组 # 数组根据索引取值 数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

关于遍历(for循环)可以使用下面的方式：

类型查询 typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

运算符 算数运算符 + - * / % ++ -- 比较运算符 > >= < <= != == === !== 注意： 1 == "1" // true 弱等 1 === "1" // false 强等 逻辑运算符 && || ! 赋值运算符 = += -= *= /=

流程控制 if-else

if-else if-else

switch(多条件判断)

循环

for循环 #如果要提前结束循环 break

while循环

三元运算

补充:前端抛错 跟python中raise类似 throw关键字 例如: if(error) throw error

函数 function 定义函数关键字

函数中的arguments参数 arguments把传入的参数都显示出来 arguments.length 传入参数的长度

注意： 函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回

函数的全局变量和局部变量 局部变量： 在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量： 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期： JavaScript变量的生命期从它们被声明的时间开始。 局部变量会在函数运行以后被删除。 全局变量会在页面关闭后被删除。

作用域： 首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。 调用函数的时候要往回找函数定义阶段；

闭包

词法分析 JavaScript中在调用函数的那一瞬间，会先进行词法分析。

词法分析的过程： 当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

函数内部无论是使用参数还是使用局部变量都到AO上找。

内置对象和方法 两种创建方法 1.直接创建 2. new + 内置对象创建 注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --> string而 typeof s2 --> Object

数据类型： Number 数字对象 String 字符串对象 Boolean 布尔值对象 组合对象： Array 数组对象 Math 数学对象 Date 日期对象 高级对象： Object 自定义对象 Error 错误对象 Function 函数对象 RegExp 正则表达式对象 Global 全局对象

自定义对象#JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。

内置的Date对象 创建Date对象 var d1=new Date()

****JSON对象 JSON字符串转化为对象 var obj = JSON.parse(str1) 对象转换为JSON字符串 var str=JSON.stringify(obj1)

创建对象 方法1： var re=new RegExp("正则表达式") re.text(待匹配字符)#判断待匹配字符是否符合正则 返回布尔值 方法2： /正则表达式/.texe(待匹配字符)

// 关于匹配模式：g和i的简单示例 var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Alex age:18" s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Alex 哈哈哈ge:18" 全局匹配 s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 全局匹配+不区分大小写

// String对象与正则结合的4个方法 var s2 = "hello world";

BOM和DOM

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

BOM：

Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

window对象 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。全局函数是 window 对象的方法。

一些常用的Window方法： window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

window.open() - 打开新窗口

window.open(URL,name,features,replace)

window.close() - 关闭当前窗口

window.opener - 父窗口 可以直接.父窗定义好的函数 父窗口执行

参数 描述 URL 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

features 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。

replace 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。

demo: window.open (‘URL‘, ‘newwindow‘, ‘height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no‘)

window的子对象 # navigator对象（了解即可）

screen对象（了解即可）屏幕对象，不常用。

一些属性： screen.availWidth - 可用的屏幕宽度 screen.availHeight - 可用的屏幕高度

history对象（了解即可） window.history 对象包含浏览器的历史。

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。 history.forward() // 前进一页 history.back() // 后退一页

local对象 window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法： location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面

弹出框 警告框

警告框经常用于确保用户可以得到某些信息。 当警告框出现后，用户需要点击确定按钮才能继续进行操作。 alert("你看到了吗？");

确认框

确认框用于使用户可以验证或者接受某些信息。 当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。 如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。confirm("你确定吗？")

提示框

clearInterval() # 清除每隔多长时间做某事 语法： clearInterval(setinterval返回的ID值) clearInterval() 方法可取消由 setInterval() 设置的 timeout。 clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

DOM DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。

查找标签 直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByClassName 根据class属性获取 document.getElementsByTagName 根据标签名获取标签合集

补充: document.queryselector("选择器") # 返回文档中匹配指定 CSS 选择器的一个元素。

　　声明变量
　　　　JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
　　　　声明变量使用 var 变量名; 的格式来进行声明

　　注意：
　　　　变量名是区分大小写的。
　　　　推荐使用驼峰式命名规则。
　　　　保留字(关键字)不能用做变量名。

　　关键字：
　　　　[byte，char，class，const，debugger，double，enum，export，extends，final，float，goto，implements，import，int，interface，long，native，package，private，protected，public，short，static，super，synchronized，throws，transient，volatile]

　　JavaScript数据类型
　　　　JavaScript拥有动态类型

　　　　JavaScript不区分整型和浮点型，就只有一种数字类型。

　　　　　　转化数据类型
　　　　　　　　parseInt 转化为数字类型
　　　　　　　　parseFloat 转回为小数类型

　　　　字符串(String)
　　　　　　var x =‘字符串‘
　　　　　　拼接字符串一般使用"+"

　　　　　　　　　　slice和substring的区别：
　　　　　　　　　　　　string.slice(start, stop)和string.substring(start, stop)：

　　　　　　　　　　　　substirng()的特点：
　　　　　　　　　　　　　　如果 start > stop ，start和stop将被交换
　　　　　　　　　　　　　　如果参数是负数或者不是数字，将会被0替换

　　　　布尔值
　　　　　　区别于Python，true和false都是小写。

　　　　对象(Object)
　　　　　　JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

　　　　　　JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
　　　　　　对象只是带有属性和方法的特殊数据类型。

　　　　　　数组 # 数组根据索引取值
　　　　　　　　数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

　　　　　　　关于遍历(for循环)可以使用下面的方式：

　　　　类型查询
　　　　　　typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

　　流程控制
　　　　if-else

　　　　if-else if-else

　　　　switch(多条件判断)

　　循环

　　　　for循环 #如果要提前结束循环 break

　　　　while循环

　　三元运算

　　补充:前端抛错跟python中raise类似
　　　　throw关键字
　　　　例如:
　　　　　　if(error) throw error

　　函数 function 定义函数关键字

　　　　函数中的arguments参数
　　　　　　arguments把传入的参数都显示出来
　　　　　　arguments.length 传入参数的长度

　　　　注意：
　　　　　　函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回

　　　　全局变量：
　　　　　　在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

　　　　变量生存周期：
　　　　　　JavaScript变量的生命期从它们被声明的时间开始。
　　　　　　局部变量会在函数运行以后被删除。
　　　　　　全局变量会在页面关闭后被删除。

　　　　作用域：
　　　　　　首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。
　　　　　　调用函数的时候要往回找函数定义阶段；

　　　　闭包

　　词法分析
　　　　JavaScript中在调用函数的那一瞬间，会先进行词法分析。

　　　　词法分析的过程：
　　　　　　当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

　　　　　　　　函数内部无论是使用参数还是使用局部变量都到AO上找。

　　内置对象和方法
　　　　两种创建方法
　　　　　　1.直接创建
　　　　　　2. new + 内置对象创建
　　　　　　注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --> string而 typeof s2 --> Object

　　自定义对象#JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。

　　　　内置的Date对象
　　　　　　创建Date对象
　　　　　　var d1=new Date()

　　　　****JSON对象
　　　　　　JSON字符串转化为对象
　　　　　　　　var obj = JSON.parse(str1)
　　　　　　对象转换为JSON字符串
　　　　　　　　var str=JSON.stringify(obj1)

　　　　　　　　// 关于匹配模式：g和i的简单示例
　　　　　　　　　　var s1 = "name:Alex age:18";

　　　　　　　　// String对象与正则结合的4个方法
　　　　　　　　　　var s2 = "hello world";

　　BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

　　DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

　　BOM：

　　　　Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

　　　　window对象
　　　　　　所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
　　　　　　全局变量是 window 对象的属性。全局函数是 window 对象的方法。

　　　　一些常用的Window方法：
　　　　　　window.innerHeight - 浏览器窗口的内部高度

　　　　　　window.innerWidth - 浏览器窗口的内部宽度

　　　　　　window.open() - 打开新窗口

　　　　　　window.open(URL,name,features,replace)

　　　　　　window.close() - 关闭当前窗口

　　　　　　window.opener - 父窗口可以直接.父窗定义好的函数父窗口执行

　　　　　　　　features 　　　　　　一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。

　　　　　　　　　demo: window.open (‘URL‘, ‘newwindow‘, ‘height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no‘)

　　　　window的子对象 # navigator对象（了解即可）

　　　　screen对象（了解即可）屏幕对象，不常用。

　　　　　　一些属性：
　　　　　　　　screen.availWidth - 可用的屏幕宽度
　　　　　　　　screen.availHeight - 可用的屏幕高度

　　　　history对象（了解即可）
　　　　　　window.history 对象包含浏览器的历史。

　　　　　　浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
　　　　　　　　history.forward() // 前进一页
　　　　　　　　history.back() // 后退一页

　　　　local对象
　　　　　　window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

　　　　　　常用属性和方法：
　　　　　　　　location.href 获取URL
　　　　　　　　location.href="URL" // 跳转到指定页面
　　　　　　　　location.reload() 重新加载页面

　　　　弹出框
　　　　　　警告框

　　　　　　　　警告框经常用于确保用户可以得到某些信息。
　　　　　　　　当警告框出现后，用户需要点击确定按钮才能继续进行操作。 alert("你看到了吗？");

　　　　　　确认框

　　　　　　提示框

　　DOM
　　　　DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
　　　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
　　　　HTML DOM 模型被构造为对象的树。

　　　　查找标签
　　　　　　直接查找
　　　　　　　　document.getElementById 根据ID获取一个标签
　　　　　　　　document.getElementsByClassName 根据class属性获取
　　　　　　　　document.getElementsByTagName 根据标签名获取标签合集

　　　　　　补充:
　　　　　　　　document.queryselector("选择器") # 返回文档中匹配指定 CSS 选择器的一个元素。

　　　　节点操作
　　　　　　创建节点
　　　　　　　　document.createElement(标签名)

　　　　　　添加节点
　　　　　　　　追加一个子节点（作为最后的子节点）
　　　　　　　　somenode.appendChild(newnode)；

　　　　　　　　把增加的节点放到某个节点的前边。
　　　　　　　　somenode.insertBefore(newnode,某个节点);

　　　　　　删除节点
　　　　　　　　获得要删除的元素，通过父元素调用该方法删除。
　　　　　　　　somenode.removeChild(要删除的节点)

　　　　　　替换节点
　　　　　　　　somenode.replaceChild(newnode, 某个节点);

　　　　　　属性节点
　　　　　　　　获取文本节点的值：
　　　　　　　　var divEle = document.getElementById("d1")
　　　　　　　　divEle.innerText # 只获得文本
　　　　　　　　divEle.innerHTML # 获取标签

　　　　　　设置文本节点的值：
　　　　　　　　var divEle = document.getElementById("d1")
　　　　　　　　divEle.innerText=‘值‘#设置文本
　　　　　　　　divEle.innerHTML=‘值‘#设置标签

　　　　　　// 自带的属性还可以直接.属性名来获取和设置
　　　　　　　　imgEle.src
　　　　　　　　imgEle.src="..."

　　　　　　class的操作
　　　　　　　　className 获取所有样式类名(字符串)
　　　　　　　　# className = "" # 设置类属性

　　　　　　　　classList.remove(cls) 删除指定类
　　　　　　　　classList.add(cls) 添加类
　　　　　　　　classList.contains(cls) 存在返回true，否则返回false
　　　　　　　　classList.toggle(cls) 存在就删除，否则添加

　　　　　　指定CSS操作
　　　　　　　　JS操作CSS属性的规律：
　　　　　　　　　　1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

　　　　　　　　　　　　obj.style.margin=
　　　　　　　　　　　　obj.style.width=
　　　　　　　　　　　　obj.style.left=
　　　　　　　　　　　　obj.style.position=

　　　　　　　　　　2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

　　　　　　　　　　　　obj.style.marginTop=
　　　　　　　　　　　　obj.style.borderLeftWidth=
　　　　　　　　　　　　obj.style.zIndex=
　　　　　　　　　　　　obj.style.fontFamily=