【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个:
39 0
|
5月前
|
XML JavaScript 前端开发
Javaweb之javascript的DOM对象的详细解析
1.5.3 DOM对象 1.5.3.1 DOM介绍 DOM:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
46 0
|
5月前
|
JavaScript 前端开发 Java
Javaweb之javascript的详细解析
JavaScript html完成了架子,css做了美化,但是网页是死的,我们需要给他注入灵魂,所以接下来我们需要学习JavaScript,这门语言会让我们的页面能够和用户进行交互。
52 0
|
5月前
|
JavaScript 前端开发 C++
Javaweb之javascript事件的详细解析
1.6 JavaScript事件 1.6.1 事件介绍 如下图所示的百度注册页面,当我们用户输入完内容,百度可以自动的提示我们用户名已经存在还是可以使用。那么百度是怎么知道我们用户名输入完了呢?这就需要用到JavaScript中的事件了。
45 0
|
4月前
|
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将浏览器的各个组成部分封装成了对象。
31 0
|
8月前
|
JSON JavaScript 前端开发
JavaWeb第三章:JavaScript的全面知识
JavaWeb第三章:JavaScript的全面知识
76 0
|
8月前
|
存储 JavaScript 前端开发
【JavaWeb】知识总结Ⅲ(JavaScript中的String字符串)
原始值,比如“Bill Gates”,无法拥有属性和方法(因为它们不是对象)。 但是通过 JavaScript,方法和属性也可用于原始值,因为在执行方法和属性时 JavaScript 将原始值视为对象。 解释上句话, 原始值无法拥有属性和方法, 但是方法和属性可以用于原始值, 因为在执行方法和属性时, JavaScript将原始值视为对象, 字符串到方法, 属性是不行的, 但是方法, 属性到字符串原始值是可行的.
|
8月前
|
XML JavaScript 前端开发
【JavaWeb】知识总结Ⅳ(JavaScript中的DOM)
JavaScript 能改变页面中的所有 HTML 元素 JavaScript 能改变页面中的所有 HTML 属性 JavaScript 能改变页面中的所有 CSS 样式 JavaScript 能删除已有的 HTML 元素和属性 JavaScript 能添加新的 HTML 元素和属性 JavaScript 能对页面中所有已有的 HTML 事件作出反应 JavaScript 能在页面中创建新的 HTML 事件
|
12天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握