js简介以及在html中的2种使用方式（hello world）

浅浅的花香味﹌ 2023-10-14 23:12 70阅读 0赞

## **简介** ##

javascript ：是一个跨平台的脚本语言；是一种轻量级的编程语言。

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。

##  ##

HTML： 结构

css： 表现

JS： 行为

HTML+CSS 只能称之为静态网页，加入js网页则有了灵魂称之为动态网页

脚本语言的特点：

不能独立运行，要依赖网页；

可插入 HTML 页面的编程代码。

插入 HTML 页面后，可由所有的现代浏览器执行。

javascript 在网页中使用的两种方式：

方式1：直接在script标签中编写；

方式2：引用外部js代码

**注意****：**

1.可以有多个script标签，多个script标签都是自上而下顺序执行

2.alert()的作用：控制浏览器弹出一个警告对话框

## **方式1实例：直接在script标签中编写** ##

1.新建一个html文件（如：demo.html），并将下述内容写入文件中

<!DOCTYPE HTML>
    	<html>
    	<title>hello world</title>
    	<body>
    	
    	</body>
    </html>

2.在html文件中插入一个script标签

3.将html文件用浏览器打开，即可看见hello world

![b45965b439c644c5ad180a40e3323577.png][]

点击确定后，可以看见hello world-2

![eb7022859bb7485c9246a3676796d446.png][]

demo.html完整文件内容如下：

<!DOCTYPE HTML>
    <html>
        <title>hello world</title>
        <body>
    
            <script>alert("hello world"); </script>
            <script>alert("hello world-2"); </script>
    
        </body>
    </html>

## **方式2实例：引用外部js代码** ##

1.新建一个html文件（如：demo.html），并将下述内容写入文件中

<!DOCTYPE HTML>
    	<html>
    	<title>hello world</title>
    	<body>
    	
    	</body>
    </html>

2.在html文件（如：demo.html）同目录下新建一个js文件（如：demojs.js），并将下述内容写入文件中

alert("hello world");

3.在html文件中引用外部js代码（如：demojs.js）

4.将html文件用浏览器打开，即可看见hello world

![d47c0de1e2c14804b75853a62ad41eed.png][]

点击确定后，可以看见hello world-3

![d370b661ea6c4a358fa80c4e01aed539.png][]

demo.html完整文件内容如下：

<!DOCTYPE HTML>
    <html>
        <title>hello world</title>
        <body>
    
            <script src="./demojs.js">alert("hello world-2");</script>
            <script>alert("hello world-3");</script>
    
        </body>
    </html>

**注意：**script标签一旦引入外部文件，就不能编写代码了，即使写了浏览器也会自动忽略。

如果需要再创建一个script代码即可。

[b45965b439c644c5ad180a40e3323577.png]: https://img-blog.csdnimg.cn/b45965b439c644c5ad180a40e3323577.png
[eb7022859bb7485c9246a3676796d446.png]: https://img-blog.csdnimg.cn/eb7022859bb7485c9246a3676796d446.png
[d47c0de1e2c14804b75853a62ad41eed.png]: https://img-blog.csdnimg.cn/d47c0de1e2c14804b75853a62ad41eed.png
[d370b661ea6c4a358fa80c4e01aed539.png]: https://img-blog.csdnimg.cn/d370b661ea6c4a358fa80c4e01aed539.png