javascript - JavaScript入门_个人文章

来源：恒创科技编辑：恒创科技编辑部

2024-01-29 18:38:59

JavaScript 概述介绍

JavaScript是一门脚本语言，不需要编译就可以直接被浏览器解析执行。它是运行在浏览器中的，每一个浏览器都有自己的JavaScript解析引擎。

JavaScript可以用来增强用户和html页面的交互过程，可以来控制html元素。让页面有一些动态的效果，以此来增强用户的体验。

特点交互性（它可以做的就是信息的动态交互）安全性（不允许直接访问本地硬盘）跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）发展史1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 C– ，后来更名为ScriptEase1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript1996年，微软抄袭JavaScript开发出JScript语言1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

JavaScript基础语法与html结合方式

JavaScript与Html结合的方法总有两种，即——内部JS和外部JS。

内部JS概述

直接在html页面中书写JavaScript代码，所书写的JavaScript代码使用Script标签包围起来。

格式

<script type="text/javascript">
    JS代码
</script>

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!--在内部定义JS-->
    <script type="text/javascript">
        alert("Hello World");
    </script>
</head>
<body>

</body>
</html>

外部JS概述

使用script标签，通过src属性引入外部的js文件。

格式

<script type="text/javascript" src="JS文件地址"></script>

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!--引用外部JS-->
    <script type="text/javascript" src="../JavaScript/one.js"></script>
</head>
<body>

</body>
</html>

script标签可以定义在html页面的任何地方，但是定义的位置会影响其执行顺序。script标签也可以在一个html页面，同时定义多个。

JavaScript注释概述

JavaScript的注释格式和Java的完全一致，无论是单行注释，还是多行注释。

单行注释格式

//注释内容

演示

//这是一个单行注释

多行注释格式

/* 注释内容 */

演示

/*
    这是一个多行注释
 */

JavaScript数据类型概述

JavaScript也同Java一样，数据类型分为两类，即——原始数据类型、引用数据类型。

原始数据类型number类型整数小数NaN（not a number，一个不是数字的数字类型）string类型

单引号与双引号定义的都是字符串类型，Javascript没有字符类型的概念。

boolean类型truefalsenull类型

一个对象为空的占位符。

undefined类型

未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined。

引用数据类型

对象。Javascript中的引用数据类型也都是对象。

JavaScript变量概述

JavaScript与Java中的变量很相识，但又并不完全相同。根本原因为Javascript为弱类型语言，而Java为强类型语言。什么是弱类型语言，什么是强类型语言呢？下面我来简单的说明一下：

弱类型语言：在开辟变量存储空间时，不定义空间将来的存储数据类型，而是可以存放任意类型的数据。强类型语言：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型，只能存储固定类型的数据。

正是由于语言类型的不同，导致了两种语言的变量也有不同的用意，下文我主要表述其不同之处。

格式

//定义变量（默认赋值为undefined）
var 变量名;

//定义并初始化值
var 变量名 = 初始值;

演示

//定义变量（默认赋值为undefined)
var num01;
var num02;
var num03;

//接收number类型值
num01 = 1;
num02 = 3.14;
num03 = NaN;

//定义并初始化string类型值
var str01 = '2';
var str02 = "two";
var str03 = '我是一个二';

//定义并初始化boolean类型值
var flag01 = true;
var flag02 = false;

//定义并初始化null类型值
var obj = null;

//定义并初始化undefined类型值
var und01 = undefined;
var und02;//默认赋值为undefined

新特性

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。

总结：

通常，应该始终使用const声明变量，如果您意识到需要更改变量的值，请返回并将其更改为let。如果项目不支持ES6，再使用var来声明变量。

typeof函数概述

由于Javascript的变量可以存储任意类型的数据，这样就导致我们无法判断一个变量中存储的数据是number类型、string类型的，还是boolean类型的。于是这个时候，我们就需要用到typeof运算符，来帮助我们区分变量中存储的不同数据的类型。

typeof的作用就是传入一个变量，同时返回这个变量所存储数据的数据类型。

格式

typeof(变量名)

演示

//分别判断num01、str01、flag01、obj、und01的数据类型
let type01 = typeof(num01);
let type02 = typeof(str01);
let type03 = typeof(flag01);
let type04 = typeof(obj);
let type05 = typeof(und01);

//打印到html页面上
document.write(type01 + "<br>");
document.write(type02 + "<br>");
document.write(type03 + "<br>");
document.write(type04 + "<br>");
document.write(type05 + "<br><br>");

