前端三件套:一Javascript体验卡

我不算小饼干

2024-01-13 帮助7人

各位好，我是小饼干🍪，一个编程界的小学生，每天都希望学习一点点编程相关。前端三件套分别是HTML，CSS，Javascript，前端的内容太多本文浅浅地体验一下。感谢各位的驻足，笔芯♥。

这里写目录标题

3.Javascript

3.1Javascript的概述

JavaScrip是一门跨平台，面向对象的脚本语言（不用进行编译），来控制网页行为的，它能使网页可交互。

JavaScrip和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。

3.2Javascript的功能

改变页面内容
修改指定元素的属性值
对表单进行校验

3.3Javascript的引入

3.3.1内部脚本

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间

代码如下：

alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert("hello js1");
</script>
</body>
</html>

效果如下：

从结果可以看到 js 代码已经执行了。

在 HTML 文档中可以在任意地方，放置任意数量的

3.3.2 外部脚本

第一步：定义外部 js 文件。如定义名为 demo.js的文件

项目结构如下：

demo.js 文件内容如下：

alert("hello js");

第二步：在页面中引入外部的js文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="../js/demo.js"></script>
</body>
</html>

外部脚本不能包含 <script> 标签

在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签

<script> 标签不能自闭合

在页面中引入外部js文件时，不能写成 <script src="https://blog.csdn.net/m0_69528918/article/js/demo.js" />。

3.4.Javascript的基础语法

3.4.1书写语法

大部分同Java一样。

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无

如果一行上写多个语句时，必须加分号用来区分多个语句。
注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
注意：JavaScript 没有文档注释
大括号表示代码块

3.4.2输出语句

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 console.log() 写入浏览器控制台

3.4.3变量

1）变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量（这个同go语言一样）。格式 var 变量名 = 数据值;。而在JavaScript 是一门弱类型语言，可以不为变量声明类型。

var test = 20;
test = "张三";

js 中的变量名命名也有如下规则，和java语言基本都相同

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名

JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样

作用域：全局变量
变量可以重复定义

2）其他变量

let关键字也可以来定义变量。所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。

const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

3.4.4数据类型

JavaScript 中提供了两类数据类型：原始类型和引用类型。

使用 typeof 运算符可以获取数据类型

alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型：

number：数字（整数、小数、NaN(Not a Number)）
string：字符、字符串，单双引皆可

==注意：==在 js 中双引号和单引号都表示字符串类型的数据
boolean：布尔。true，false
null：对象为空
```
var obj = null;

alert(typeof obj);//结果是 object
```
- 1
- 2
- 3
为什么打印上面的 obj 变量的数据类型，结果是object；这个官方给出了解释，下面是从官方文档截的图
undefined：当声明的变量未初始化时，该变量的默认值是 undefined

3.4.5运算符

1）和=区别

==：
1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再去比较其值
===：js 中的全等于
1. 判断类型是否一样，如果不一样，直接返回false
2. 再去比较其值

代码：

var age1 = 20;
var age2 = "20";

alert(age1 == age2);// true
alert(age1 === age2);// false

2 ）类型转换

其他类型转为number
- string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
  
  将 string 转换为 number 有两种方式：
  - 使用正号运算符：
```
var str =  "20";
alert(str   1) //21
```
    - 1
    - 2
  - 使用 parseInt() 函数(方法)：
```
var str = "20";
alert(parseInt(str)   1);
```
    - 1
    - 2
  建议使用 parseInt() 函数进行转换。
- boolean 转换为 number 类型：true 转为1，false转为0
```
var flag =  false;
alert(flag); // 0
```
  - 1
  - 2
其他类型转为boolean
- number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
- string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
- null类型转换为 boolean 类型是 false
- undefined 转换为 boolean 类型是 false

使用场景：

在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作，JavaScript也有类型的操作，代码如下：

var str = "abc";

//健壮性判断
if(str != null && str.length > 0){
    alert("转为true");
}else {
    alert("转为false");
}

但是由于 JavaScript 会自动进行类型转换，所以上述的判断可以进行简化，代码如下：

var str = "abc";

//健壮性判断
if(str){
    alert("转为true");
}else {
    alert("转为false");
}

3.4.6流程控制

与Java一模一样

3.4.7函数

JavaScript 函数通过 function 关键词进行定义。

1）定义格式

函数定义格式有两种：

方式1

function 函数名(参数1,参数2..){
    要执行的代码
}

方式2

var 函数名 = function (参数列表){
    要执行的代码
}

注意：
形式参数不需要类型。因为JavaScript是弱类型语言
function add(a, b){
    return a   b;
}
1
2
3

上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。
返回值也不需要定义类型，可以在函数内部直接使用return返回即可

2 ）函数调用

函数调用函数：

函数名称(实际参数列表);

eg：

let result = add(10,20);

注意：

JS中，函数调用可以传递任意个数参数

例如 let result = add(1,2,3);

它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。

