【JavaWeb】知识总结Ⅱ(JavaScript)

简介: 在计算机程序中,被声明的变量经常是不带值的。值可以是需被计算的内容,或是之后被提供的数据,比如数据输入。不带有值的变量,它的值将是 undefined。✨重复声明 JavaScript 变量如果再次声明某个 JavaScript 变量,将不会丢它的值。在这两条语句执行后,变量 carName 的值仍然是 "porsche":

目录


🌓一. JavaScript变量


🌓 二 . JavaScript数据类型


🌓三 . 运算符


1. JavaScript 算数运算符


2. JavaScript 赋值运算符


3. JavaScript 比较运算符


4. JavaScript 逻辑运算符


5. JavaScript 类型运算符


🌔四. 函数


1. JavaScript 函数语法


2. 函数调用


3. 函数返回


🌕五. 自定义对象


🌕六. 事件


1. 常见的 HTML 事件


一. JavaScript变量



✨JavaScript 变量


JavaScript 变量是存储数据值的容器。


var x = 7;
var y = 8;
var z = x + y;

x 存储值 7

y 存储值 8

z 存储值 15

⚠ : JavaScript 变量是存储数据值的容器。


✨声明(创建) JavaScript 变量


在 JavaScript 中创建变量被称为“声明”变量。


您可以通过 var 关键词来声明 JavaScript 变量:


var carName;

声明之后,变量是没有值的。(技术上,它的值是 undefined。)


如需赋值给变量,请使用等号:


carName = "porsche";

您可以在声明变量时向它赋值:


var carName = "porsche";

在上面的例子中,我们创建了名为 carName 的变量,并向其赋值 "porsche"。


然后,我们在 id="demo" 的 HTML 段落中“输出”该值:


实例

<p id="demo"></p>
<script>
var carName = "porsche";
document.getElementById("demo").innerHTML = carName; 
</script>



✨一条语句,多个变量


您可以在一条语句中声明许多变量。


以 var 作为语句的开头,并以逗号分隔变量:


var person = "Bill Gates", carName = "porsche", price = 15000;

✨⚠ : Value = undefined


在计算机程序中,被声明的变量经常是不带值的。值可以是需被计算的内容,或是之后被提供的数据,比如数据输入。


不带有值的变量,它的值将是 undefined。


✨重复声明 JavaScript 变量


如果再次声明某个 JavaScript 变量,将不会丢它的值。


在这两条语句执行后,变量 carName 的值仍然是 "porsche":


实例


var carName = "porsche";

var carName;

✨代数运算跟Java类似

var x = "8" + 3 + 5;
// 结果为835
var x = 3 + 5 + "8";
// 结果为88


二 . JavaScript数据类型

JavaScript 变量可存放数值,比如 100,以及文本值,比如 "Bill Gates"。


在编程中,文本值被称为字符串。


JavaScript 可处理多种数据类型,但是现在,我们只关注数值和字符串值。


字符串被包围在双引号或单引号中。数值不用引号。


如果把数值放在引号中,会被视作文本字符串。


数据类型介绍

数值类型:         number

字符串类型:         string

对象类型 :         object

布尔类型:         boolean

函数类型:         function

特殊值 !!!

undefined         变量未赋初始值时,默认 undefined

null         空值

NaN         Not a Number 非数值

✨JavaScript 拥有动态类型


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


实例


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

✨JavaScript 数组与Java数组类似


JavaScript 数组用方括号书写。


数组的项目由逗号分隔。


下面的代码声明(创建)了名为 cars 的数组,包含三个项目(汽车品牌):


实例


var cars = ["Porsche", "Volvo", "BMW"];

✨JavaScript 对象


JavaScript 对象用花括号来书写。


对象属性是 name:value 对,由逗号分隔。


实例


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

✨typeof 运算符


您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型:


typeof 运算符返回变量或表达式的类型:

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"          // 返回 "string"
typeof 0                   // 返回 "number"
typeof 314                 // 返回 "number"
typeof 3.14                // 返回 "number"
typeof (7)                 // 返回 "number"
typeof (7 + 8)             // 返回 "number"


