【前端系列教程之JavaScript】01_JavaScript概述和引入方式

我是波哩个波

已于 2022-03-10 15:58:35 修改

阅读量555

点赞数 1

分类专栏： # JavaScript从入门到精通文章标签： javascript 前端 css3 ecmascript JS

于 2021-12-13 12:35:53 首次发布

本文链接：https://blog.csdn.net/ligonglanyuan/article/details/121902715

版权

JavaScript从入门到精通专栏收录该内容

16 篇文章 1 订阅

订阅专栏

JavaScript概述

JavaScript可以做什么

页面的各种动画效果

页面的点击/移入响应

对客户端数据进行验证

各种页面小游戏

用途总结

嵌入动态文本于HTML页面。

对浏览器事件做出响应(对于用户的操作给予响应)。

读写HTML元素。

在数据被提交到服务器之前验证数据(客户端数据校验)。

检测访客的浏览器信息。

控制cookies，包括创建和修改等。

基于Node.js技术进行服务器端编程。

JavaScript 发展到现在几乎无所不能。
1. 网页特效

2. 服务端开发(Node.js)

3. 命令行工具(Node.js)

4. 桌面程序(Electronjs)

5. App(Cordova)

6. 控制硬件-物联网(Ruff)

7. 游戏开发(cocos2d-js)

Why JavaScript

类似于JavaScript的语言有很多，比如: 微软推出的JScript，CEnvi推出的 ScriptEase

1、所有主流浏览器都支持JavaScript(支持程度广)。

2、目前，全世界大部分网页都使用JavaScript(用户群体广)。

3、它可以让网页呈现各种动态效果，做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具(特点)。

4、易学性，学习环境无外不在，只要有文本编辑器，就能编写JavaScript程序。它是基于Java简化设计而来。

JavaScript基础概述

JavaScript是一种解释型或即时编译型的高级编程语言，虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

什么是脚本语言?

脚本语言是为了缩短传统的编写-编译-运行（edit-compile-run）过程而创建的计算机语言。

一个脚本通常是解释执行而非编译。脚本语言通常都有简单、易学、易用的特性，目的就是希望能让程序员快速完成程序的编写工作。

用最简单的语言总结一下，脚本语言就是，边解释边运行，非脚本语言，整体编译后，再运行。脚本语言必须运行到错误的地方，才会报错，而非脚本语言，在编译的时候，会报错。

什么是基于原型编程?

基于原型的编程是面向对象编程的一种形式，通过复制已经存在的原型对象来实现面向对象，无与基于类的编程较大的区别是没有Class关键字，但是有类的概念。基于原型的编程也可以理解成基于实例的编程。

基于原型的系统可以在程序运行时对原型进行修改，基于类(Java， C+)的语言则很难实现这一点。

什么是编程范式?

编程范式是程序语言背后的思想。代表了程序设计者认为程序应该如何被构建和执行的看法。常见的编程范式有：过程式（命令式），面向对象，函数式，泛型编程等。

和C++等语言类似，JS支持多范式（paradigms）编程。我们常常混合这些范式来完成一些大型Web项目。

JS支持3种编程范式：命令式、面向对象和函数式。

JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript主要用于HTML的页面，嵌入在HTML的源码中。

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。它存在于全世界所有 Web 浏览器中，能够给页面添加动态效果和动态交互。

JavaScript最初的目的是为了处理表单的验证操作。

JavaScript组成部分

JavaScript是由ECMAScript、文档对象模型（Document Object Model:DOM）、浏览器对象模型（Brower Object Model:BOM）三部分构成。