/* 打印结果：
    number
    string
    boolean
    object
    undefined
*/

JavaScript运算符一元运算符概述

只有一个运算数参与的运算符。

主要成员

++`、`--`、`+(正号)`、`-(负号)

注意事项

关于自增与自减：

a++，先运算，再自增。++a，先自增，再运算。

在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换。如：

String类型转number类型：首先按照字面转化为相应的数字，如果字面值不是数字，则转为NaN（不是数字的数字）。boolean类型转number类型：true转为1，false转为0。算数运算符概述

用于进行一些数学运算的符号。

主要成员

+`、`-`、`*`、`/`、`%

赋值运算符概述

将一个数据赋予另一数据的符号。

主要成员

=`、`+=`、`-=

比较运算符概述

用于数据大小比较的运算符。

主要成员

>`、`<`、`>=`、`<=`、`==`、`===(全等于)

注意事项若类型相同，则直接进行比较。若数据类型不同，先进行类型转换，再比较。===(全等于)：在比较之前，先判断类型，如果类型不一样，则直接返回false。字符串类型之间的数据进行比较，按照字典顺序比较。按位逐一比较，直到得出大小为止。逻辑运算符概述

用于进行逻辑判断的运算符。

主要成员

&&`、`||`、`!

注意事项

在进行逻辑运算时，通常会遇到其他数据类型转为boolean数据。

number转boolean时：0或NaN为假，其他为真string转boolean时：除了空字符串为假，其他都是truenull和undefined转boolean时：都为false对象转boolean时：都为true三元运算符格式

//表达式为真，则返回结果1。为假，则返回结果2
表达式 ? 结果1 : 结果2

演示

let a = 1;
let b = 2;
let c = a > b ? "正确" : "错误";
console.log(c);//错误

控制语句主要成员if...else...whiledo...whileforswitch...case注意事项

switch语句的差异：

在java中，switch语句可以接受的数据类型只有：byte、short、int、char、枚举、String。在Javascript中，switch语句可以接受任意的原始数据类型JS特殊语法语句以;结尾，如果一行只有一条语句则可以省略，但不建议

变量的定义使用

let

关键字，但也可以不使用

使用let关键字定义变量，定义的变量为局部变量。不是用let关键字定义变量，定义的变量为全局变量，但不建议JavaScript对象

JavaScript中的函数相当于Java中的方法，大致可以分为以下几种：

function-方法对象Array-数组对象Date-日期对象Math-数学对象RegExp-正则对象Global-全局对象Number-数字包装对象String-字符串对象Boolean-布尔对象Error-错误对象

下面我会逐个讲解。

function-函数对象创建格式

//创建函数格式一
function 函数名(形参列表) {
    函数体
}

//创建函数格式二
let 函数名 = function(形参列表) {
    函数体
}

//创建函数格式三（不建议使用）
let 函数名 = new function(形参列表,函数体);

演示

//创建函数格式一
function fun01(a, b) {
    console.log("fun01的结果为：" + (a + b));
}
//创建函数格式二
let fun02 = function(a,b){
    console.log("fun02的结果为：" + (a + b));
}

调用格式

函数名(实参列表);

演示

//调用fun01
fun01(10,20);//fun01的结果为：30

//调用fun02
fun02(30,40);//fun02的结果为：70

属性

length：函数形参的个数。

let d = fun01.length;

console.log("函数fun01的形参个数为：" + d);//函数fun01的形参个数为：2

特点创建方法时，形参类型不需要写，返回值类型也不需要写。方法是一个对象，如果定义名称相同的方法，会后者后覆盖前者。在JS中，方法的调用只与方法的名称有关，和参数列表无关。即只要方法名正确，你参数传少、传多，都是可以正常调用方法的。在方法声明中有一个隐藏的内置对象（数组）——arguments，封装所有的实际参数。所以哪怕方法形参只有两个，但是你也可以传入三个，因为实参都是先被arguments数组所接收了。Array-数组对象创建格式

//创建数组格式一
let 数组名 = new Array();

//创建数组格式二
let 数组名 = new Array(默认长度);

//创建数组格式三
let 数组名 = new Array(元素列表);

//创建数组格式四
let 数组名 = [元素列表];

演示

//创建数组格式一
let arr01 = new Array();

//创建数组格式二
let arr02 = new Array(3);

