小惠珠哦

这个屌丝很懒，什么也没留下！

热门标签

Javascript 知识总结_js点亮灯泡

作者：小惠珠哦 | 2024-07-10 05:44:13

踩

js点亮灯泡

1.灯泡点亮的一个例子，可以看出Javascript的基本语法
<script>
function changeImage()
{
   element=document.getElementById('myimage')
   if (element.src.match("bulbon"))
   {
       element.src="/images/pic_bulboff.gif";
   }
   else
   {
       element.src="/images/pic_bulbon.gif";
   }
}
</script>
<img id="myimage" οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
</body>
</html>

2.<Script>b标签

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。

3.外部引入JavaScript

放在<body>的最下面：<script src="myScript.js"></script>

4.JavaScript 输出，JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

其中 document.getElementById("demo").innerHTML = "段落已修改。"

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。

innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码

5.JavaScript函数定义

function myFunction(a, b) { return a * b;}

注意：在 HTML 中，JavaScript 语句用于向浏览器发出命令。语句是用分号分隔。

6.常用关键字

var：var 关键字告诉浏览器创建一个新的变量

7.JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

8.JavaScript对象定义

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

9.常见的HTML事件

onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

10.JavaScript 赋值运算符

=	x=y		x=5	实例 »
+=	x+=y	x=x+y	x=15	实例 »
-=	x-=y	x=x-y	x=5	实例 »
*=	x*=y	x=x*y	x=50	实例 »
/=	x/=y	x=x/y	x=2	实例 »
%=	x%=y	x=x%y	x=0	实例 »

11.undefined和null的区别

null 和 undefined 的值相等，但类型不等：

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

12.JavaScript错误

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行

13.JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象

14.JavaScript中let和const

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块{}内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变

15.JavaScript void关键字

void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

语法格式如下：

void func()
javascript:void func()

16.异步编程

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终

17.JavaScript Promise

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务

现在我们新建一个 Promise 对象：

new Promise(function (resolve, reject) {
    // 要做的事情...
});

Promise 将嵌套格式的代码变成了顺序格式的代码，Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。

关键点：

1、Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）
2、Promise构造函数接收一个函数作为参数，该函数的两个参数分别是 resolve 和 reject
3、一个promise对象只能改变一次状态，成功或者失败后都会返回结果数据。
4、then 方法可以接收两个回调函数作为参数，第一个回调函数是Promise对象的状态改变为 resoved 是调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中第二个参数可以省略。
5、catch 方法，该方法相当于最近的 then 方法的第二个参数，指向 reject 的回调函数，另一个作用是，在执行resolve回调函数时，如果出错，抛出异常，不会停止陨星，而是进入catch 方法中。

注意：catch 只捕获最近的 then 的回调函数，前面的then的执行不成功的结果，有后面 then 的 reject 回调函数执行，如果没有后续 then 回调函数执行，则会被 catch 捕获执行；

18.箭头函数（ES6新增）

ES5 var x = function(x, y) { return x * y; }

ES6 const x = (x, y) => x * y;

19.JavaScript 闭包（***非常重要***）

JavaScript 变量可以是局部变量或全局变量。私有变量可以用到闭包。

变量的生命周期：全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。而在函数内部声明的变量，只在函数内部起作用。这些变量是局部变量，作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用

20.JavaScript 类继承

JavaScript 类继承使用 extends 关键字。继承允许我们依据另一个类来定义一个类，这使得创建和维护一个应用程序变得更容易。super() 方法用于调用父类的构造函数。当创建一个类时，您不需要重新编写新的数据成员和成员函数，只需指定新建的类继承了一个已有的类的成员即可。这个已有的类称为基类（父类），新建的类称为派生类（子类）。

类中我们可以使用 getter 和 setter 来获取和设置值，getter 和 setter 都需要在严格模式下执行。

getter 和 setter 可以使得我们对属性的操作变的很灵活。

类中添加 getter 和 setter 使用的是 get 和 set 关键字。

21.DOM操作

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

HTML DOM 允许 JavaScript 改变 HTML 元素的内容

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

var x=document.getElementById("intro");

通过类名找到HTML元素

var x=document.getElementsByClassName("intro");

22.DOM事件

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】