第五周预习——Javascript基础语法

最新推荐文章于 2022-05-20 17:38:44 发布

是菁菁哦

最新推荐文章于 2022-05-20 17:38:44 发布

阅读量300

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/jingjingxuaokeai/article/details/124442730

版权

一.JavaScript简介

1.什么是JavaScript

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

2.JavaScript作用

直接写入 HTML 输出流
对事件的反应
改变 HTML 内容
改变 HTML 图像
改变 HTML 样式
验证输入

二.JavaScript用法

HTML 中的脚本必须位于 < script > 与 < /script > 标签之间。
脚本可被放置在 HTML 页面的 < body > 和 < head > 部分中。

1.< script > 标签

如需在 HTML 页面中插入 JavaScript，请使用 < script > 标签。
< script > 和 < /scrip t> 会告诉 JavaScript 在何处开始和结束。
< script > 和 < /script > 之间的代码行包含了 JavaScript。
可以在 HTML 文档中放入不限数量的脚本，脚本可位于 HTML 的 < body > 或 < head > 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 < head > 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

< head >标签中的JavaScript

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript"> /*type属性可以省略*/
    </script>
</head>
<body>
</body>
</html>

< body >标签中的JavaScript

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<script type="text/javascript"></script>
</body>
</html>

注：把脚本置于 < body > 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

2.外部脚本

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码，外部 JavaScript 文件的文件扩展名是 .js，如需使用外部文件，请在 < script > 标签的 “src” 属性中设置该 .js 文件。可以将脚本放置于 < head > 或者 < body >中，放在 < script > 标签中的脚本与外部引用的脚本运行效果完全一致。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="myJs.js"></script>
</head>
<body>
</body>
</html>

外部脚本的优势

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

外部脚本不能包含 < script >标签，如需向一张页面添加多个脚本文件，要使用多个 script 标签。

三.JavaScript输出

JavaScript 没有任何打印或者输出的函数。

1.JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

1.使用 window.alert() 弹出警告框

可以弹出警告框来显示数据：

<!DOCTYPE html>
<html>
<body>
    <script>
        window.alert(4 + 6);
    </script>
</body>
</html>

2.使用 document.write() 方法将内容写到 HTML 文档中

出于测试目的，使用 document.write() 比较方便

<!DOCTYPE html>
<html>
<head>
	<script>
		document.write(4+6);
	</script>
</head>
</html>

使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

3.使用 innerHTML 写入到 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>

以上 JavaScript 语句（在 < script > 标签中）可以在 web 浏览器中执行：
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

4.使用 console.log() 写入到浏览器的控制台

在浏览器中，可以使用 console.log() 方法来显示数据。

<!DOCTYPE html>
<html>
<head>
	<script>
		console.log(5 + 6);
	</script>
</head>
</html>

四.JavaScript 语法

1.JavaScript 字面量

在编程语言中，一般固定值称为字面量，如 3.14。

数字字面量可以是整数或者是小数或者是科学计数。
字符串字面量可以使用单引号或双引号。
表达式字面量用于计算。
数组字面量定义一个数组。
对象字面量定义一个对象。
函数字面量定义一个函数。

2.JavaScript 变量

在编程语言中，变量用于存储数据值。JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值。变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。
变量是一个名称。字面量是一个值。

3.JavaScript 操作符

JavaScript使用算术运算符来计算值
JavaScript使用赋值运算符给变量赋值

4.JavaScript关键字

JavaScript 关键字用于标识要执行的操作。和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用，例如var 关键字告诉浏览器创建一个新的变量。
在这里插入图片描述

5.JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略。

6.JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等。

7.JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用，
引用一个函数 = 调用函数(执行函数内的语句)。

8.JavaScript 字符集

JavaScript 使用 Unicode 字符集，Unicode 覆盖了所有的字符，包含标点等字符。

五.JavaScript 语句

1.JavaScript 语句

JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

<!DOCTYPE html>
<html>
<head>
	<script>
		ocument.getElementById("demo").innerHTML = "hello";
	</script>
</head>
</html>

2.JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。

3.JavaScript 代码块

JavaScript 可以分批地组合起来。代码块以左花括号开始，以右花括号结束。代码块的作用是一并地执行语句序列。

4.JavaScript 语句标识符

JavaScript 语句通常以一个语句标识符为开始，并执行该语句。语句标识符是保留关键字不能作为变量名使用。
在这里插入图片描述

5.对代码进行折行

可以在文本字符串中使用反斜杠对代码行进行换行，例如：

<!DOCTYPE html>
<html>
<head>
	<script>
		document.write("hello\
			word!");
	</script>
</head>
</html>

六.JavaScript 数据类型

JavaScript 数据类型分为两类：

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

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

1.JavaScript 字符串

字符串是存储字符的变量。字符串可以是引号中的任意文本，可以使用单引号或双引号，可以在字符串中使用引号，只要不匹配包围字符串的引号即可，也可以在字符串添加转义字符来使用引号。

1.字符串长度

可以使用内置属性 length 来计算字符串的长度。

2.特殊字符

在这里插入图片描述

3.字符串属性

在这里插入图片描述

4.字符串方法

在这里插入图片描述

2.JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。

3.JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

4.JavaScript数组

用方括号书写，数组的项目由逗号分隔，数组索引基于零。

5.Undefined 和 Null

Undefined 这个值表示变量不含有值，可以通过将变量的值设置为 null 来清空变量。

七.JavaScript 对象

JavaScript 对象是拥有属性和方法的数据，在 JavaScript中，几乎所有的事物都是对象，可以使用字符来定义和创建 JavaScript 对象。

1.对象属性

可以说 “JavaScript 对象是变量的容器”，但我们通常认为 “JavaScript 对象是键值对的容器”。键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为对象属性。JavaScript 对象是属性变量的容器。

2.访问对象属性

方式：“对象名.属性名”或“对象名[“属性名”]”

3.对象方法

对象的方法定义了一个函数，并作为对象的属性存储。对象方法通过添加 () 调用 (作为一个函数)。

4.访问对象方法

方法：对象名.方法名()返回函数值，不使用 () 访问 fullName 方法，则将返回函数定义

八.JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

1.函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function，当调用一函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

2.函数分类

有参函数，无参函数
有返回值函数，无返回值函数

3.局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是局部的），可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，局部变量就会被删除。

4.全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

5.JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除，全局变量会在页面关闭后被删除。

九.JavaScript 作用域

作用域是可访问变量的集合。在 JavaScript 中, 对象和函数同样也是变量。作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。

十.JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情，当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

1.HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。
实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击。

常见的HTML事件

在这里插入图片描述

2.作用

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
可以使用多种方法来执行 JavaScript 事件代码：
HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
可以为 HTML 元素指定自己的事件处理程序
可以阻止事件的发生。

是菁菁哦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第五周预习——Javascript基础语法

一.JavaScript简介1.什么是JavaScriptJavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。2.JavaScript作用直接写入 HTML 输出流对事件的反应改变 HTML 内容改变 HTML 图像改变 HTML 样式验证输入二.JavaScript用法HTML 中的脚本必须位于 < script > 与 < /script > 标签之间。
复制链接

扫一扫