文章目录

一、JavaScript是什么
二、网页组成
三、什么是JS引擎
四、JavaScript特点
五、JavaScript的组成
六、JavaScript的引用方式
- 1、行内嵌入式
- 2、页内嵌入式
- 3、外部式（外链式）
七、变量
- 1、什么是变量
- 2、变量的命名规则
- 3、变量的定义方式
- 4、变量的使用
八、 document对象
- 1、什么是document对象
- 2、document对象

一、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语句多次声明同一个变量，就相当于对变量的重新赋值。

4、变量的使用

分为两步：声明变量和变量赋值
举例如下;

声明变量
var age;//声明一个名称为age的变量
变量赋值
age = 10;//为age变量赋值
变量初始化
var age = 18;

八、 document对象

1、什么是document对象

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

2、document对象

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

JavaScript入门一（JS基础知识）相关推荐

JavaScript入门，js基础教学
JS入门 js的书写位置内嵌式使用的是Script标签,该标签可以写在html文档中的任何位置 [强调]一般情况下,我们应该将其写在head标签中. 外链式通过script标签的src属性,引入 ...
php插入js教程,JavaScript_JavaScript入门教程(2) JS基础知识，在什么地方插入 JavaScript　　Ja - phpStudy...
JavaScript入门教程(2) JS基础知识在什么地方插入 JavaScript JavaScript 可以出现在 HTML 的任意地方.使用标记,你可以在 HTML 文档的任意地方插入 Jav ...
[数据与分析可视化] D3入门教程1-d3基础知识
d3.js入门教程1-d3基础知识文章目录 d3.js入门教程1-d3基础知识 1 HTML介绍 1.1 什么是HTML? 1.2 自定义文档样式CSS 1.3 构建svg图形 2 d3绘图入门 2 ...
JS基础知识学习（一）
JS基础知识前端开发常用的浏览器谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
Js基础知识梳理系列
小序:总是感觉自己的技术一直在原地踏步,想学习一些新的技术,但学起来很吃力,而且总是没有什么实际的收获,似乎进入了所谓的"瓶颈期".问了一些前辈是否也遇到过同样的问题,他们给我的解 ...
了解js基础知识中的作用域和闭包以及闭包的一些应用场景，浅析函数柯里化
js基础知识中的作用域和闭包一.作用域 1.作用域.自由变量简介 (1)作用域定义 (2)作用域实例演示 (3)自由变量定义 (4)自由变量实例演示 2.作用域链简介 (1)作用域链定义 (2)作用 ...
js基础知识学习（二）
JS基础知识 JavaScript 数据类型转换把其它数据类型转换为number类型 isNaN .Number.parseInt.parseFloat 在进行加减乘除数学运算的时候 true-&g ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
python向量计算库教程_NumPy库入门教程：基础知识总结
原标题:NumPy库入门教程:基础知识总结视学算法 | 作者知乎专栏 | 来源 numpy可以说是 Python运用于人工智能和科学计算的一个重要基础,近段时间恰好学习了numpy,pandas, ...
（七）JS基础知识四（搞定异步）【三座大山之三，必考！！！】
JS基础知识四(异步) 提问单线程应用场景 callback hell和promise 提问同步和异步的区别是什么手写用Promise加载一张图片前端使用的异步的场景有哪些单线程 JS是单 ...

JavaScript入门一（JS基础知识）

文章目录

一、JavaScript是什么

二、网页组成

三、什么是JS引擎

四、JavaScript特点

五、JavaScript的组成

六、JavaScript的引用方式

1、行内嵌入式

2、页内嵌入式

3、外部式（外链式）

七、变量

1、什么是变量

2、变量的命名规则

3、变量的定义方式

4、变量的使用

八、 document对象

1、什么是document对象

2、document对象

JavaScript入门一（JS基础知识）相关推荐

最新文章

热门文章

JavaScript入门一（JS基础知识）

文章目录

一、JavaScript是什么

二、网页组成

三、什么是JS引擎

四、JavaScript特点

五、JavaScript的组成

六、JavaScript的引用方式

1、行内嵌入式

2、页内嵌入式

3、外部式（外链式）

七、变量

1、什么是变量

2、变量的命名规则

3、变量的定义方式

4、变量的使用

八、 document对象

1、 什么是document对象

2、document对象

JavaScript入门一（JS基础知识）相关推荐

最新文章

热门文章

1、什么是document对象