3.5Javascript面向对象

3.5.1对象

JavaScript 提供了很多对象供使用者来使用。这些对象总共分类三类

基本对象
BOM 对象
DOM对象

3.5.1.1基本对象 Array

JavaScript Array对象用于定义数组

1）定义格式

数组的定义格式有两种：

方式1

var 变量名 = new Array(元素列表);

例如：

var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据（元素）

方式2
```
var 变量名 = [元素列表];
```
- 1
例如：
```
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）
```
- 1
注意：Java中的数组静态初始化使用的是{ }定义，而 JavaScript 中使用的是 [ ] 定义

2）元素访问

访问数组中的元素和 Java 语言的一样，格式如下：

arr[索引] = 值;

3）特点

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。

例如如下代码：

// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]);  //undefined

上面代码在定义数组中给了三个元素，又给索引是 10 的位置添加了数据 10，那么 索引3 到 索引9 位置的元素是什么呢？我们之前就介绍了，在 JavaScript 中没有赋值的话，默认就是 undefined。

如果给 arr3 数组添加字符串的数据，也是可以添加成功的

arr3[5] = "hello";
alert(arr3[5]); // hello

4）属性

Array 对象提供了很多属性，如下图是官方文档截取的

而我们只讲解 length 属性，该数组可以动态的获取数组的长度。而有这个属性，我们就可以遍历数组了

var arr = [1,2,3];
for (let i = 0; i < arr.length; i  ) {
    alert(arr[i]);
}

5）方法

Array 对象同样也提供了很多方法，如下图是官方文档截取的

push 函数：给数组添加元素，也就是在数组的末尾添加元素

参数表示要添加的元素

// push:添加方法
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5);  //数组的元素是 {1,2,3,10}

splice 函数：删除元素

参数1：索引。表示从哪个索引位置删除

参数2：个数。表示删除几个元素

// splice:删除元素
var arr5 = [1,2,3];
arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素 
alert(arr5); // {2,3}

3.5.1.2 String对象

String对象的创建方式有两种

方式1：
```
var 变量名 = new String(s); 
```
- 1
方式2：
```
var 变量名 = "数组"; 
```
- 1

属性：

String对象提供了很多属性，下面给大家列举了一个属性 length ，该属性是用于动态的获取字符串的长度

函数：

String对象提供了很多函数（方法），下面给大家列举了两个方法。

String对象还有一个函数 trim() ，该方法在文档中没有体现，但是所有的浏览器都支持；它是用来去掉字符串两端的空格。

代码演示：

var str4 = '  abc   ';
alert(1   str4   1);

上面代码会输出内容 1 abc 1，很明显可以看到 abc 字符串左右两边是有空格的。接下来使用 trim() 函数

var str4 = '  abc   ';
alert(1   str4.trim()   1);

输出的内容是 1abc1 。这就是 trim() 函数的作用。

3.5.1.3 自定义对象

在 JavaScript 中自定义对象特别简单，下面就是自定义对象的格式：

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
	...
};

调用属性的格式：

对象名.属性名

调用函数的格式：

对象名.函数名()

接下来通过代码演示一下，让大家体验一下 JavaScript 中自定义对象

var person = {
        name : "zhangsan",
        age : 23,
        eat: function (){
            alert("干饭~");
        }
    };


alert(person.name);  //zhangsan
alert(person.age); //23

person.eat();  //干饭~

3.6，BOM

BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。

BOM 中包含了如下对象：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

BOM 中的 Navigator 对象和 Screen 对象基本不会使用。

3.6.1 Window对象

window 对象是 JavaScript 对浏览器的窗口进行封装的对象。

1) 获取window对象

该对象不需要创建直接使用 window，其中 window. 可以省略。比如我们之前使用的 alert() 函数，其实就是 window 对象的函数，在调用是可以写成如下两种

显式使用 window 对象调用
```
window.alert("abc");
```
- 1
隐式调用
```
alert("abc")
```
- 1

2) window对象属性

window 对象提供了用于获取其他 BOM 组成对象的属性

3) window对象函数

window 对象提供了很多函数供我们使用，而很多都不常用；下面给大家列举了一些比较常用的函数

setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

confirm代码演示：

// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");

alert(flag);

下图是 confirm() 函数的效果。当我们点击 确定 按钮，flag 变量值记录的就是 true ；当我们点击 取消 按钮，flag 变量值记录的就是 false。

定时器代码演示：

setTimeout(function (){
    alert("hehe");
},3000);

当我们打开浏览器，3秒后才会弹框输出 hehe，并且只会弹出一次。

setInterval(function (){
    alert("hehe");
},2000);

当我们打开浏览器，每隔2秒都会弹框输出 hehe。

3.6.2 History对象

History 对象是 JavaScript 对历史记录进行封装的对象。

History 对象的获取

使用 window.history获取，其中window. 可以省略
History 对象的函数

函数作用
back（）加载hsitory列表中的前一个URL
forward（）加载hsitory列表中的下一个URL

