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

简介

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),并将下述内容写入文件中

html 复制代码
<!DOCTYPE HTML>
	<html>
	<title>hello world</title>
	<body>
	
	</body>
</html>

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

html 复制代码
<script>alert("hello world"); </script>
<script>alert("hello world-2"); </script>

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

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

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

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),并将下述内容写入文件中

html 复制代码
<!DOCTYPE HTML>
	<html>
	<title>hello world</title>
	<body>
	
	</body>
</html>

2.在html文件(如:demo.html)同目录下新建一个js文件(如:demojs.js),并将下述内容写入文件中

javascript 复制代码
alert("hello world");

3.在html文件中引用外部js代码(如:demojs.js)

html 复制代码
<script src="./demojs.js">alert("hello world-2");</script>
<script>alert("hello world-3");</script>

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

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

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

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代码即可。

相关推荐
民乐团扒谱机12 小时前
脉冲在克尔效应下的频谱展宽仿真:原理与 MATLAB 实现
开发语言·matlab·光电·非线性光学·克尔效应
yuan1999712 小时前
基于扩展卡尔曼滤波的电池荷电状态估算的MATLAB实现
开发语言·matlab
Tony Bai12 小时前
Go GUI 开发的“绝境”与“破局”:2025 年现状与展望
开发语言·后端·golang
豆浆whisky12 小时前
Go分布式追踪实战:从理论到OpenTelemetry集成|Go语言进阶(15)
开发语言·分布式·golang
2401_8604947012 小时前
Rust语言高级技巧 - RefCell 是另外一个提供了内部可变性的类型,Cell 类型没办法制造出直接指向内部数据的指针,为什么RefCell可以呢?
开发语言·rust·制造
Tony Bai12 小时前
【Go模块构建与依赖管理】08 深入 Go Module Proxy 协议
开发语言·后端·golang
浪裡遊12 小时前
Next.js路由系统
开发语言·前端·javascript·react.js·node.js·js
程序员-小李13 小时前
基于 Python + OpenCV 的人脸识别系统开发实战
开发语言·python·opencv
QX_hao13 小时前
【Go】--文件和目录的操作
开发语言·c++·golang
卡提西亚13 小时前
C++笔记-20-对象特性
开发语言·c++·笔记