JavaScript概述-杨标的博客

JavaScript概述

在很早以前就跟同学们提过Web的三个部分，结构HTML，表现CSS ，行为JavaScript

一个显示什么内容是由HTML决定的

这个内容显示成什么样子则是由CSS决定的

这个页面上面具备什么功能则是由JavaScript来决定的.JavaScript的行为指的是用户与页面的一种交互行为。交互行为可以控制页面上面的一些操作【产生交互行为的方式不仅仅只是JavaScript】

JavaScript到底是什么？

JavaScript是一种网页的脚本语言，它运行在浏览器里面。最初的时候只是浏览器的一和脚本语言，后期已经演变成了服务器语言(node.js)

在浏览器的脚本语言里面，最初其实并不是JavaScript，而是其它的语言

脚本语言的发展史

asp+vbscript这是最老的一代网页开发技术，由微软开发出来的技术，它是用于开发动态网页的
- asp:active server pages动态服务器网页开发
- vbscript则是一个网页的脚本语言
在这个时候vbscript的出现本意是在网页上面做脚本语言的，后期微软把这个语言移植到了PC端运行，这个就产生了很严重的安全隐患。后期就很少有人使用vbscript

同时vbscript因为是微软出品，所以它对IE的兼容性很好，而其它的浏览器的兼容性则非常差
J#+JScript是微软出品的第二代脚本语言，它借鉴了当时比较流行的开发语言java的特点，来出品了一个新的脚本语言。后来因为侵权被告了，这个语言就停止了
netscape公司（网景）联合Java推出了自己的脚本语言全称叫JavaScript,它也是结构了Java语言的特点，简单，容易上手，并且兼容之前JScript

目前的JavaScript主要用于浏览器端和服务器端的开发，它主要包含了下面的三个部分

ECMAScript 语法基础

主要包含：变量，数据类型，运算符，流程控制，函数，作用域，执行上下文，面向对象，数组
DOM全称叫document object model文档对象模型

它主要技术是使用JavaScript代码去操作页面上面的文档（页面上面的元素）
BOM全称叫browser object model浏览器对象模型

它主要的技术就是使用JavaScript去操作浏览器的相关设置，如果本地储存，session管理，网络通信，地理定位等

JavaScript运行在什么地方

之前在学习Web三要素的时候，我们知道 CSS代码是可以写在style属性里，也可以写在<style>标签里面，更可以写在一个单独的CSS文件里面，那么我们的JavaScript代码应该写在什么地方呢？

JavaScript的运行与CSS的方式非常像，也有三个地方

JavaScript代码写在HTML标签的某一个属性里面
```
<h2 style="color: red;" onclick="alert('hello world')">这是一个段落</h2>
```
这个时候我们可以看到我们的alert('hello world')这一段JavaScript代码就写在了onclick这一个属性后面（后面我们会讲到这个属性其实是一个事件）
JavaScript代码写在<script>的标签里面
```
<script type="text/javascript">
    alert("吃了没，小朱");
</script>
```
在html5的页面里面，type的默认属性值就是text/javascript，所以后期可以省略
可以写在单独的JS文件里面，然后再通过<script>标签导入进来
```
<script type="text/javascript" src="./js/01.js"></script>
```
上面的代码就是从js的目录下面导入了一个01.js这个文件

在这个地方有2个小细节要注意：
- 我们的<script>标签是可以写在页面的任何地方，但是一般情况下，我们会把它写在body标签的后面
- <script>标签通过src属性导入了一个JS文件以后，这个标签内部就不能再写JS代码了
```
<script type="text/javascript" src="./js/01.js">
    alert("我又要弹窗了");
</script>
```
  上面的代码是不对的

JavaScript的注释

在之前学习HTML与CSS的时候，我们都有它们相关的注释方法，同时在JavaScript代码里面，也有它们的注释方法

在JavaScript里面代码分为单行注释与多行注释

单行注释：使用双斜线来完成注释

<script type="text/javascript">
    //alert("hello world");
    //这就是注释
</script>

多行注释：这种注释方式与CSS的注释方式相同

<script type="text/javascript">
	/*
        alert("你好啊");
        alert("标哥哥");
        在这里，这就属于多行注释
    */
</script>

到现在为止，我们就已经发现一个html的页面当中会存在三种注释方式

<style type="text/css">
    /*这是CSS代码里面的注释 */
</style>
<body>
    <!-- 这是网页里面的注释 -->
</body>
<script type="text/javascript">
    //alert("hello world");

    /*
        alert("你好啊");
        alert("标哥哥");
    */
</script>

一般的注释我们都会直接使用快捷键来完成，在VSCode的编辑器里在，注释的快捷键是Ctrl+/

JavaScript的调试方式

之前学习HTML与CSS的时候，我们都知道，HTML和CSS都有各自的调试方式，这种调试方式给我们的开发带来了极大的便利

在学习JavaScript的时候，我们也可以进行代码的调试，使用方法也很简单

直接在页面上面打开调试工具栏，然后切换到Console这个一个选项卡

如果在JavaScript里面代码出现了错误，它会在Console控制台显示出来。如下所示

image-20200619140523531-1656299747906

目录CONTENT

JavaScript概述