ECMAScript，描述了该语言的基础语法和基本对象(包含内置对象)，JavaScript的核心，描述了语言的基本语法(变量、运算符、表达式、流程控制语句、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准.

文档对象模型（DOM），描述处理网页内容的方法和接口。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性，可以对其中的内容进行修改和删除，同时也可以创建新的元素；DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。BOM提供了独立于内容而与浏览器窗口进行交互的对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象。

JavaScript特点

JavaScript是一种属于浏览器的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的(但写成单独的js文件有利于结构和行为的分离)。

弱类型 : 声明变量无需指定数据类型，统一使用var来声明变量；声明的变量可以存储任意类型的值；

解释性 : JavaScript是一种解释型的脚本语言，C、Java等语言先编译后执行，而JavaScrip源代码不需要经过编译，直接在浏览器上运行时被解释。

基于对象 : Javascript是一种基于对象的语言，能运用自己已经创建了的对象，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

简单性 : JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

事件驱动(Event Driven) 和动态性 : JavaScript是一种采用事件驱动（所谓事件驱动，指的是在页面执行了某种操作所产生的动作，此动作称为“事件”。）的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应（针对于用户在页面中的操作，都是基于事件驱动）。

跨平台性：JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提上机器上的浏览器支持JavaScript脚本语言，目前JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。

HTML5的出现更是突出了JavaScript的重要性，例如HTML5的绘图支持、本地存储、离线应用、客户端通信等，都大量使用了JavaScript。

而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。

JavaScript历史

在1995年时，由Netscape(网景)公司的Brendan Eich(布兰登·艾奇)，在网景导航者浏览器上首次设计实现而成。JavaScript是甲骨文公司的注册商标。

Netscape在最初将其脚本语言命名为LiveScript，后来因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。

JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。

为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。

发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

ECMA这个组织的目标是评估，开发和认可电信和计算机标准。

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式添加 try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5	添加 "strict mode"，严格模式添加 JSON 支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符 (**) 增加 Array.prototype.includes

ECMAScript 6 也称为 ECMAScript 2015。

ECMAScript 7 也称为 ECMAScript 2016。

JavaScript的引入方式

HTML 中的脚本必须位于 <script>与</script> 标签之间。

脚本可被放置在 HTML 页面的<body> 和 <head> 部分中。

引入JavaScript需要使用script标签：

<script>标签用于定义客户端脚本，script 元素即可包含脚本语句，又可通过 src 属性指向外部脚本文件。

如果想在页面上使用JavaScript，必须使用<script>标签，把JavaScript源码放入<script>和</script>之间。

<script>标签属性:

type：指定脚本的类型。

src：指定外部脚本的url。

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

<script>
	//定义JS代码
</script>

//引入外部JS文件
<script src="url"></script>

浏览器会解释并执行位于<script> 和 </script>之间的 JavaScript 代码。

        那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。

        JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

行内引入JavaScript

在标签事件属性中填写JavaScript代码或调用函数时，调用函数时不是事件=函数名，而是事件=函数名+()

<button onclick="alert('我是一个警告框')" type="button">点击这里</button>

<head>
    <script>
        function myfunction(){
            document.getElementById("demo").innerHTML="onclick事件触发";
        }
	</script>
</head>
<body>
    <h1 id="demo">一个段落</h1>
    <button onclick="myfunction()" type="button">点击这里</button>
</body>

内部引入JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的<body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入<head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<!DOCTYPE html>
<html>
<head>
<script>
    function myFunction(){
        document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
    }
</script>
</head>
<body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">尝试一下</button>
    <script>
        function myFunction(){
            document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
        }
    </script>
</body>
</html>

外部引入JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script>标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
	<script src="myScript.js"></script>
</body>
</html>

如果把JS源代码直接写在某个具体的页面上时(通常放在<head>标签下)，这样的成为内部的JavaScript。

但是当JS 代码越来越庞大的时候，我们最好把它独立另存为一个JS文件，扩展名为.js，然后在页面上引入即可，这样的称为外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点。

注：引用外部js文件的script标签中不可以写JavaScript代码

扩展知识点

document.write() 的常用操作:

除了直接输出文字外，它还支持带有HTML标签的输出内容。比如直接输出一个标题比如在输出内容中加入br换行标签比如输入一张图片 ......等等

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>
    document.write("<h1>我是H1的内容</h1>");
</script>

</body>
</html>

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>
</html>

alert()方法:

alert()方法会弹出警告框。可以添加多个alert();他们会按照顺序依次执行。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
	window.alert(5 + 6);
</script>

</body>
</html>

console.log():

写入到浏览器的控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式，在调试窗口中点击 "Console" 菜单。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
	a = 5;
	b = 6;
	c = a + b;
	console.log(c);
</script>

</body>
</html>

innerHTML:

写入内容到 HTML 元素

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
    //需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
	document.getElementById("demo").innerHTML = "段落已修改。";
    //document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
	//innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
</script>

</body>
</html>

click事件的基本用法:

click事件是最常用的事件之一，所谓事件可以简单理解为用户的操作。为了方便之后的学习，你应该先掌握着个简单事件的基本用法。

JavaScript注释及注意事项

单行注释:

// 单行注释内容
var name = 'hm';

多行注释:

/* 多行注释内容 */
/*
	var age = 18;
	var name = 'zs';
	console.log(name, age);
*/

文档注释：

/**  文档注释内容 */

注意事项：

1、字母的大小写，Name和name是两个不同的标识符。

2、空格和换行。这一点和CSS代码规则类似:多余的空格会被忽略，可以将一行代码分成多行写。

3、分号作为一个语句的结束标志，分号之后是新语句的开始。虽然省略不写通常也是没有问题的，但还是建议大家写上。

我是波哩个波

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端系列教程之JavaScript】01_JavaScript概述和引入方式

一、JavaScript概述1.1、JavaScript可以做什么1.1.1、页面的各种动画效果1.1.2、页面的点击/移入响应1.1.3、对客户端数据进行验证1.1.4、各种页面小游戏1.1.5、用途总结嵌入动态文本于HTML页面。对浏览器事件做出响应(对于用户的操作给予响应)。读写HTML元素。在数据被提交到服务器之前验证数据(客户端数据校验)。检测访客的浏览器信息。控制cookies，包括创建和修改等。基于Node.js技.
复制链接

扫一扫