JavaScript学习2 | 青训营笔记

用户2183409519718
94 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第6天

JS运算符

JavaScript 算数运算符

**幂
/除法
%系数

  • 系数运算符（%）返回除法的余数。

    注释：在算术中，两个整数的除法产生商和余数。在数学中，模运算的结果是算术除法的余数。

JavaScript 比较运算符

运算符描述
==等于
===等值等类型
!=不相等
!==不等值或不等型
大于
<小于
>=大于或等于
<=小于或等于
?三元运算符

JavaScript 逻辑运算符

运算符描述
&&逻辑与
||逻辑或
!逻辑非

JavaScript 类型运算符

运算符描述
typeof返回变量的类型。
instanceof返回 true，如果对象是对象类型的实例。

JS的数据类型

  • JavaScript 拥有动态类型，这意味着相同变量可用作不同类型。

    var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

  • 对于字符串，可使用单引号或双引号

  • 可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配。

  • JS中的数组属于对象（object）

  • JavaScript 对象用花括号来书写，对象属性是name:value对，由逗号分隔：

    var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

  • 在 JavaScript 中，null 的数据类型是对象object，值为 null。

  • Undefined 与 null 的值相等，但类型不相等（一个是undefined类型，一个是object）

  • 原始数据：是一种没有额外属性和方法的单一简单数据值。（包括：string、number、boolean、undefined）

  • 复杂数据：object（对象、数组或 null）和 function（函数）

JS函数

  • JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

  • *函数参数（Function parameters）*是在函数定义中所列的名称。

    函数参数（Function arguments）是当调用函数时由函数接收的真实的值。

    在函数中，参数是局部变量。

  • () 运算符调用函数（toCelsius是一个JS函数）

    toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。

JS对象

  • 对象里有对象属性（值对）和对象方法。

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

  • this关键词：在函数定义中，this 引用该函数的“拥有者”。

    在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。换言之，this.firstName 的意思是 this 对象的 firstName 属性。

  • 访问对象属性：objectName.propertyName或objectName["propertyName"]

  • 访问对象方法：objectName.methodName()（如果不使用()访问方法，则将返回函数定义）

  • 请不要把字符串、数值和布尔值声明为对象！

    如果通过关键词 "new" 来声明 JavaScript 变量，则该变量会被创建为对象：

    var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //	把 z 声明为 Boolean 对象

JS事件

HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

HTML 事件

  • HTML 事件可以是浏览器或用户做的某些事情。

  • 下面是 HTML 事件的一些例子：

    • HTML 网页完成加载

    • HTML 输入字段被修改

    • HTML 按钮被点击

  • 通常，当事件发生时，用户会希望做某件事。JavaScript 允许您在事件被侦测到时执行代码。通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

<element event="一些 JavaScript">

  • 用JS代码或事件属性调用函数改变自身元素的内容：

    // 1.
<button onclick="this.innerHTML=Date()">现在的时间是？</button>
// 2.
<button onclick="displayDate()">现在的时间是？</button>  //displayDate()是js函数

常见的 HTML 事件

下面是一些常见的 HTML 事件：

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

例：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 事件</h1>

<button onchange="this.innerHTML=Date()">时间是？</button>

</body>
</html>

改变上例button元素的不同事件：

  • 为onchange时：
  • 为onclick时：鼠标点击按钮后，改变HTML元素的内容
  • 为onmouseover时：鼠标移动到按钮位置后，改变HTML元素的内容
  • 为onmouseout时，鼠标从按钮位置移开后，改变HTML元素的内容
  • 为onkeydown时：（鼠标点击按钮后）按下键盘按键后，改变HTML元素的内容
  • 为onload时：

JavaScript 能够做什么？

事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：

  • 每当页面加载时应该做的事情
  • 当页面被关闭时应该做的事情
  • 当用户点击按钮时应该被执行的动作
  • 当用户输入数据时应该被验证的内容
  • 等等

让 JavaScript 处理事件的不同方法有很多：

  • HTML 事件属性可执行 JavaScript 代码
  • HTML 事件属性能够调用 JavaScript 函数
  • 您能够向 HTML 元素分配自己的事件处理函数
  • 您能够阻止事件被发送或被处理
  • 等等

您将在 HTML DOM 章节中学到更多有关事件和事件处理程序的知识。

avatar
文章
阅读
粉丝