函数	作用
back（）	加载hsitory列表中的前一个URL
forward（）	加载hsitory列表中的下一个URL

3.6.6 Location对象

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

1) 获取Location对象

使用 window.location获取，其中window. 可以省略

window.location.方法();
location.方法();

2) Location对象属性

Location对象提供了很对属性。以后常用的只有一个属性 href

代码演示：

alert("要跳转了");
location.href = "https://www.baidu.com";

在浏览器首先会弹框显示 要跳转了，当我们点击了 确定 就会跳转到百度的首页。

3.7DOM

3.7.1 概述

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

封装的对象分为

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

作用：

JavaScript 通过 DOM，就能够对 HTML进行操作了

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

DOM相关概念：

DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分：

核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
XML DOM：针对 XML 文档的标准模型
HTML DOM：针对 HTML 文档的标准模型

该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
- 例如：<img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
- 例如：<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

3.7.2 获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

getElementById()：根据id属性值获取，返回单个Element对象
getElementsByTagName()：根据标签名称获取，返回Element对象数组
getElementsByName()：根据name属性值获取，返回Element对象数组
getElementsByClassName()：根据class属性值获取，返回Element对象数组

3.8 HTML Element对象使用

HTML 中的 Element 元素对象有很多，不可能全部记住，以后是根据具体的需求查阅文档使用。

3.9事件监听

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。

事件监听是JavaScript 可以在事件被侦测到时==执行一段逻辑代码。

3.9.1 事件绑定

JavaScript 提供了两种事件绑定方式：

方式一：通过 HTML标签中的事件属性进行绑定

如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on（）' 表示该点击事件绑定了一个名为 on() 的函数
```
<input type="button" οnclick='on()’>
```
- 1
下面是点击事件绑定的 on() 函数
```
function on(){
	alert("我被点了");
}
```
- 1
- 2
- 3
方式二：通过 DOM 元素属性绑定

如下面代码是按钮标签，在该标签上我们并没有使用 事件属性，绑定事件的操作需要在 js 代码中实现
```
<input type="button" id="btn">
```
- 1
下面 js 代码是获取了 id='btn' 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行
```
document.getElementById("btn").onclick = function (){
    alert("我被点了");
}
```
- 1
- 2
- 3

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("我被点了");
        }
      	//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
        }
    </script>
</body>
</html>

1) 常见事件

比较常用的事件属性

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

3.10RegExp对象

RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。

在 js 中对正则表达式封装的对象就是正则对象。

3.11 正则对象使用

3.11.1 创建对象

正则对象有两种创建方式：

直接量方式：注意不要加引号
```
var reg = /正则表达式/;
```
- 1

创建 RegExp 对象

var reg = new RegExp("正则表达式");

3.11.2 函数

test(str) ：判断指定字符串是否符合规则，返回 true或 false

3.11.3从上面创建正则对象的格式中可以看出不管哪种方式都需要正则表达式，那么什么是正则表达式呢？

正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。

正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。

正则表达式常用的规则如下：

^：表示开始
$：表示结束
[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.：代表任意单个字符，除了换行和行结束符
\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
\d：代表数字字符：相当于 [0-9]

量词：

：至少一个
*：零个或多个
？：零个或一个
{x}：x个
{m,}：至少m个
{m,n}：至少m个，最多n个

这篇好文章是转载于：学新通技术网

前端三件套:一Javascript体验卡

这里写目录标题

3.Javascript

3.1Javascript的概述

3.2Javascript的功能

3.3Javascript的引入

3.3.1内部脚本

3.3.2 外部脚本

3.4.Javascript的基础语法

3.4.1书写语法

3.4.2输出语句

3.4.3变量

1）变量

2）其他变量

3.4.4数据类型

3.4.5运算符

1）和=区别

2 ） 类型转换

3.4.6流程控制

3.4.7函数

1）定义格式

2 ）函数调用

3.5Javascript面向对象

3.5.1对象

3.5.1.1基本对象 Array

1） 定义格式

2） 元素访问

3） 特点

4） 属性

5） 方法

3.5.1.2 String对象

3.5.1.3 自定义对象

3.6，BOM

3.6.1 Window对象

1) 获取window对象

2) window对象属性

3) window对象函数

3.6.2 History对象

3.6.6 Location对象

1) 获取Location对象

2) Location对象属性

3.7DOM

3.7.1 概述

3.7.2 获取 Element对象

3.8 HTML Element对象使用

3.9事件监听

3.9.1 事件绑定

1) 常见事件

3.10RegExp对象

3.11 正则对象使用

3.11.1 创建对象

3.11.2 函数

3.11.3从上面创建正则对象的格式中可以看出不管哪种方式都需要正则表达式，那么什么是正则表达式呢？

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

photoshop蒙版画笔没反应怎么办

2 ）类型转换

1）定义格式

2）元素访问

3）特点

4）属性

5）方法