目 录CONTENT

文章目录

JavaScript概述

Administrator
2020-07-24 / 1 评论 / 0 点赞 / 12966 阅读 / 12476 字 / 正在检测是否收录...

JavaScript概述

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

Web三要素结构HTML表现CSS行为JavaScipt

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

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

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

JavaScript到底是什么 ?

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

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

脚本语言的发展史

  1. asp+vbscript这是最老的一代网页开发技术 ,由微软开发出来的技术,它是用于开发动态网页的

    • asp:active server pages动态服务器网页开发
    • vbscript则是一个网页的脚本语言

    在这个时候vbscript的出现本意是在网页上面做脚本语言的,后期微软把这个语言移植到了PC端运行,这个就产生了很严重的安全隐患。后期就很少有人使用vbscript

    同时vbscript因为是微软出品,所以它对IE的兼容性很好,而其它的浏览器的兼容性则非常差

  2. J#+JScript是微软出品的第二代脚本语言,它借鉴了当时比较流行的开发语言java的特点,来出品了一个新的脚本语言。后来因为侵权被告了,这个语言就停止了

  3. 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的方式非常像,也有三个地方

  1. JavaScript代码写在HTML标签的某一个属性里面

    <h2 style="color: red;" onclick="alert('hello world')">这是一个段落</h2>
    

    这个时候我们可以看到我们的alert('hello world')这一段JavaScript代码就写在了onclick这一个属性后面(后面我们会讲到这个属性其实是一个事件)

  2. JavaScript代码写在<script>的标签里面

    <script type="text/javascript">
        alert("吃了没,小朱");
    </script>
    

    在html5的页面里面,type的默认属性值就是text/javascript,所以后期可以省略

  3. 可以写在单独的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这个一个选项卡

image-20200619140303179

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

image-20200619140523531-1656299747906

0

评论区