01-JavaScript基础-开篇介绍

最新推荐文章于 2025-04-11 19:11:11 发布

撩课学院

最新推荐文章于 2025-04-11 19:11:11 发布

阅读量439

点赞数 1

分类专栏： Web-基础部分文章标签： javascript html css 学习笔记

本文链接：https://blog.youkuaiyun.com/lkitlike/article/details/83748881

版权

Web-基础部分专栏收录该内容

15 篇文章

订阅专栏

文章配套视频

https://study.163.com/course/introduction/1005973001.htm

写在开头

在学习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>
页内式注意点
标签中的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
        */
      多行注释不能嵌套多行注释