第一章JavaScript入门

Pig Pig Cat

已于 2022-11-08 23:04:59 修改

阅读量192

点赞数

文章标签： javascript 前端开发语言

于 2022-10-31 18:20:18 首次发布

本文链接：https://blog.csdn.net/weixin_56941647/article/details/127608546

版权

1.1.4.JavaScript与ECMAScript的关系

1.1.1什么是JavaScript

JavaScript：是Web开发领域中的一种功能强大的编程语言。

作用：主要用于开发交互式的Web页面，使网页的互动性更强，用户体验更好。

网页制作涉及的技术：HTML、CSS和JavaScript。

HTML代表结构，结构是网页的骨架，从语义的角度，描述页面结构。
CSS代表了样式，样式是网页的外观，从审美的角度，美化页面。
JavaScript代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。
JavaScript内嵌于HTML网页中，通过浏览器内置的JavaScript引擎直接编译，把原本只用来显示的页面，转变成支持用户交互的页面程序。

举例:

1.1.2JavaScript的由来

时间：1995年。
人物： Brendan Eich（布兰登·艾奇）。
地点： Netscape（网景）公司，现在的Mozilla。
事件：在网景导航者浏览器上首次设计出了JavaScript。
名称： Netscape最初将这个脚本语言命名为LiveScript。

更名： Netscape 与 Sun 公司合作之后将其改名为 JavaScript 。
原因：由于当时Sun 公司（ 2009 年被 Oracle 公司收购）推出的 Java 语言备受关注， Netscape 公司为了营销借用了 Java 这个名称。
事实：JavaScript 与 Java 本质上是两种不同的编程语言。

问题：JavaScript在设计之初是做什么的呢？
答案：是一种可以嵌入到网页中的编程语言，用来控制浏览器的行为。
举例：直接在浏览器中进行表单验证，用户只有填写格式正确的内容后才能够提交表单，避免了因表单填写错误导致的反复提交，节省了时间和网络资源。

缺陷：JavaScript语言非常灵活，其语言特性也产生了一些不良的影响。
举例1：利用JavaScript制作网页上的漂浮广告、弹窗，让用户感到厌烦。
举例2：利用Web开发中的安全漏洞，在网页中编写恶意代码，窃取用户网站身份信息、传播病毒等。

建议：要端正态度和奠定扎实的技术功底。
目的：希望JavaScript推动Web技术的发展，造福每一位互联网用户。

现今承担更多的责任：尤其是当Ajax技术兴起之后，浏览器和服务器可以进行异步交互了，网站的用户体验又得到了更大的提升。
举例：当人们在百度的搜索框中输入几个字以后，网页会智能感知用户接下来要搜索的内容。

JavaScript的用途已经不仅局限于浏览器了，Node.js的出现使得开发人员能够在服务器端编写JavaScript代码，使得JavaScript的应用更加广泛。

1.1.3JavaScript的特点

1.脚本语言

脚本（Script）简单地说就是一条条的文本命令，按照程序流程执行。
常见的脚本语言：JavaScript、VBScript、Perl、PHP、Python等。
非脚本语言：C、C++、Java、C#等。

2.可跨平台

几乎所有的浏览器，包括手机等各类移动设备。
特点：JavaScript语言不依赖操作系统，仅需要浏览器的支持。

3.支持面向对象

面向对象是软件开发中的一种重要的编程思想，其优点非常多。
基于面向对象思想诞生了许多优秀的库和框架，可以使JavaScript开发变得快捷和高效，降低了开发成本。
举例：除了经典的JavaScript库，又诞生了Bootstrap、AngularJS、Vue.js、Backbone.js、React、Wwebpack等框架和工具。

1.1.4.JavaScript与ECMAScript的关系

ECMAScript（就是我们说的ES）指的是Ecma发布的浏览器脚本语言的标准。

JavaScript是网景公司在Navigator 2.0浏览器中内置的脚本语言。

Jscript是微软公司在Internet Explorer 3.0浏览器中内置与JavaScript相近的语言，是微软对ECMAScript规范的实现。

ES6 ：指的是2015年Ecma国际发布了新版本ECMAScript 2015

特点：相比前一个版本做出了大量的改进。

建议：考虑到仍然有很多用户还在使用旧版本的浏览器，使用新特性时考虑网页的兼容性。

1.2.开发工具

JavaScript中可以使用的开发工具主要有两大类：

1.文本编辑工具:EditPlus、Notepad++、记事本、HBuilder…

2.可视化的集成开发工具：Dreamweaver、NetBeans…、vscode(强烈推荐)

1.3 JavaScript入门

1.3.1.JavaScript引入方式

（1）嵌入式

嵌入式就是使用<script>标签包裹JavaScript代码，直接编写到HTML文件中

type 属性用于告知浏览器脚本的类型。

type 默认值为 text/ javascript （ HTML5 ），可以省略 type 属性。

(2)外链式（死了都要爱）

外链式是指将JavaScript代码保存到一个单独的文件中，通常使用“js”作为文件的扩展名，然后使用<script>标签的src属性引入文件中。

相比嵌入式，外链式的优势可以总结为以下3点：

① 嵌入式会导致HTML与JavaScript代码混合在一起，不利用修改和维护。

② 嵌入式会增加HTML文件的体积，影响网页本身的加载速度，而外链式可以利用浏览器缓存提高速度。

③ 外链式有利于分布式部署。网页中链接的js、css、图片等静态文件可以部署到CDN服务器上，利用CDN的优势加快下载速度。

(3)行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。

注意：

由于现代网页开发提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScript三部分的代码，避免直接写在HTML标签的属性中，从而更有利于维护。因此在实际开发中不推荐使用行内式。

1.3.2.常用输出语句

（1）

（2）

1.3.3.注释

概念：注释可便于代码的可读性，在程序解析时会被JavaScript解释器忽略。

分类：单行注释、多行注释。

表示方式：单行注释使用“//”、多行注释使用“/* */”。

单行注释：以“//”开始，到该行结束或JavaScript标记结束之前的内容都是注释。

<script>
  document.write('Hello, JavaScript');	   // 输出一句话
</script>

多行注释：多行注释以“/*”开始，以“*/”结束，它们之间的内容为多行注释。

<script>
  /*
  alert('Hello, JavaScript');
  console.log('1234');
  */
</script>

注意:

多行注释中可以嵌套单行注释。

多行注释中不能再嵌套多行注释。

1.3.4.注意事项

在编写JavaScript代码时应注意基本的语法规则，避免程序出错：

严格区分大小写，在编写代码时一定注意大小写的正确性。

代码对空格、换行、缩进不敏感，一条语句可以分成多行书写。

如果一条语句结束后，换行书写下一条语句，后面的分号可以省略。

1.3.5总结

Javascript是一种基于对象的，事件驱动的，相对安全的跨平台的客户端脚本语言
<script>标记的作用是在网页中嵌入javacript脚本或链接一个外部脚本文件
JS既可以出现在<head></head>之间，也可以出现在<body></body>之间
Javascript程序代码既可以嵌入到HTML文档中，也可以独立成一个文件。当嵌入到HTML文档中时，文件的扩展名为.html或.htm；当独立成一个文件时，文件的扩展名为.js。
一般有三种方式使用JS输出内容。