【JavaScript】

最新推荐文章于 2024-05-18 21:57:13 发布

qq_66225710

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量500

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_66225710/article/details/125692549

版权

JavaScript

01JavaScript概述

什么是JavaScript

JavaScript是运行在浏览器上的脚本语言。简称JS。
JavaScript和java没有任何关系，只是语法类似。JavaScript运行在浏览器中，代码由浏览器解释后执行。而Java运行在JVM中。
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

02HTML中嵌入JavaScript

1.HTML嵌入JavaScript的第一种方式

在JS中有很多事件，其中一个事件叫做：鼠标单击，单词：click。并且任何事件都会对应一个事件句柄叫做：onclick。

【注意：事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on】
事件是以HTML标签的属性存在的。

οnclick="js代码“，执行原理是什么？

页面打开的时候，js代码并不会执行，只是把这段代码注册到按钮的click事件上了。
等这个按钮发生click之后，注册在onclick后面的js代码会被浏览器自动调用。

示例


```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中嵌入JavaScript的第一种方式</title>
</head>
<body>
    <!--点击按钮弹出消息框-->
    <input type="button" value="Hello" onclick="window.alert('Hello JavaScript!')"/>
    <input type="button" value="Hello" onclick="window.alert('Hello XingKong!')"/>
    <input type="button" value="Hello" onclick="window.alert ('Hello MengYangChen');
                                                alert('Hello MengYang')
                                                alert('Hello Meng')"/>
</body>
</html>

2.HTML嵌入JavaScript的第二种方式

采用脚本块的方式
暴露在脚本块中的程序，在页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行。（不需要事件）
JavaScript脚本块可以出现在任何位置，并且可以出现多次。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML嵌入JavaScript的第二种方式</title>
</head>
<body>
    <input type="button" value="我是一个。。"/>
    <script type="text/javascript">
        window.alert("hello world!");
    </script>
    <input type="button" value="我是一个按钮对象"/>
</body>
</html>

3.HTML嵌入JavaScript的第三种方式（推荐）

引入外部的js文件

引入js脚本文件的语句：

同一个脚本文件可以引入多次。
脚本文件直接写语句就好了。

<script type="text/javascript" src="路径和文件名“></script>

结束的< /script>标签必须有，不能用反斜杠取代，引入文件时，其中间的代码不会执行。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中嵌入JavaScript的第三种方式</title>
</head>
<body>
<script type="text/javascript" src="file/JS1.js"></script>
</body>
</html>

03 JavaScript标识符和变量

1.标识符的命名规则跟Java相同。

所有 JavaScript 变量必须以唯一的名称的标识；
这些唯一的名称称为标识符；
标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）；

提示：JavaScript 标识符对大小写敏感。

2.变量

JavaScript 变量是存储数据值的容器

声明变量

var 变量名；

赋值

变量名=值

javascript是一种弱类型语言，没有编译阶段，一个变量可以随意给其赋值。什么类型的都可以。
变量没有手动赋值时，默认赋值为：undefined。
未声明变量使用会报错。

3.局部变量和全局变量

类似C语言

全局变量在函数体之外声明。浏览器关闭的时候才会销毁。
局部变量:在函数体内部声明。在函数体执行完后才销毁。
在 JavaScript 函数中声明的变量，会成为函数的局部变量。

当一个变量声明的时候没有使用var关键字，那么不管这个变量是在哪里声明的，都是全局变量。

04 函数的定义和使用

JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。

1.JS中的函数怎么定义呢？

语法格式

function 函数名（形式参数列表）
{
函数体；
}
函数名=function(形式参数列表）
{
函数体；
}

JS中的函数不需要指定返回值类型，返回什么类型的数据都没问题。

函数的形参也不需要声明

示例

<script>
function sum (a,b){
alert(a+b);
}
//或者
sum=function(a,b){
alert(a+b);
}
</script>

2.JS的函数不能重载

如果出现同名函数，后面定义的函数会把前面定义的函数覆盖。

因此JS函数不能重名。

分辨函数就是根据函数名来分辨。

() 运算符调用函数

toCelsius() 引用的是函数结果

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

document.getElementById("demo").innerHTML = toCelsius(77);

而 toCelsius 引用的是函数对象

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

document.getElementById("demo").innerHTML = toCelsius;

05 JS的数据类型

1.JS数据类型有:原始类型，应用类型。
原始类型：Undefined,Number,String,Boolean,Null
引用类型:Object以及子类。

2.在ES6规范后，又基于以上6种类型添加了一种新的类型：Symbol。

3.JS中有一个运算符叫做typeof,这个运算符可以在程序的运行阶段动态地获取变量的数据类型。

typeof运算符的语法格式：

typeof 变量名

typeof运算符的运算结果时以下6个字符串(全小写）结果之一：

“undefined"
“number”
“string”
“boolean”
“object”
“function”

var d=null;
alert(typeof d);//“object”

比较字符串是否相等用双等号

4.Undefined数据类型只有一个值。这个值就是undefined，当一个变量没有手动赋值，系统默认赋值为undefined，当然也可以手动赋值为undefined。

number数据类型

NaN，表示Not a Number不是一个数字，但是属于Number类型。
Infinity，表示无穷大

0,-1,123,…小数，复数，无穷大都是属于number类型。

除数为0时，结果为无穷大。

isNaN（数据）：结果为true表示不是一个数字。
parseInt()：可以将字符串自动转换成数字。保留Int
parseFloat()：将字符串转换成数字。
Math.Ceil()：向上取整。2.1会变为3。

boolean数据类型

布尔值只有两个值：true 或 false

在boolean类型中有一个Boolean（）函数，会将非boolean类型，转换成boolean类型。
当某个地方一定是boolean类型时，会自动转换成boolean类型 if后面的括号。
NaN,0,null,undefined会自动转换成false.

String数据类型

1.在JS当中字符串可以使用单引号和双引号。

2.在JS当中，怎么创建字符串对象

var s=“sag”;（小String，属于String类型）
var a2= new String(“ab”);（大String，属于Object类型）

String是一个内置的类，可以直接使用。

无论是小String还是大Sting字符串的长度相同。其中由一个length属性求长度(x.length)

常用函数

indexof: 获取指定字符串在当前字符串中第一次出现的索引
lastIndexof
replace
substr
substring
toLowerCase
toUpperCase
spilt 拆分字符串

例如:

alert(“fasdf".indexof(“sdf”));

replace只替换最前面一个子字符串
如果想全部替换需要使用正则表达式。

substr和substring的区别。

substr(startIndex length)

substring(startIndex endIndex)左闭右开。

Object数据类型

1.首先Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
2.Object的prototype属性
作用：给类动态地扩展属性和函数。
3.Object类的函数

toString()
valueof()
toLocalString()

4.在JS中定义的类默认继承Object的属性和函数。

06 JS中怎么定义类？怎么new对象？

定义类

语法

class ClassName {
  constructor() { ... }
}

始终添加名为 constructor() 的方法

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}
JavaScript 类不是对象。

它只是 JavaScript 对象的模板。

new对象

有不同的方法来创建对象：

定义和创建单个对象，使用对象文字。
定义和创建单个对象，通过关键词 new。
定义对象构造器，然后创建构造类型的对象。

创建对象的语法

new 构造函数名（实参）；//构造函数和类名一致

07 null,undefined,NAN的区别

1.数据类型不一致

alert(typeof null);//Object
alert(typeof NaN);//number
alert(typeof undefined);//undefined

2.null和undefined可以等同

alert(null=NaN);//false
alert(null=undefined);//true
alert(underfined=NaN);false

在JS当中有两个比较特殊的运算符：

1.“==” :等同运算符：只判断值是否相等（双等号）
2.“= = =”：全等运算符：既判断值是否相等，又判断数据类型是否相等。（三等号）

alert(11 == ture);//true
alert(11=== ture);//false

08 JS的常用事件

1.blur失去焦点
光标失去
2.focus获得焦点
光标获得

3.change 下拉列表选中改变，或文本框内容改变。

4.click鼠标单击
5.dbclick鼠标双击

6.keydown键盘按下
7.keyup键盘弹起

8.load页面加载完毕
页面全部加载完毕后，即所有的HTML元素加载完毕后发生。

9.mousedown鼠标按下
10.mouseover鼠标经过
11.mousemove鼠标移动
12.mouseout鼠标离开
13.mouseup鼠标弹起

14.reset表单重置
15.submit表单提交

16.select文本被选定
选中文本

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
onxxx这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在）

09 JS代码的执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js代码的至此那个顺序</title>
</head>
<body>
<script type="text/javascript">
   document.getElementById("btn").onclick=function () {
        alert("hello ");
   }
</script>
<input type="button" value="hello" id="btn">
</body>
</html>

会报错：在id=”btn“的元素还没有加载到内存时就执行了document.getElementById(“btn”).onclick=function () {
alert(“hello”);
}

改进：
页面加载完毕后，load事件发生。然后执行read()函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js代码的至此那个顺序</title>
</head>
<body onload="read()">
<script type="text/javascript">
    function read() {
        document.getElementById("btn").onclick = function () {
            alert("hello")
        }
    }
</script>
<input type="button" value="hello" id="btn">
</body>
</html>

10 Js捕捉回车键

在网页登录账户时，将用户名和密码填写完成后需要用回车键确定登录。

回车键的键值：13
ESC键的键值：27

对于“键盘事件对象”都有keyCode属性来获取键值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>捕捉回车键</title>
</head>
<body>
    <script type="text/javascript">
            window.onload=function () {
                var usernameElt =document.getElementById("username");
                usernameElt.onkeydown=function (event) {
                    //获取键值
                    if(event.keyCode==13){
                        alert("登录中...");
                    }
                }
            }
    </script>
    <input type="text" id="username">
</body>
</html>

11 正则表达式

1.什么是正则表达式

正则表达式：Regular Expression
正则表达式主要用在字符串格式匹配方面。

2.正则表达式实际上是一门独立的学科，在Java语言中支持，c语言中也支持，javascript中也支持。

常见的正则表达式符号

.    匹配除换行符以外的任意字符
\w   匹配字母或数字或下划线或汉字
\s   匹配任意的空白符
\d   匹配数字
\b   匹配单词的开始或结束
^    匹配字符串的开始
$    匹配字符串的结束

\W   匹配不是字母或数字或下划线或汉字的字符
\S   匹配任意不是空白符的字符
\D   匹配任意非数字的字符
\B   匹配不是单词的开始或结束的位置
[^x]  匹配除了x以外的任意字符
[^aeiou]  匹配除了aeiou这几个字母以外的任意字符


* 重复0次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,}重复n次或更多次
{n,m}重复n到m次

[1-9] 表示1到9中的任意字符
[A-Za-z0-9] 表示A-Z,a-z,0-9中的任意一个字符。
[A-Za-z0-9-] 表示A-Z,a-z,0-9,-,中的任意一个字符。

javascript当中，怎么创建正则表达式对象

第一种创建方式：

var fox=/正则表达式/flags;

第二种创建方式：

var fox=new RegExp("正则表达式","flags");

关于flags:
g:全局匹配
i:忽略大小写
m:多行搜索（ES规范制订以后才支持使用m)当前面是正则表达式的时候，m不能使用。

正则表达式的text（）方法。
ture/false=正则表达式.text(用户填写的字符串）;
ture:字符串格式匹配成功
false:字符串格式匹配失败