⚠ : typeof 运算符对数组返回 "object",因为在 JavaScript 中数组属于对象。


✨Undefined


在 JavaScript 中,没有值的变量,其值是 undefined。typeof 也返回 undefined。


实例

var person;                  // 值是 undefined,类型是 undefined。


任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。


实例

person = undefined;          // 值是 undefined,类型是 undefined。

✨Undefined 与 Null 的区别


Undefined 与 null 的值相等,但类型不相等:

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



✨空值


空值与 undefined 不是一回事。


空的字符串变量既有值也有类型。


实例

var car = "";                // 值是 "",类型是 "string"


✨根据是否为基本数据类型将数据分为原始数据和复杂数据两种


typeof 运算符可返回以下原始类型之一:


string

number

boolean

undefined

typeof 运算符可返回以下两种类型之一:


function

object

typeof 运算符把对象、数组或 null 返回 object。


typeof 运算符不会把函数返回 object。

typeof "Bill"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof true                // 返回 "boolean"
typeof false               // 返回 "boolean"
typeof x                   // 返回 "undefined" (假如 x 没有值)
typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array",参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"


三 . 运算符

1. JavaScript 算数运算符

算数运算符用于对数字执行算数运算:


运算符 描述

+ 加法

- 减法

* 乘法

/ 除法

% 取模(余数)

++ 递加

-- 递减

2. JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。


运算符 例子 等同于

= x = y x = y

+= x += y x = x + y

-= x -= y x = x - y

*= x *= y x = x * y

/= x /= y x = x / y

%= x %= y x = x % y

3. JavaScript 比较运算符

运算符 描述

== 等于

=== 等值等型

!= 不相等

!== 不等值或不等型

> 大于

< 小于

>= 大于或等于

<= 小于或等于

? 三元运算符

4. JavaScript 逻辑运算符

运算符 描述

&& 逻辑与

|| 逻辑或

! 逻辑非

5. JavaScript 类型运算符

运算符 描述

typeof 返回变量的类型。

instanceof 返回 true,如果对象是对象类型的实例。

优先级



四. 函数

1. JavaScript 函数语法

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


函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。


圆括号可包括由逗号分隔的参数:


(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中:{}


function name(参数 1, 参数 2, 参数 3) {

   要执行的代码

}

函数参数(Function parameters)是在函数定义中所列的名称。


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


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


在其他编程语言中,函数近似程序(Procedure)或子程序(Subroutine)。



2. 函数调用

函数中的代码将在其他代码调用该函数时执行:


当事件发生时(当用户点击按钮时)

当 JavaScript 代码调用时

自动的(自调用)

3. 函数返回

当 JavaScript 到达 return 语句,函数将停止执行。


如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。


函数通常会计算出返回值。这个返回值会返回给调用者:


实例

计算两个数的乘积,并返回结果:

var x = myFunction(7, 8);        // 调用函数,返回值被赋值给 x
function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}


x 的结果将是:


56

函数的好处:


您能够对代码进行复用:只要定义一次代码,就可以多次使用它。


您能够多次向同一函数传递不同的参数,以产生不同的结果。


五. 自定义对象

在真实生活中,汽车是一个对象。


汽车有诸如车重和颜色等属性,也有诸如启动和停止的方法:


所有汽车都拥有同样的属性,但属性值因车而异。


所有汽车都拥有相同的方法,但是方法会在不同时间被执行。


对象也是变量。但是对象包含很多值。


值以名称:值对的方式来书写(名称和值由冒号分隔)。


JavaScript 对象是被命名值的容器。(意思是 值放在容器中被命名的名字就是对象, 我们可以通过这个名字来找到容器, 从而知道它的值)


对象属性

(JavaScript 对象中的)名称:值对   被称为属性。

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


属性 属性值

firstName Bill

lastName Gates

age 62

eyeColor blue

对象方法

对象也可以有方法。


