JavaScript入门教程

心已赠人 2024-04-08 10:05 89阅读 0赞

**简介：**

> JavaScript（简称“JS”）  
> 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript  
> 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。  
> JavaScript在1995年由Netscape公司的Brendan  
> Eich（布兰登·艾奇），在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。  
> JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript  
> 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript  
> 2015，但通常被称为ECMAScript 6 或者ES2015。

[更多内容，请移步百度百科。][Link 1]

## 1、 为什么要学习 JavaScript？ ##

JavaScript 是 web 开发者必学的三种语言之一：

*  HTML 定义网页的内容
 *  CSS 规定网页的布局
 *  JavaScript 对网页行为进行编程  
    **请注意：JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。**

### 2、JavaScript 使用 ###

在 HTML 中，JavaScript 代码必须位于`<script>`与 `</script>` 标签之间。  
例如：

还有一种写法，也许会使用 type 属性：`<script type="text/javascript">`。  
但type属性不是必需的，可写可不写。JavaScript 是 HTML 中的默认脚本语言。  
JavaScript代码可被放置在 HTML代码的 `<body>` 或 `<head>` 部分中，或兼而有之。  
例如，把JavaScript代码放置在`<head>`标签中：

<!DOCTYPE html>
    <html>
    	<head>
    		<script>
    			document.write("Hello World!");
    		</script>
    	</head>
    <body>
    	<h1>一张网页</h1>
    </body>
    </html>

或是将其放置在`<body>`标签中：

<!DOCTYPE html>
    <html>
    <body> 
    <h1>A Web Page</h1>
    <script>
    	document.write("Hello World!");
    </script>
    </body>
    </html>

提示：把脚本置于 `<body>` 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。  
脚本还可放置在外部文件中（与之前所学的css样式类似）。  
外部文件：firstScript.js

document.write("Hello Wrold!");

外部脚本很实用，可以将相同的脚本用于许多不同的网页。但是，外部脚本中不需要写`<script>`标签，直接书写JS代码即可。  
**JavaScript 文件的文件扩展名是“.js”**。  
如需使用外部脚本，请在HTML代码中的

可以在 `<head>` 或 `<body>` 中放置外部脚本引用。该脚本的表现与它被置于 `<script>` 标签中是一样的。  
**外部 JavaScript 的优势**  
在外部文件中放置脚本有如下优势：

*  分离了 HTML 和代码
 *  使 HTML 和 JavaScript 更易于阅读和维护
 *  已缓存的 JavaScript 文件可加速页面加载

如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：

### 3、JavaScript 输出 ###

JavaScript 不提供任何内建的打印或显示函数。

JavaScript 能够以不同方式“显示”数据：

*  使用 window.alert() 写入警告框
 *  使用 document.write() 写入 HTML 输出
 *  使用 innerHTML 写入 HTML 元素
 *  使用 console.log() 写入浏览器控制台  
    **（1）使用 innerHTML**  
    如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：  
    例如：

<!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一张网页</h1>
    
    <p>我的第一个段落</p>
    
    <p id="demo"></p>
    
    <script>
     document.getElementById("demo").innerHTML = 5 + 6;
    </script>
    
    </body>
    </html>

效果：  
![在这里插入图片描述][7591a589048142d1ae7ad76ce78d2e16.png]  
**提示：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。**  
**（2）使用 document.write()**  
出于测试目的，使用 document.write() 比较方便：  
例如：

<!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一张网页</h1>
    
    <p>我的第一个段落</p>
    
    <script>
    document.write(5 + 6);
    </script>
    
    </body>
    </html>

**（3）使用 window.alert()**  
能够使用警告框来显示数据：

例如：

<!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一张网页</h1>
    
    <p>我的第一个段落</p>
    
    <script>
    window.alert(5 + 6);
    </script>
    
    </body>
    </html>

**（4）使用 console.log()**  
在浏览器中，可以使用 console.log() 方法来显示数据。

通过 F12 来打开浏览器控制台，并在菜单中选择“控制台”。

实例

<!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一张网页</h1>
    
    <p>我的第一个段落</p>
    
    <script>
    console.log(5 + 6);
    </script>
    
    </body>
    </html>

如图所示：  
![在这里插入图片描述][78f40601bea44104a23232d759157676.png]

[Link 1]: https://baike.baidu.com/item/JavaScript/321142?fr=aladdin#1
[7591a589048142d1ae7ad76ce78d2e16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/4841dec7b53a4398b86ca072acdb4961.png
[78f40601bea44104a23232d759157676.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/524844cdfd90418fab7225eae821d07d.png