【JavaWeb】知识总结Ⅱ(JavaScript)

最新推荐文章于 2024-09-14 19:44:09 发布

边境矢梦°

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量1.6k

点赞数 5

分类专栏： Java 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/dandelionl_/article/details/131617027

版权

Java 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

🎄欢迎来到@dandelionl_的csdn博文，本文主要讲解Java web的相关知识🎄

🌈我是dandelionl_，一个正在为秋招准备的学弟🌈
🎆喜欢的朋友可以关注一下，下次更新不迷路🎆

Ps: 月亮越亮说明知识点越重要 (重要性或者难度越大)🌑🌒🌓🌔🌕

🌓三 . 运算符

🌔四. 函数

🌕六. 事件

一. 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 的结果将是：

函数的好处:

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

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

五. 自定义对象

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

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

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

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

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

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

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	浏览器已经完成页面加载