JavaScript 学习之路-起步

作者 : 开心源码 本文共2595个字,预计阅读时间需要7分钟 发布时间: 2022-05-12 共60人阅读

这是一篇讲 JavaScript 基础的文章,接下来会升级这个系列文章。

JavaScript 诞生于 1995 年,至今已经有 20 几年了,在最新的 JavaScript 2018 年度报告 中,许多人仍旧认为这门语言正在朝着好的方向去发展,从最开始的默默无闻到如今的未来可期,JavaScript 作为前台开发者的一门学习语言,肯定会被更多爱好编程的人喜欢。假如想理解和学习 JavaScript,请往下看。

ECMAScript

在理解 JavaScript 前,首先要理解 ECMAScript ,它是由 ECMA-262 定义的一门语言。它规定了少量基本的语法、变量、语句、操作符以及对象等等内容,而 JavaScript 去实现了它,也就是说,JavaScript 去实现了 ECMAScript,我们经常说 JS 的新版本,实际上是 ECMAScript 的新版本,最被人经常用的是第五个版本(ES5) 还有ES6,它包含了许多新知识新特性。简而言之,JavaScript 的概念更广,它包含了 ECMAScript ,除此之外还有文档对象模型 (DOM) 和浏览器对象模型 (BOM) 。

两种使用方式

不同于其它编程语言,JavaScript 内嵌于浏览器中,许多主流浏览器都支持 JavaScript。打开 Chrome 浏览器,按 F12 或者鼠标右键选择审查元素,即可以看到控制台,在控制台上即可以书写 JS 代码,例如你可以在控制台输入console.log('hello world!');即可以看到下方出现了一句熟习hello world!

image
这是写 JS 代码最快速便捷的方式,但一般我们都是在编辑器中完整地完成整个项目,关于编辑器各人有各人的爱好,稍后会列出常用的几个编写 JS 代码的编辑器。

来到了编辑器中,我们新建一个后缀名为 .html 的文件,在里面写有关 JS 的代码,假如你连 HTML 都不认识,可以到 w3school 去在线学习基础的 HTML 知识。不出所料,一个基本的 html 文件的头应该是下面这样的:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><!-- 这里是内容代码 --></body></html>

JavaScript 使用 <script> 标签来嵌套代码,所有的 JS 相关的代码都放在里面,而 <script> 标签可以放在 <head></head> 中,也可放在 <body></body> 中,最好放在后者,由于浏览器解析时是从上至下解析这段代码,放在 <head> 中很容易由于解析慢而导致下方 <body> 中的内容未渲染出来,从而影响客户体验。

<script> 有几个常用的属性,最常看到的就是 typesrc 了,type 属性顾名思义,指定了属性含义,常用值是text/javascript,让人知道这里面写的都是 JavaScript 类型的标签代码;src 属性也是经常看见的,指定了一个外部的 href 链接,JavaScript 有两种引入方式,一种是直接在 <script></script> 标签里面写代码,另外一种就是创立一个后缀名为 .js 的文件,而后通过 src 链接进来使用。

<script> 标签有一个 defer 属性,这个属性的作用是告诉浏览器等所有内容都解析完后再来执行这个脚本,也就是起到一个推迟执行脚本的作用。

<script> 标签还有一个 async 属性,适用于外部引入的 .js 文件,作用是告诉浏览器不比等它执行,可以异步先去加载其它内容。

以上几个属性的使用方式如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" defer="defer" src="××.js"></script>    <script type="text/javascript" async src="××.js"></script></head><body><!-- 这里是内容代码 --></body></html>

文档模式

IE5.5 开始引入了文档模式这个概念,它会影响 css 内容的呈现,也会肯定程度上影响到 JavaScript 的执行。文档模式只要要记住有混杂模式和标准模式两个,在混杂模式下,不同浏览器下执行的会有很大差异,因而不被人所推荐,一般都是用的标准模式,这个标准模式我们也很熟习了,就是在 html 文件经常看到的

<!DOCTYPE html>

不支持 JavaScript

当遇到浏览器不支持 JavaScript 脚本或者者脚本被禁用了怎样办?这时候可以用到 <noscript> 标签,它会在浏览器不支持 JS 脚本时候显示,而其余情况下不会有什么影响,所以为了客户体验,可以在代码里加上

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>  <!-- 这里是内容代码 -->  <noscript>    <p>您的浏览器不支持 JavaScript ,请更新。</p>  </noscript></body></html>

这样,当遇到不支持 JS 时,这段文字就会显示出来,提示客户更新或者更换浏览器。

编辑器

最后,有许多可以编写 JavaScript 代码的软件。就我知道的有以下这些:

  • WebStorm
  • PhpStorm
  • Sublime Text
  • VS code
  • Dreamweaver
  • HBuilder

以上这几个软件基本都用过,现在在用 PhpStorm ,它跟 WebStorm 差不多,只不过多了对 php 文件的支持,很多人都是用的 WebStorm ,它代码提醒等做得很好,页面看起来也还行,缺点应该是打开的时候挺慢,最重要的是,时不时地就过期需要去找注册码,当然,有条件的话还是付费支持正版的好,听说学生去申请可以有受权使用,不过太麻烦了懒得去弄。

总结

希望你看完以后能够知道 JavaScript 的诞生年份、与 ECMAScript 的关系、引入 js 的两种方式、文档模式以及 <noscript> 这些内容,理解这些有助于以后更好的学习。

最后,点赞与转发是一种支持。

参考

《JavaScript 高级程序设计》 [美] Nicholas C.Zakas 著

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript 学习之路-起步

发表回复