01-JavaScript基础-开篇介绍

文章配套视频

• http://study.163.com/course/courseMain.htm?courseId=1004573059

• 加入学习交流群，大家一起一起进步

  
  JavaScript全栈交流群

写在开头

在学习JavaScript之前，我们需要对以下知识点有所了解：

编程语言

• 编程语言是人和计算机交流的工具，工程师通过编程语言基于计算机去开发一款款软件
• 编程语言就是一门语言，只不过语法比较特殊，我们得学习之后才能用这门语言来开发相应的东西
• 编程语言大致可以分为以下几类： 机器语言、汇编语言、高级语言

    机器语言    000000101 000000010  000000000
    汇编语言    MOV AX, 1 ADD AX, 1
    高级语言    int  a = 10
  

• JavaScript就是一门编程语言，属于高级语言

JavaScript的诞生

1994 年，网景公司（NetScape）发布了Navigator浏览器0.9版， 这是历史上第一个比较成熟的浏览器，引起了广泛关注。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。。。。网景公司急需要一门网页脚本语言，使得浏览器可以与网页进行互动。

• 1995年5月，网景公司做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的网页作者也能很快上手。

• 1995年4月，网景公司录用了34岁的系统程序员Brendan Eich, 他只用10天时间就把Javascript设计出来。

布兰登·艾奇

JavaScript语言的前世今生

• 1995.2月 Netscape公司发布LiveScript，后临时改为JavaScript，为了蹭上Java的热浪。
• 欧洲计算机制造商协会（ECMA）英文名称是European Computer Manufacturers Association
• 1997 年，以JavaScript 1.1 为基础。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39（ECMA的小组） 锤炼出了 ECMA-262，也就是ECMAScript1.0。
• 1998年6月，ECMAScript 2.0版发布。
• 1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
• 2007年10月，ECMAScript 4.0版草案发布：分歧太大，失败告终。
• 2009年12月，ECMAScript 5.0版正式发布
• 2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。
• ...

JavaScript来源于借鉴

• 借鉴C语言的基本语法；
• 借鉴Java语言的数据类型和内存管理；
• 借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；
• 借鉴Self语言，使用基于原型（prototype）的继承机制。

什么是JavaScript?

• JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

解释型语言：程序执行之前，不需要编译，直接运行时边解析边执行的语言
编译型语言：程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件

• 简单易用
  可以使用任何文本编辑工具编写
  只需要浏览器就可以执行程序
• 解释执行（解释语言）
  事先不编译
  逐行执行
  无需进行严格的变量声明
• 基于对象
  内置大量现成对象，编写少量程序可以完成目标

JavaScript的组成

• ECMAScript：JavaScript的语法标准
  • ECMA是一个组织，即欧洲计算机制造商协会
  • ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
  • JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容
• DOM：JavaScript操作网页上的元素的API
• BOM：JavaScript操作浏览器的部分功能的API

三足鼎立

JavaScript的使用场景

• 随着JavaScript这门语言的完善，我们可以用它来进行前端开发、后端开发和移动端开发。当然，学习这门语言最开始的突破口在于前端开发。我们一起看看在前端领域它能做什么吧！
  • 客户端数据计算
  • 客户端表单合法性验证
  • 浏览器对象的调用
  • 浏览器事件的触发
  • 网页特殊显示效果制作
  • ....

JavaScript是无所不能的

JavaScript和HTML、CSS的关系

• Html：是用来制作网页，简单来说就是编写网页结构
• CSS： 美化网页（样式）
• Javascript: 实现网页与客户之间互动的桥梁，让网页具有丰富的生命力

对比现实，三者的关系

JavaScript的语法规范

• JavaScript有三种书写格式, 分别是"行内式"、"页内式"、"外链式"

  • 行内式

     <button onclick="alert('今天天气很好！');">今天天气很好！</button>
    

  • 页内式

     </body>
          ......
         <script type="text/javascript">
            alert("今天天气很好！");
         </script>
     </body>
    

    • 页内式注意点

      • <script></script>标签中的js代码一半写在文档的尾部；

      • 网页是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);

      • HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。所以如果把js代码如果写在head中, 那么js代码执行完毕之前后续网页无法被加载。

  • 外链式格式

     <script type="text/javascript" src="01-js书写格式.js"></script>
    

    • 外链式注意点
      外链式的script代码块中不能编写js代码, 即便写了也不会执行

          <script type="text/javascript" src="index.js">
                alert("今天天气很好！"); // 不会被执行
           </script>
    

    • 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度。

Javascript 初体验

• 使用JavaScript在网页中输出一句话

  • 方式一
    在网页中弹出显示框，显示信息

      <script>
            alert("Hello，JavaScript！"); 
      </script>
    

  • 方式二
    在控制台输出消息，一般用来调试程序

       <script>
             console.log("Hello，JavaScript！"); 
             console.warn("警告输出！"); 
             console.error("错误输出！"); 
       </script>
    

  • 方式三
    在网页中弹出输入框，一般用于接收用户输入的信息

      <script>
            prompt("Hello，JavaScript！"); 
      </script>
    

  • 方式四
    在网页中弹出提示框，显示信息，该方法一般与if判断语句结合使用

     <script>
           comfirm("Hello，JavaScript！"); 
     </script>
    

  • 注意事项

    1. 编写Javascript注意语法规范，一行代码结束后必须在代码最后加上;
       如果不写分号，浏览器会自动添加，但是会消耗一些系统资源；
       此外，容易加错分号，所以在开发中分号必须要写。

    2. 在JavaScript中是严格区分大小写的

          comfirm("Hello，JavaScript！");   // 正确
          COMFIRM("Hello，JavaScript！");   // 错误 
       

    3. JavaScript中会忽略多个空格和换行

        console.log
        (
            "Hello，JavaScript！"
        );  
       

• JavaScript中注释语法

  • 什么是注释？

    • 注释是就是注解、解释的意思； 在JavaScript中它可以用来解释某一段程序或者某一行代码是什么意思，方便开发者之间的交流；
    • 注释可以是任何文字，包括中文、英文和各种字符；
    • 在开发工具中注释一般是灰色或者绿色

  • 为什么要写注释？

    • 方便自己，方便他人（便于检查代码，排除错误）

  • 如何写注释？

    • 单行注释

         // 单行注释
         var name;
      

      使用范围:任何地方都可以写注释：函数外面、里面，每一条语句后面
      作用范围: 从第二个斜线到这一行末尾
      快捷键:Ctrl+/

    • 多行注释

         /*多行注释*/
         var name;
      

      使用范围:任何地方都可以写注释：函数外面、里面，每一条语句后面
      作用范围: 从第一个/到最近的一个/ 之间

  • 注释使用注意

    • 单行注释可以嵌套单行注释、多行注释
      // 北京
      // 北京 // 南京
      // /* 北京 */
    • 多行注释可以嵌套单行注释
      /*
      // author：jack
      // intro：It's good
      */
    • 多行注释不能嵌套多行注释

关注公众号获取更多学习资料