方法是在对象上执行的动作。


方法以函数定义被存储在属性中。


属性 属性值

firstName Bill

lastName Gates

age 62

eyeColor blue

fullName function() {return this.firstName + " " + this.lastName;}

方法是作为属性来存储的函数。


实例

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



✨this 关键词


在函数定义中,this 引用该函数的“拥有者”。


在上面的例子中,this 指的是“拥有” fullName 函数的 person 对象。


换言之,this.firstName 的意思是 this 对象的 firstName 属性。


✨对象定义


我们定义(创建)了一个 JavaScript 对象:


实例

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


空格和折行都是允许的。对象定义可横跨多行:


实例

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


✨访问对象属性


您能够以两种方式访问属性:

objectName.propertyName


或者

objectName["propertyName"]


如果您不使用 () 访问 fullName 方法,则将返回函数定义:


实例

name = person.fullName;


六. 事件

事件介绍

1. 事件是电脑输入设备与页面进行交互的响应

2. 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行

1. 常见的 HTML 事件

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


事件 描述

onchange HTML 元素已被改变

onclick 用户点击了 HTML 元素

onmouseover 用户把鼠标移动到 HTML 元素上

onmouseout 用户把鼠标移开 HTML 元素

onkeydown 用户按下键盘按键

onload 浏览器已经完成页面加载


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


每当页面加载时应该做的事情

当页面被关闭时应该做的事情

当用户点击按钮时应该被执行的动作

当用户输入数据时应该被验证的内容

等等

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


HTML 事件属性可执行 JavaScript 代码

HTML 事件属性能够调用 JavaScript 函数

您能够向 HTML 元素分配自己的事件处理函数

您能够阻止事件被发送或被处理


相关文章
|
5月前
|
JavaScript 前端开发 C++
Javaweb之javascript的小案例的详细解析
1.5.4 案例 1.5.4.1 需求说明 鲁迅说的好,光说不练假把式,光练不说傻把式。所以接下来我们需要通过案例来加强对于上述DOM知识的掌握。需求如下3个:
56 0
|
5月前
|
XML JavaScript 前端开发
Javaweb之javascript的DOM对象的详细解析
1.5.3 DOM对象 1.5.3.1 DOM介绍 DOM:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
61 0
|
5月前
|
JavaScript 前端开发 Java
Javaweb之javascript的详细解析
JavaScript html完成了架子,css做了美化,但是网页是死的,我们需要给他注入灵魂,所以接下来我们需要学习JavaScript,这门语言会让我们的页面能够和用户进行交互。
79 0
|
5月前
|
JavaScript 前端开发 C++
Javaweb之javascript事件的详细解析
1.6 JavaScript事件 1.6.1 事件介绍 如下图所示的百度注册页面,当我们用户输入完内容,百度可以自动的提示我们用户名已经存在还是可以使用。那么百度是怎么知道我们用户名输入完了呢?这就需要用到JavaScript中的事件了。
66 0
|
27天前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS
|
2月前
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
37 11
|
1月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
20 1
|
1月前
|
自然语言处理 前端开发 JavaScript
Javaweb之javascript的详细解析
通过明确JavaScript的定位,掌握其核心概念和相关技术栈,在实现交互丰富的Web应用时,JavaScript就能够发挥它不可替代的作用。随着前后端分离趋势的推进,JavaScript在现代 Web 开发中变得更加重要,不仅限于传统的 JavaWeb 应用,而是广泛应用于各种类型的前端项目。
16 0
|
5月前
|
XML 安全 Java
JavaWeb有机果蔬商城系统有机蔬菜水果商城系统(分前后台javaWeb+jsp+jstl+css+js+mysql)
JavaWeb有机果蔬商城系统有机蔬菜水果商城系统(分前后台javaWeb+jsp+jstl+css+js+mysql)
|
5月前
|
JavaScript 前端开发 C++
Javaweb之javascript的BOM对象的详细解析
1.5.2 BOM对象 接下来我们学习BOM对象,BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。
52 0