//创建数组格式三
let arr03 = new Array(1,2,3);

//创建数组格式四
let arr04 = [4,5,6,7,8];

遍历格式

数组名[索引];

演示

//遍历数组
for (let i = 0; i < arr04.length; i++) {
    console.log(arr04[i]);
}

属性

length：数组的长度

let num = arr03.length;//获取数组arr03的长度

方法join()

将数组中的元素按照指定的分隔符拼接为字符串

//将数组中的元素按照指定的分隔符拼接为字符串
let arr05 = arr04.join("-");
console.log(arr05);////4-5-6-7-8

push()

向数组的末尾添加一个或更多元素，并返回新的长度。

//向数组的末尾添加一个或更多元素，并返回新的长度
let length = arr04.push(9,10,11);
console.log(length);//8

特点JS中，数组存储元素的类型不是统一的，是可变的。而Java数组只能存储单一类型的元素。JS中，数组长度也不是固定的，数组长度可变。而Java数组长度创建之初就固定，不可改变。Date-日期对象创建格式

let 日期对象名 = new Date();

演示

let newTime = new Date();
document.write(newTime);//Tue Dec 22 2020 22:45:04 GMT+0800 (GMT+08:00)

方法

toLocaleString()：返回当前date对象对应的时间本地字符串格式

let newTime = new Date();
let localeTime = newTime.toLocaleDateString();
document.write(localeTime);//2020/12/22

getTime()：获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

let newTime = new Date();
let MSTime = newTime.getTime();
document.write(MSTime);//1608648497413

Math-数学对象创建

Javascript中的Math也不需要创建了，直接通过Math.方法名()的方式来使用数学对象。

属性

PI：圆周率

let a = Math.PI;
document.write(a);//3.141592653589793

方法random()：返回一个[0,)之间的伪随机数。ceil()：对传入的参数，向上取整。floor()：对传入的参数，向下取整。round()：对传入的参数，四舍五入。RegExp-正则对象创建格式

//创建正则格式一
let 正则对象名 = new RegExp("正则表达式");

//创建正则格式二
let 正则对象名 = /正则表达式/;

演示

//创建正则格式一
let regExp01 = new RegExp("^0\\\\d{2}.[1-9].*6$");
document.write(regExp01);///^0\\d{2}.[1-9].*6$/

//创建正则格式二
let regExp02 = /^0\\d{2}.[1-9].*6$/;
document.write(regExp02);///^0\\d{2}.[1-9].*6$//^0\\d{2}.[1-9].*6$/

规则

规则太多了，说也说不清，来这里学习吧~

点我——>正则学习网站

方法

test()：传入字符串，验证是否符合正则定义的规范

let regExp01 = new RegExp("^0\\\\d{2}.[1-9].*6$");
let result = regExp01.test("3093");
document.write(result);//false

Global-全局对象创建

全局对象也是不需要创建的，Global对象中的方法也不需要对象，就可以直接被调用。如：alert()

方法encodeURI()：将字符串作为 URI 进行编码。encodeURIComponent()：将字符串作为 URI 组件进行编码。编码的字符更多。decodeURI()：对 encodeURI() 函数编码过的 URI 进行解码。decodeURIComponent()：可对 encodeURIComponent() 函数编码的 URI 进行解码。eval()：解析字符串形式的JavaScript代码，并执行它。isNaN()：因为用==与NaN进行比较，哪怕是NaN自身，也只能得到false。使用此方法，可以检查数据本身其是否为NaN。parseInt()：逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number。Number-数字包装对象概述

Number 对象是原始数值的包装对象。

创建格式

let 变量名 = new Number(value);

演示

let num = new Number(40);

方法

toString()：数字转为字符串

let num = new Number(40);
document.write(typeof(num) + "<br/>");//object

let string = num.toString();
document.write(typeof(string));//string

valueof()：拆箱

let num = new Number(40);
document.write(typeof(num) + "<br/>");//object

let number = num.valueOf();
document.write(typeof(number));//number

String-字符串对象概述

String 对象用于处理文本（字符串），和Java的String类几乎一致。

创建格式

//创建string对象格式一
let 变量名 = new String("字符串内容");

//创建string对象格式二
let 变量名 = new String('字符串内容');

//创建string对象格式三
let 变量名 = "字符串内容";

//创建string对象格式四
let 变量名 = '字符串内容';

演示

//创建string对象格式一
let s01 = new String("字符串一");
document.write(s01 + "<br/>");

