JavaScript教程带你快速入门

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

54 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

# 随笔

特别提醒: 内容为用户自行发布,如有侵权,请联系我们管理员删除,邮箱:mail@xieniao.com ,在收到您的邮件后我们会在3个工作日内处理。

Linux 运维工程师面试真题-5-常考题目汇总

下载

江湖救急：MinerU安装宝典，AI侠客必备

薄荷君梨小玥

LabVIEW 书籍项目教程

北妫

ShaderGraphVariables 使用教程

匡寒芳子

轻松赚钱：探索红果短剧平台的蓝牙点击器自动化神器

好厉害

154

深度解读KubeEdge架构设计与边缘AI实践探索

远方小壹

暂无评论

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

立即登录

暂无评论...

JavaScript教程带你快速入门

JavaScript 简介

JavaScript 用法

JavaScript 输出

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

Svelte预处理Markdown教程

相关文章

暂无评论

相关文章

随机网址

猜你喜欢