JavaScript:你好

介绍

JavaScript,一种高级编程语言,通过解释执行,是一门动态类型,面向对象(基于原型)的解释型语言。它已经由ECMA(欧洲计算机制造商协会)通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。JavaScript是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。——维基百科

控制台

使用 Firefox Quantum 或 Google Chrome 等浏览器可以直接访问 Web 控制台,可以在网页上右键选择「查看元素」或「检查」然后选择「控制台」或「Console」,也可以使用快捷键 macOS 使用「Command+Option+J, Windows 用户使用「Ctrl + Shift + J」快速进入。

我们可以直接在控制台编写 JavaScript 代码并且运行。

alert('Hi')

提示:按回车是运行,所以当想输入多行代码时可以按「Enter+Shift」进行换行。

当然,控制台的主要作用并不只是用来给我们运行代码的,我们可以在这里进行调试,并且当我们的写出 Bug 代码时它会报错告诉问题所在,这是很重要的功能,当你之后写 Bug 时(开个玩笑)可以用这个功能找出问题所在。可以尝试在常去的网站上打开控制台,很可能会看到各种各样的警告或错误,当然也会有一些公司在这里预留招聘信息。

console.log()

如果想在控制台输出信息可以使用 console.log,这是常见的调试方式

console.log
console.log('hi')

alert()

或者想在网页中弹出提示框

alert
alert('hi')

JavaScript 引入方式

和 CSS 的引入方式相似

在元素事件中引入

可以直接在元素中添加 JavaScript 事件操作比如弹出一个提示框或者调用一些其他的函数

JavaScript 在元素中
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('你好')">点我</button>
</body>
</html>

在内部引入

将写 JS 写在 <script> 标签内和 HTML 代码放在一起,一般位于 <body> 或者 <head> 标签内

JavaScript 在 <script> 中
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    alert('hi')
</script>
</body>
</html>

在外部链接

将 JavaScript 写在一个 .js 文件里在外部引入 .html 文件中,这样的好处是易于维护,比如你有好几个页面的 JS 功能都是一致的就可以在几个页面引入该链接不用每个页面都重复写上同样的 JS 代码,之后修改时也很方便

JavaScript 外部链接
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="test.js"></script>
</body>
</html>

注释

随着项目越来越大,良好的代码注释可以告诉你和你的小伙伴某段代码的具体用途,这是必备的良好习惯。

单行注释
console.log('测试'); // 这是单行注释,此处是向控制台打印输出测试
多行注释
/*
    我是一个多行注释
    此处是获取一个 id 为 app 的元素并对其写入内容"你好"
*/
let app = document.getElementById('app');
app.innerHTML = '你好';

Vanilla JS

最后,Vanilla JS 是一个快速,轻量级的跨平台框架,用于构建令人难以置信的强大JavaScript应用程序,其实这个东西就是原生 JavaScript…

Conners Hua

欢迎加入群聊: Telegram 群聊 | QQ 群聊(不讨论敏感话题)

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.