//创建string对象格式二
let s02 = new String('字符串二');
document.write(s02 + "<br/>");

//创建string对象格式三
let s03 = "字符串三";
document.write(s03 + "<br/>");

//创建string对象格式四
let s04 = '字符串四';
document.write(s04 + "<br/>");

方法

很多，也是基本和Java的差不多。您啊，干脆直接去【菜鸟教程】学得了。JavaScript String 对象 | 菜鸟教程

Boolean-布尔对象概述

Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).

创建格式

//创建Boolean对象格式一
let boolean01 = new Boolean();

//创建Boolean对象格式二
let boolean02 = new Boolean(true);

//创建Boolean对象格式三
let boolean03 = false;

演示

//创建Boolean对象格式一
let boolean01 = new Boolean();
document.write(boolean01 + "<br/>");//false

//创建Boolean对象格式二
let boolean02 = new Boolean(true);
document.write(boolean02 + "<br/>");//true

//创建Boolean对象格式三
let boolean03 = false;
document.write(boolean03 + "<br/>");//false

Error-错误对象概述

error是指程序中的非正常运行状态，在其他编程语言中称为“异常”或“错误”，解释器会为每个错误情形创建并抛出一个Error对象，其中包含错误的描述信息；

ECMAScript定义了六种类型的错误，除此之外，还可以使用Error构造方法创建自定义的Error对象，并使用throw语句抛出该对象。

创建格式

//创建Error对象格式一
let 变量名 = new Error();

//创建Error对象格式二
let 变量名 = new Error(message);

演示

//创建Error对象格式一
let error01 = new Error();

//创建Error对象格式二
let error02 = new Error("空指针异常");

分类ReferenceError：引用错误，要用的东西没找到；TypeError：类型错误，错误的调用了对象的方法；RangeError：范围错误，专指参数超范围；SyntaxError：语法写错了；EvalError：eval()方法错误的使用；URIError：URI地址错误；属性name：设置或返回一个错误名message：设置或返回一个错误信息(字符串)

let error02 = new Error("空指针异常");

let errorName = error02.name = "我的Error对象";
document.write(errorName + "<br/>");//我的Error对象

let errorMessage01 = error02.message;
document.write(errorMessage01 + "<br/>");//空指针异常

error02.message = "德玛西亚的异常";
document.write(error02.message + "<br/>");//德玛西亚的异常

自定义Object对象（扩展）

这个自定义的Object对象，和我们Java中的类很相识，都是由属性和方法(函数)组成的。下面我会来详细介绍一下这个自定Object对象的创建和使用。

创建格式

//创建自定Object对象格式一
let 变量名 = new Object();

//创建自定义Object对象格式二
let 变量名 = {
    属性名: 属性值,
    函数名: 函数体
}

演示

//创建自定Object对象格式一
let obj01 = new Object();

//创建自定义Object对象格式二
let obj02 = {
    name: "Jason",
    age: 21,
    reading: function(){
        document.write("我在读书!");
    }
};

添加、修改值格式

Object对象.属性名 = 属性值;

Object对象.函数名 = 函数体;

演示

obj01.name = "Bernardo Li";

obj01.reading = function () {
    document.write("我也在读书");
}

修改值与添加值一样，修改值无非是在对已存在的值进行赋值。

使用值格式

Object对象.属性名;

Object对象.函数名();

演示

document.write(obj02.name + "<br/>");//Jason
obj02.reading();//我在读书!

BOM对象概述

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

组成

BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。其子对象如下：

document——文档对象Navigator——浏览器对象Screen——显示器对象History——历史记录对象Location——地址栏对象Window-窗口对象创建

首先window对象是不需要手动去创建的。我们可以通过window.方法名()的方式调用它的方法，甚至不需要window.，就可以直接调用其方法。

//window.方法名()
window.alert("我是一个弹窗");

//省略window，直接调用方法
alert("我也是一个弹窗");

属性

我们可以通过BOM对象中的属性来获取其子对象。如下：

Window.Document：获取Document文档对象Window.可省略）。Window.History：获取History历史记录对象（Window.可省略）。Window.Navigator：获取Navigator浏览器对象（Window.可省略）。Window.Screen：获取Screen显示器对象（Window.可省略）。Window.Location：获取Location地址栏对象（Window.可省略）。方法DOM对象前言

