开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript入门一（JS基础知识） -> 正文阅读

[JavaScript知识库]JavaScript入门一（JS基础知识）

一、JavaScript是什么

???????JavaScript（简称“JS”）百度解释如下：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

???????简而言之，它是 Web开发领域中的一种强大的编程语言，主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页，其大多数的交互逻辑几乎都是由JavaScript实现的。

二、网页组成

网页组成：对于制作一个网页而言，HTML、CSS、JavaScript分别代表了结构、样式和行为，三者之间的区别如下：

HTML：决定网页的结构和内容，相当于人的身体。
CSS：决定网页呈现给用户的模样，相当于给人穿衣服、化妆。
JavaScript：实现业务逻辑和页面控制，相当于人的各种动作。

三、什么是JS引擎

???????JavaScript内嵌于HTML网页中，通过浏览器内置的JavaScript引擎进行解释执行，把一个原本只用来显示的页面转变成支持用户交互的页面程序，浏览器是访问互联网中各种网站所必备的工具，JavaScript主要就是运行在浏览器中的。那么，什么是JS引擎呢，百度百科是这么解释的。

???????浏览器内核主要包括以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。
???????（1）排版渲染引擎相主要负责取得网页的内容(HTML、XML、图像等)、整理信息，以及计算网页的显示方式，然后输出至显示器。所有的网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要排版渲染引擎，特别是排版渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。简单来说就是用来识别HTML、CSS(解析HTML、CSS，并展示在用户面前)。
???????（2）JavaScript引擎是JavaScript语言的解释器，用来读取网页中的JavaScript代码，对其处理后执行，即用来解析JavaScript代码、渲染JavaScript，JavaScript的渲染速度越快，动态网页的展示也越快。如谷歌的V8引擎

JavaScript代码的执行特点：逐行执行

四、JavaScript特点

1、JavaScript是一种脚本语言，特点是简单、易学、易用，语法规则比较松散，能够快速完成程序的编写工作。
2、可以跨平台，它不依赖操作系统，仅需要浏览器的支持。
3、支持面向对象，可以使JavaScript开发变得快捷高效，降低开发成本。

五、JavaScript的组成

1、ECMAScript：基本语法，是JavaScript的核心，规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。

2、DOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口，可以对页面上的各种元素进行操作。

3、BOM：浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行操作。

六、JavaScript的引用方式

1、行内嵌入式

是将单行或少量的JavaScript代码写在HTML标签的事件属性中。
举例：

单击“欢迎大家”时，弹出一个警告框提示“欢迎欢迎”
<a href="javascript:alert('欢迎欢迎')">欢迎大家</a>
单击网页中的一个按钮时，就会触发按钮的单击事件	 
<button onclick="alert('欢迎')">欢迎大家</button>

alert()：是一个函数,作用是弹出一个消息提示框
onclick：表示当用户点击按钮时

应用：(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
    <a href="javascript:alert('欢迎大家')">欢迎大家</a>
</body>
</html>

在这里插入图片描述
应用：(2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
    <button onclick="alert('欢迎大家')">欢迎大家</button>
</body>
</html>

在这里插入图片描述

注意： 使用html,js时，单引号和双引号都可以运用，也可以嵌套，但是嵌套时，不能用同一种类型的引号，可以双引号套单引号，也可以单引号套双引号。

2、页内嵌入式

使用script标签包裹JavaScript代码，script标签可以写在head或body标签中。
格式如下：

<script type="text/javascript">//在编写JavaScript代码时可以省略type属性。
     js代码
</script>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript">
    function out(){ //function是定义函数语句
        alert("欢迎大家");
    }
</script>
<style>
</style>
<body>
     <button onclick="out()">欢迎大家</button><!--此时引用了函数语句来实现目的：点击欢迎大家弹出消息提示框 -->
</body>
</html>

在这里插入图片描述

3、外部式（外链式）

???????将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用script标签进行引入，适合JavaScript代码量比较多的情况。注意外部式的script标签内不可以编写JavaScript代码。
（1）使用步骤：
第一步：先创建一个js文件(扩展名为.js的文件)；
第二步：使用< script src=“外部的js文件” >标签将外部的js文件链接到页面中。
（2）优点：
利于后期修改和维护，减轻文件体积、加快页面加载速度。

七、变量

1、什么是变量

???????在程序运行期间，随时可能产生一些临时数据，应用程序会将这些数据保存在一些内存单元中。变量就是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。即为在程序运行前后值会发生改变的量。

2、变量的命名规则

（1）必须以字母或下划线开头，中间可以是数字、字母或下划线。
（2）变量名不能包含空格、加、减等符号。
（3）不能使用JavaScript中的关键字作为变量名，如var int。
（4）JavaScript的变量名严格区分大小写，如UserName与username代表两个不同的变量。

3、变量的定义方式

所有的JavaScript变量都由关键字var声明。

var 变量名;

(1) 可以使用一个关键字var同时声明多个变量。

var a,b,c;//同时声明a、b和c三个变量

(2) 可以在声明变量的同时对其赋值，即初始化。

var a=1,b=2,c=3；  //同时声明a、b和c三个变量，并分别对其进行初始化

(3) var语句可以用作for循环和for/in循环的一部分。

for(var i=0;i<10;i++){}

(4) 使用var语句多次声明同一个变量，就相当于对变量的重新赋值。

八、 document对象

1、什么是document对象

???????文档对象，代表了整个页面，如果我们想要在JavaScript中操作某个标签，首先要获取该标签的属性。在JavaScript中通过document对象及其方法可以获取标签属性，如id、name和class等属性。

2、document对象

方法	说明
document.getElementById()	返回对拥有指定id名的第一个对象的引用（简单理解为获取指定id名的标签）
document.getElementsByName()	返回带有指定name属性名的对象集合（简单理解为获取指定name名的标签）
document.getElementsByTagName()	返回带有指定标签名的对象集合（简单理解为获取标签名）
document.getElementsByClassName()	返回带有指定类名的对象集合（简单理解为获取指定class名的标签）