当前位置：首页 > ops >正文

【Java Web】速通JavaScript

ops 2025/7/20 8:17:42

参考笔记：JavaWeb 速通JavaScript_javascript 速通-CSDN博客

一、JavaScript快速入门

1. 基本介绍

2. JavaScript特点

3. JavaScript的引入方式(重要)

3.1 写在script标签中

3.2 以外部文件方式引入

二、JS的数据类型

1. 变量

2. 常用数据类型

3.特殊值

三、JS的运算符

1. 算数运算符

2. 关系运算符

3. 逻辑运算符 || &&

4.三目运算符

四、JS的分支结构和循环结构

1. 分支结构

2. 循环结构

五、JS中的数组

1. 特点

2. 创建方法

3. 遍历方法

六、JS的函数

1. 简介

2. 声明方式

3. 使用的注意事项

七、JS事件

1. 什么是事件

2. 常见事件

3. 事件的绑定

3.1 通过属性绑定

3.2 通过DOM编程绑定

4. 事件的案例演示

4.1 onclick

4.2 onblur

4.3 onchange

八、JS创建对象的2种方式

九、BOM、DOM编程

一、JavaScript快速入门

1. 基本介绍

① JavaScript 主要用于页面元素的动态处理，能改变 HTML 的内容和属性，能改变 HTML 的样式(CSS)，能完成页面的数据验证，能控制网页的行为等等

② 关于 JS 代码：

JS 代码通常写在 <head></head> 内的 <script></script> 标签中

<script> 标签中的属性 type="text/javascript" 可加可不加

JS语句可不写分号 " ；"

2. JavaScript特点

脚本语言

JavaScript 是一种解释型的脚本语言。不同于 C、C++、Java 等语言需要先编译后执行， JavaScript 不会产生编译出来的字节码文件（ Java 文件编译后会生成 .class 字节码文件），而是在程序的运行过程中对源文件逐行进行解释

基于对象

JavaScript 是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript 能够实现封装，可以模拟继承(但不是真正的继承)，不支持多态
var i = 10;
var str = "小马"
弱类型

JavaScript 中有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型

JavaScript 的语法规范性没有那么强，约束性较弱

3. JavaScript的引入方式(重要)

3.1 写在script标签中

虽然可以在 html 文件任意位置嵌入 <script> 标签，但通常还是写在 <head> 中，因为 html 文件的执行顺序是从上到下

案例演示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><script>function suprise(){alert("Hello,我是惊喜")}</script></head><body><button onclick="suprise()">点我有惊喜</button></body>
</html>

缺陷 + 解决方案：

缺陷：仅能在当前页面上使用，代码复用度不高

解决方案：将脚本放在独立的 js 文件中，通过 script 标签引入外部脚本文件

3.2 以外部文件方式引入

方法：

         在 <script></script> 标签中添加 src 属性

        src 属性指明 .js 文件的路径，相对路径和绝对路径均可

案例演示：

第 1 步：抽取代码到独立的 js 文件中

第 2 步：在 html 文件中,通过 <script> 标签的 src 属性引入外部 js 文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><script src="../js/button.js"></script><!--可引入多个外部JS文件--></head><body><button onclick="suprise()">点我有惊喜</button><button onclick="scare()">点我有惊吓</button></body>
</html>

运行效果：

二、JS的数据类型

1. 变量

变量是用于存储信息的"容器"。JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。JS变量对大小写敏感。

内存指浏览器的内核空间。变量指向某一个内存空间
如下图所示 :

2. 常用数据类型

        ① number：数值类型。JS 中数值类型统一为 number ，包括整数和小数

        ② string：字符串类型。和 Java 的 String 相似，但 JS 中不严格区分单双引号，都可以用于表示字符串

        ③ boolean：布尔类型。在 JS 的 if 语句中，非空字符串会被转换为 '真'，非零数字也会被认为是 '真'

        ④ Object：引用数据类型。各种对象和数组在 JS 中都是 Object 类型

        ⑤ function：函数类型。 JS 中的各种函数属于 function 数据类型

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript">var i = 10console.log(typeof i)//numberi = "asf"console.log(typeof i)//stringi = falseconsole.log(typeof i)//booleani = new Object()console.log(typeof i)//Objecti = [1,2,3];console.log(typeof i)//Objectfunction say(){alert("hello")}console.log(typeof say)//function</script>
</head>
<body>
</body>
</html>

运行效果：

3.特殊值

        有 3 个比较特殊的值，如下：

        ① undefined：只声明但未作初始化的变量，默认为 undefined 类型，其变量值也为 undefined

        ② null：在 JS 中，如果给一个变量赋值 null ，其数据类型是 Object ，变量值是 null

        ③ Nan：非数值，全称是 Not a Number ，一般进行错误的数学运算会导致变量值变为Nan

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>special value</title><script type="text/javascript">var v1;console.log("v1 = " + v1 + ", v1 type: " + typeof v1);var v2 = null;console.log("v1 = " + v2 + ", v1 type: " + typeof v2);var v3 = 5 * '小马';console.log("v3 = &#

查看全文

http://www.xdnf.cn/news/9657.html