我们已经讲解过BOM对象了，知道DOM对象只是BOM顶层对象Window的几个子对象之一。既然DOM对象是BOM对象的子对象，为什么不包含在BOM对象中讲解，而是要单独提取出来进行说明呢？原因就是：DOM对象与History对象、Location对象等虽都为BOM的子对象，但DOM对象在我们日常开发中的使用频率远高于同级的BOM其他子对象。所以我们要对其详细讲解一下。

概述

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

对于Dom对象的理解，可以总结为四点：

Document 它管理了所有的 HTML 文档内容。document 它是一种树结构的文档，有层级关系。它让我们把所有的标签都对象化我们可以通过 document 访问所有的标签对象。

分类

document对象包含了以下几种对象：

Element-元素对象Attribute-属性对象Text-文本对象Comment-注释对象Node-节点对象创建方式一

通过windown对象来获取，格式为：window.document

方式二

window.`可以省略，直接调用document对象，格式为：`document

获取其他对象document.createElement(tagName)：给定的标签名，创建一个标签对象。tagName为要创建的标签名。document.createAttribute(attributeName)：创建一个指定名称的属性，并返回Attr 对象属性。document.createComment(text)：创建注释节点。text为注释文本。document.createTextNode(text)：创建文本节点。text为文本节点的文本。Element-元素对象获取document.getElementById(elementId)：通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值。document.getElementsByName(elementName)：通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值、document.getElementsByTagName(tagName)：通过标签名查找标签 dom 对象，tagname 为标签名。

三个查询方法的优先级问题：
如果有 id 属性，优先使用 getElementById 方法来进行查询如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo01</title>
    <style type="text/css">
        #title {
            font-weight: bold;
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<!--一个表单-->
<form id="table" action="/">
    <span id="title">请选择你的爱好</span><br/>
    <span>Game：</span><input type="checkbox" name="hobbies" value="Game">
    <span>Reading:</span><input type="checkbox" name="hobbies" value="Reading">
    <span>Boxing:</span><input type="checkbox" name="hobbies" value="Boxing"><br/>
    <input type="submit" value="提交">
</form>
</body>
<script type="text/javascript">
    //通过Id获取dom对象
    var tableElement = document.getElementById("table");
    document.write(tableElement + "<br/>");//[object HTMLFormElement]

    //通过name获取dom对象们
    var hobbiesElement = document.getElementsByName("hobbies");
    document.write(hobbiesElement + "<br/>");//[object NodeList]

    //通过tagName获取dom对象们
    var spanElement = document.getElementsByTagName("span");
    document.write(spanElement + "<br/>");//[object HTMLCollection]
</script>
</html>

方法setAttribute("属性名",属性值)：设置调用者的指定属性名的属性值。removeAttribute("属性名")：移除调用者的指定属性。Node-节点对象属性parentNode：获取当前节点的父节点。childNodes：获取当前节点的所有子节点firstChild：获取当前节点的第一个子节点lastChid：获取当前节点的最后一个子节点previousSibling：获取当前节点的上一个节点nextSibling：获取当前节点的下一个节点className：获取或设置标签的 class 属性值innerHTML：获取/设置起始标签和结束标签中的内容innerText：获取/设置起始标签和结束标签中的文本方法appendChild()：向节点的子节点列表的结尾添加新的子节点。removeChild()：删除（并返回）当前节点的指定子节点。replaceChild()：用新节点替换一个子节点。

document对象下的其他对象在这里就不在过多的叙述了，有兴趣的可以去菜鸟教程中学习。

事件概述

某些组件被执行了某些操作后，触发某些代码的执行。

点击事件onclick：单击事件ondblclick：双击事件焦点事件


：失去焦点

- 一般用于表单验证

2. `onfocus`：元素获得焦点

## 加载事件

`onload`：一张页面或一副图像完成加载。

## 鼠标事件

1. `onmousedown`：鼠标按钮被按下。
2. `onmouseup`：鼠标按钮被松开。
3. `onmousemove`：鼠标被移动。
4. `onmouseover`：鼠标移到某元素之上。
5. `onmouseout`：鼠标从某元素移开。

## 键盘事件

1. `onkeydown`：某个键盘按键被按下。
2. `onkeyup`：某个键盘按键被松开。
3. `onkeypress`：某个键盘按键被按下并松开。

## 选择和改变

1. `onchange`：域的内容被改变。
2. `onselect`：文本被选中。

## 表单事件

1. `onsubmit`：确认按钮被点击。

本文地址：https://www.henghost.com/jishu/20112/