JavaScript知识点整理(参考w3school)(包括JavaScript定义组成应用、JS函数、JS 弹出框、查找修改HTML元素等)

JavaScript简介

JavaScript定义

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。作为开发Web页面的脚本语言而出名,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript组成

JavaScript是由核心语法(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)组成的。

  • ECMAScript描述了该语言的语法和基本对象,它可以理解为是JavaScript的一个标准。
  • 文档对象模型(DOM)描述处理网页内容的方法和接口。
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

JavaScript应用

实现页面表单验证以及页面交互特效,基于Node.js技术进行服务器端编程等。

JS函数

1.函数定义

JavaScript 函数是通过 function 关键词定义的。

2.函数声明

function functionName(parameters) {
   要执行的代码;
   要执行的代码; //分号用于分隔可执行的 JavaScript 语句
}

3.函数表达式

函数表达式可以在变量中存储:

<!DOCTYPE html>
<html>
<body>

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

<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

在变量中保存函数表达式之后,此变量可用作函数:

<!DOCTYPE html>
<html>
<body>

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

<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = **x(4, 3)**;
</script>

</body>
</html>

4.arguments 对象

JavaScript 函数有一个名为 arguments 对象的内置对象。

arguments 对象包含函数调用时使用的参数数组。

这样,您就可以简单地使用函数来查找(例如)数字列表中的最高值:

<!DOCTYPE html>
<html>
<body>

<h1>找到最大的数字</h1>

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

<script>
function findMax() {
  var i;
  var max = -Infinity;
  for(i = 0; i < **arguments.length**; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
} 
document.getElementById("demo").innerHTML = findMax(4, 5, 6);
</script>

</body>
</html>

在这里插入图片描述

5.函数调用

  • 以函数形式调用函数
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 函数</h1>

<p>全局函数(myFunction)返回参数(a,b)的乘积:</p>

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

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = **myFunction(10, 2)**; 
</script>

</body>
</html>
  • 作为方法来调用函数
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 函数</h1>

<p>myObject.fullName() 将返回 Bill Gates:</p>

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

<script>
var myObject = {
  firstName:"Bill",
  lastName: "Gates",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName(); 
</script>

</body>
</html>

JS DOM对象

1.介绍

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

2.作用

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件

3.查找HTML元素

  • 通过id查找
var x=document.getElementById("intro");

//如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

//如果未找到该元素,则 x 将包含 null。
  • 通过标签查找
var y=document.getElementsByTagName("div");

//如果有多个同类标签,则返回多个对象的数组
  • 通过类名查找
var x=document.getElementsByClassName("intro");

注意:因为查找返回的元素也是对象,所以可以对它再进行查找

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

//本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素

4.修改HTML元素

  • 改变HTML输出流
document.write();

//如果在文档(DOM)加载完成之后使用则会覆盖该文档
  • 修改 HTML 内容
document.getElementById(id).innerHTML=新的 HTML内容
  • 改变 HTML 元素的属性
document.getElementById(id).attribute=新属性值
  • 改变 HTML 样式
document.getElementById(id).style.property = 新样式

5.DOM事件

事件可以是浏览器行为,也可以是用户行为,当事件触发时,可以执行对应的js代码。

常用事件

事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover用户在一个HTML元素上移动鼠标
onmouseout用户从一个HTML元素上移开鼠标
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载

HTML 元素中可以添加事件属性,并添加 JavaScript 代码,当此元素的事件被触发时,就会触发执行js代码

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

也可以由DOM对象分配事件,因为事件也是HTML的一个属性

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>  

JS BOM对象

1.JS Window

  • 所有浏览器都支持 window 对象。它代表浏览器的窗口。
  • 所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。

甚至(HTML DOM 的)document 对象也是 window 对象属性:

window.document.getElementById("header");//等同于:document.getElementById("header");
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口

2.JS 弹出框

  • 警告框:

如果要确保信息传递给用户,通常会使用警告框。

当警告框弹出时,用户将需要单击“确定”来继续。

window.alert("sometext");
  • 确认框:

如果您希望用户验证或接受某个东西,则通常使用“确认”框。

当确认框弹出时,用户将不得不单击“确定”或“取消”来继续进行。

如果用户单击“确定”,该框返回 true。如果用户单击“取消”,该框返回 false。

window.confirm("sometext");
  • 提示框

如果您希望用户在进入页面前输入值,通常会使用提示框。

当提示框弹出时,用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

如果用户单击“确定”,该框返回输入值。如果用户单击“取消”,该框返回 NULL。

window.prompt("sometext","defaultText");
  • 注意:如需在弹出框中显示折行,请在反斜杠后面加一个字符 n。

3.JS Timing 事件(定时事件)

  • setTimeout() 方法
window.setTimeout(要执行的函数,执行之前的毫秒数);//等同于setTimeout(要执行的函数,执行之前的毫秒数);

若要停止执行函数,则需要clearTimeout() 方法

window.clearTimeout(timeoutVariable);//等同于clearTimeout(timeoutVariable);

使用方式:

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

例如:

<!DOCTYPE html>
<html>
<body>

<p>点击“试一试”。等 3 秒。该页面将提醒“Hello”。</p>

<p>单击“停止”以阻止第一个函数执行。</p>

<p>(在 3 秒钟之前,您必须单击“停止”。)</p>

<button onclick="**myVar = setTimeout(myFunction, 3000)**">试一试</button>

<button onclick="**clearTimeout(myVar)**">停止</button>

<script>
function myFunction() {
  alert("Hello");
}
</script>
</body>
</html>
  • setInterval() 方法
window.setInterval(要执行的函数,每个执行之间的时间间隔的长度);//等同于setInterval(要执行的函数,每个执行之间的时间间隔的长度);

注意:一秒有 1000 毫秒。

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页