JavaScript教程带你快速入门

随笔2个月前发布一叶十八

51 0 0

JavaScript 简介

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。

JavaScript 是基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript 用法

HTML 中的脚本必须位于标签之间。

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

<script>标签

<script>
alert("我的第一个 JavaScript");
</script>
1
2
3

<body> 中的 JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("我的第一个 JavaScript");
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

JavaScript 函数和事件

上面代码中的 JavaScript 语句，会在页面加载时执行。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数，如：用户点击按钮时执行代码。

<head> 中的 JavaScript 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function myFunction() {
     
            alert("我的第一个 JavaScript函数");
        }
    </script>
</head>
<body>
    <button type="button" onclick="myFunction()">按钮</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

点击按钮时调用JavaScript函数如下图
JavaScript教程带你快速入门
<body> 中的 JavaScript 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" onclick="myFunction()">按钮</button>
    <script>
        function myFunction() {
     
            alert("我的第一个 JavaScript函数");
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果一样如下图
JavaScript教程带你快速入门
外部的 JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="firstScript.js"></script>
</head>
<body>
    <button type="button" onclick="myFunction()">按钮</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

firstScript.js代码如下

function myFunction(){
   
    alert("我的第一个 JavaScript函数");
}
1
2
3
4
'
运行

JavaScript 输出

window.alert() 弹出警告框。
document.write() 方法将内容写到 HTML 文档中。
innerHTML 写入到 HTML 元素。
console.log() 写入到浏览器的控制台。

使用 window.alert()弹出警告框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.alert('弹出警告框');
    </script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

JavaScript教程带你快速入门
使用document.write() 将内容写到 HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content=1
2
3
4

# 随笔

文章版权归作者所有，未经允许请勿转载。

文本编码转换实例解析：带有BOM的UTF-8批量转码全攻略

谢谢吃肯德基

视频是我原创的，申请短视频保护时，提示审核不通过？ – 淘宝天猫

闫术华

在Linux中，什么是CDN？

美加澳欧

店铺同一个商品的销量突然同一时间剧增，且付款后没多久就马上退款了。哪位大神知道这是为什么，会不会严重？ – 淘宝天猫

九天鲲鹏

我的店铺很久没有打开了已经自动关闭了？ – 淘宝天猫

是彭儿

132

HTTP与HTTPS

社会复杂爷简单

暂无评论

您必须登录才能参与评论！

立即登录

暂无评论...

JavaScript教程带你快速入门

JavaScript 简介

JavaScript 用法

JavaScript 输出

“HTML5 入门教程：从零开始构建现代化网页“

Svelte预处理Markdown教程

相关文章

暂无评论

相关文章

随机网址

猜你喜欢