从0开始学习JavaScript

618 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」,赢取创作大礼包,挑战创作激励金

这是从0开始系统学习JavaScript的一个系列,本文主要就是JavaScript零基础的一些入门知识

敲重点

👉 js是什么?怎么引入使用?

👉 执行环境,专业术语的简单介绍;

👉 代码的基本结构说明;


基本介绍

什么是JavaScript?

一种脚本,可以被直接写在网页的 HTML 中,在页面加载的时候自动执行。

JavaScript名字的由来?

其实最开始的时候,JavaScript的名字叫LiveScript,但是因为当时 Java 很流行,所以就想蹭一下它的热度,改成了JavaScript。但是它现在是一门完全独立的语言,和Java没有任何关系。

JavaScript的执行环境?

JavaScript不仅可以在浏览器中执行,也可以在服务端执行,实际上它可以在任何搭载了 JavaScript 引擎的设备中执行。

浏览器中就嵌入了 JavaScript 引擎,而且不同的引擎有不同的“代号”。

  • V8 —— Chrome 和 Opera 中的 JavaScript 引擎。
  • SpiderMonkey —— Firefox 中的 JavaScript 引擎。

如果说"V8支持某个功能",可以理解为这个功能可以在 Chrome 和 Opera 浏览器中正常运行。

JavaScript特别在哪?

它是唯一一个与HTML/CSS完全集成,被所有的主流浏览器支持并且默认开启的浏览器技术。


开始JavaScript

最简单的示例

JavaScript程序只要包裹了<script> 标签,就可以插入到HTML文档的任何地方。当浏览器遇到 <script> 标签,代码会自动运行。

<!DOCTYPE HTML>
<html>

<body>

  <p>script 标签之前...</p>

  <script>
    alert('Hello, world!');
  </script>

  <p>...script 标签之后</p>

</body>

</html>

文件引入

如果 JavaScript 代码很多的话,就需要放到一个单独的文件,然后通过src属性这样引入。

<script src="demo.js"></script>

把JavaScript脚本独立成文件有什么好处?

如果是的独立文件,浏览器就会把该文件下载并保存到浏览器的缓存里,之后,其他页面想要相同的脚本就会直接从缓存中获取,不需要再下载一次。这样可以是页面更快加载。

:如果 <script> 标签写了src属性,再在里面写脚本是没有用的。

image-20211013230651177


代码结构

语句

定义:执行行为(action)的语法结构和命令。

:显示消息语句

alert('Hello, world!') 

分号

如果有多个语句,则用分号分开

alert('Hello'); 
alert('World');

不加分号不会报错,但是建议你一定要养成习惯加分号

注释

加了注释的代码,执行引擎会直接忽略它们,不会执行,有两种注释的方式

  • 单行注释 双斜杆//
  • 多行注释 斜杆加星号 /**/

image-20211013231609022


现代模式,"use strict"

ES5 规范增加了新的语言特性并且修改了一些已经存在的特性,但是为了保证旧的功能能够使用,大部分的修改默认不生效,所以想要激活这些特性,就需要在脚本文件的顶部加上指令use strict。也就是通常说的【启用严格模式】

浏览器控制台默认不启动 use strict



结语

文章会持续更新,优化,以及重构!

「本文已参加【掘力星计划】,在评论区参与讨论,就有机会参加【100份掘金周边】💥抽奖活动💥,徽章、拖鞋、马克杯、帆布袋等你来拿,👉活动详情」。

image.png



参考资料:

An Introduction to JavaScript

Code structure

The modern mode, "use strict"


🎨【点赞】【关注】不迷路,更多前端干货等你解锁

往期推荐

👉 来看看最新版的谷歌浏览器开发者工具都更新了些什么?

👉 layui镜像合集

👉 最全的CSS阴影总结

👉 小程序template模板使用详解