“星星发光是为了让每一个人有一天,都能找到属于自己的星星。”
——《小王子》
什么是JS
- 1.什么是JS
- (1)JavaScript
- (2)为什么学习JS:
- (3)JS能做什么:
- 2.JS用法
- (1)JS脚本代码
- (2)JavaScript 函数和事件:
- (3)外部的 JavaScript:
- (4)外部的 JS的引入方式:
- 3.JS的编辑器
- 4.运行一个JS
- 演示代码
- amiao1.js
- 演示结果
1.什么是JS
(1)JavaScript
是一门 Web 的编程语言,是脚本语言,可以跨平台使用:可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备
(2)为什么学习JS:
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门:
HTML 定义了网页的内容
CSS 描述了网页的布局和样式
JavaScript 控制了网页的行为
(3)JS能做什么:
可以在HTML中直接输出内容
可以对事件作出反应 (比如点某个地方就会有变化)
可以改变HTML内容
可以改变HTML图像
可以改变HTML样式
可以验证输入内容 (比如要求只能输入数字的,用户输字母就会报错)
2.JS用法
(1)JS脚本代码
必须位于 标签之间;
可被放置在 HTML 页面的 和 部分中。
(2)JavaScript 函数和事件:
通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。
(3)外部的 JavaScript:
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。在
(4)外部的 JS的引入方式:
<script src="amiao.js"></script>
3.JS的编辑器
VSCode是一款免费开源的现代化轻量级代码编辑器
4.运行一个JS
演示代码
<!DOCTYPE html>
<html><meta charset="UTf-8">
<head>
<title>什么是JS</title>
<!-- head里面的js函数 -->
<script>
function test1(){
document.getElementById("demo").innerHTML="这是一个在head中的js的函数"
}
</script>
<!-- 引入外部的js -->
<script src="amiao1.js"></script>
</head>
<body>
<p>js可以直接应用在html的输出流</p>
<script>
document.write("<h1>什么是JS</h1>")
document.write("<p>这是p标签里面的内容</p>")
</script>
<!-- 头部获取了id为demo -->
<p id = "demo">测试1</p>
<!-- 写一个按钮测试头部的test1函数 -->
<button type = "button" onclick="test1()"> 测试head js 函数 </button>
<!-- 测试头部引入的外部js文件 -->
<p id = "demo2">测试2</p>
<button type = "button" onclick="test2()"> 测试外部文件js函数 </button>
</body>
</html>
amiao1.js
function test2(){
document.getElementById("demo2").innerHTML="这是一个在外部文件中的js的函数"
}
演示结果
点按钮,测试1和测试2会显示出不同的话