01-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
        */
      • 多行注释不能嵌套多行注释
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容

  • Javascript简介 Javascript实现 虽然Javascript和ECMAscript通常都被人们用来...
    给我一炷香的时间阅读 619评论 0 3
  • 每天一句:没有方向感,我们不知道自己走向哪里。没有方向感,我们所有的努力就缺乏一个标准,我们每时每刻所有的努力都处...
    EndEvent阅读 622评论 0 2
  • 两岸微风叠千浪 翠柳依湖相映春 细看野鸭逐戏水
    一条路俩人走阅读 253评论 0 1
  • 一天很短,一辈子却很长 如今你在为谁而守候一生呐 在这寒风瑟瑟的日子里, 熙熙攘攘的人群中, 此刻,你在为谁守候。...
    书叶随风阅读 333评论 7 2
  • 花落花开花丛过。 林中雨路林里躲。 深秋时节。落枝叶。瞬间一现瞬息得。 倾听风吹。看雨落。山中瀑布皆磅礴。 雷鸣于...
    深白色0阅读 121评论 0 0