当前位置:   article > 正文

Javascript 知识总结_js点亮灯泡

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事件

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

10.JavaScript 赋值运算符

=x=yx=5实例 »
+=x+=yx=x+yx=15实例 »
-=x-=yx=x-yx=5实例 »
*=x*=yx=x*yx=50实例 »
/=x/=yx=x/yx=2实例 »
%=x%=yx=x%yx=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 事件:

HTML 事件的例子:

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

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号