分享学JavaScript的第一天

时间  2020-10-27 标签 javascript css html 前端 java node 程序员 web 浏览器 服务器

一. 开发工具

vscode 、sublime 、webstromjavascript

vscode 官网下载,下载插件css

​ 插件 Chinese 中文插件html

在浏览器打开 :前端

- view in browser //  在浏览器打开

- auto close tag    / /自动添加关闭标签

- JavaScript (ES6) code snippets //  ES6片断

- Bracket Pair Colorizer //    高亮颜色对比

- color highlight //      颜色

- html css support //  HTML css 支持

- background  //   背景图片 好看

- live  server     //   (实时刷新)

二.关于浏览器

1. 浏览器发展

  1. 1990年:蒂姆·伯纳斯-李发明了第一个网页浏览器WorldWideWeb,后更名为Nexus
  2. 1993年:马克 安德森在美国伊利诺大学开发了MOSIAC浏览器,显示图片,真正意义图形浏览器,必定要记得这个浏览器
  3. 1994年: 马克 安德森和吉姆 克拉克（硅图SGI）成立了一个公司MOSIAC comunication corporation 由于商标权问题更名为Netscape comunication corporation网景通信公司,开发了Netscape navigation(大名鼎鼎网景浏览器)
  4. 1995年:IE收购spy glass,得到了MOSIAC的使用和商标权.更名为IE浏览器
  5. 1998年,网景竞争失利之后成立了非正式组织Mozilla,网景也别美国在线收购
  6. 2003年,IE员工与原Netscape成立火狐,同年Opera兴起,苹果也推出Safari
  7. 2008年:谷歌很空出世

2. 浏览器内核分类

1. 谷歌浏览器	           +大部分手机浏览器	weikit/blink内核
2. 火狐浏览器		   Gecko内核     
3. Opera浏览器		Presto/blink内核    
4. IE浏览器			Trident内核         
5. Safari浏览器		webkit内核

3. 浏览器的组成

  1. 外壳
  2. 内核

    渲染引擎java

    • 渲染引擎负责网页中内容的显示,HTML+CSS

    JS解析引擎node

    • JS引擎建立一个环境，在这个环境中Js引擎能够解释、编译和执行JS代码

三. 关于JS

1.JS的发展历史

  • JS的诞生

    在1995 年 Netscape，一位名为 Brendan Eich 的工程师创造了 JavaScript，随后在 1996 年初，JavaScript 首先被应用于 Netscape 2 浏览器上。最初的 JavaScript 名为 LiveScript（活力脚本），后来由于 Sun Microsystem 的 Java 语言的兴起和普遍使用，Netscape 出于宣传和推广的考虑，将它的名字从最初的 LiveScript 更改成 JavaScript——尽管二者之间并无什么共同点。这即是以后混淆产生的根源。。程序员

    几个月后，Microsoft 随着 IE 3 推出了一个与之基本兼容的语言 JScript（注意微软的人生哲学，当它发现别人的东西很好的时候，就必须拧巴的推出本身的，而后本身的又被市场排斥，又开始兼容别人的）。又几个月后，Netscape 将 JavaScript 提交至 Ecma International（一个欧洲标准化组织）， ECMAScript 标准初版便在 1997 年诞生了，随后在 1999 年以 ECMAScript 第三版的形式进行了更新，从那以后这个标准没有发生过大的改动。因为委员会在语言特性的讨论上发生分歧，ECMAScript 第四版还没有推出便被废除，但随后于 2009 年 12 月发布的 ECMAScript 第五版引入了第四版草案加入的许多特性。第六版标准已经于2015年六月发布 。web

  • JS的发展

    2003年： 页面上漂浮的广告、弹窗广告；因此当时的浏览器就推出一个功能，禁用广告，实际上本质就是禁用JavaScript。浏览器

    **2004年：**谷歌打开了Ajax这个潘多拉的盒子，今后JavaScript被人重视，不少人开始学习JS语言。服务器

    **2007年：**三层分离，iPhone发布，人们开始重视用户体验。你们发现了，JavaScript是web页面中制做交互效果惟一的语言，因此把JS的重视程度，提到了至关高的一个地位。

    2008年：Chrome浏览器发布，V8引擎加快了JS的解析，以前的浏览器解析JS的时候卡顿卡顿的，动画效果是蹦蹦的。在Chrome里，它的引擎叫作V8，运行JS很流畅。

    2009年：jQuery变得流行，解决了浏览器兼容问题，制做页面效果变得简单，愈来愈多的初学者愿意学习JavaScript。

    2011年：Node.js获得普遍应用，实际上就是把JavaScript运行在了服务器上，单线程非阻塞，可以让企业用最小的成本实现后台网站，好比以前4万的服务器都卡，如今用了node以后，4000的机器都很流畅。

    2015年：ECMA6发布，叫作ECMA2015。重量级的改变，把语言的特性颠覆性的一个加强。

2.JS的特色

​	弱类型,解释性,单线程

3.JS的三大组成部分

  • ECMAScript 为JS基本的语法 eama-262

    语法 标准( 规定js使用规则 ), js是ECMAScript的实现

  • DOM Document Object Model 文档对象模型

    提供和指定标准的组织是w3c

    提供页面元素和方法的整合工具箱，咱们能够直接使用里面关于文档对象的一系列方法, 这使咱们,能够操做标签.

  • BOM Browser Object Model 浏览器对象模型

    提供操做浏览器的方法的整合工具箱. 因此js里面,有一些东西,是关于浏览器的,如弹窗,右键的菜单,滚动条.

4.JavaScript用途

前端三层

结构层 html 语义的角度描述页面的结构

样式层 css 审美的角度装饰页面

行为层 JavaScript 交互的角度提高用户体验

用来制做页面交互,提高用户体验

禁用JavaScript 网页讲不能正常显示显示

5. JS代码存放在位置

  • 外链 为告终构,样式,行为相分离,通常开发使用外链

    src引入便可,没啥好说的 能够在外部js里面 写上window.onload = function(){} 把逻辑写在这个函数里

  • 内嵌 学习多使用内嵌

    存放在<script>标签内,js代码的解析顺序,基本从上至下,通常js存在在head里,或者body结束标签前,

    建议所有写在body结束前.须要不少js代码的页面若是把js所有写在头部,可能会致使很明显的延迟.(运行js瞬间 中止对html文档的渲染) (还有个缘由是 爬虫还检索网页时,一开始爬到不少的js文件,就会放弃掉你这个页面的主干,会下降网页的一个排名)

  • 行内 不推荐使用,不利于调试和维护

    存在标签内

    <div onclick='alert("我爱你")'></div>

四. 学习方法

  • 要多去“品”程序，多去思考内在逻辑，读懂每一行代码！
  • JS基本没用重复性劳动,大可能是创造性的劳动。HTML、CSS都是重复的劳动
  • 永远不要背程序，每个程序都必须本身会写，重复老师的上课案例。认真作做业

五. Hello world

学习任何语言,都要先输出点什么,程序员都习惯输出"Hello world",世界,你好,.

<script type="text/javascript"> alert("Hello world") </script>

1. 内嵌方式的注意

咱们学习就使用内嵌方式

JavaSript程序，要写在HTML页面中，运行页面的时候，这个页面上的JS也就一块儿运行了。也就是说，js的运行必须有宿主环境，最最多见的宿主环境，就是浏览器。

JS写在<script>标签对儿里面，type属性就是类型，text/javascript就是纯文本的javascript；

注意，这个type必须写准确，能够不写，可是要写，必定要写准确，不然失效。

2. alert()语句

alert在英文中是’警报’的意思,是让页面弹出警告框.

这条语句是一个内置函数,至于什么是函数,先不用了解,以后会学的,咱们只要知道这是浏览器给咱们自带的一个方法,会使用就OK啦

alert(“hello world”);

3. 控制台

控制台是Chrome浏览器中检查功能,快捷键是F12,英文是console

程序中的错误会在控制台输出.是调试程序的利器.

好比有语法错误

alert(你好);

若是想本身在控制台中输出点什么,可使用语句

console.log();

console.log就是控制台,log是日志的意思,表示打印

好比:

console.log("hello world");

3.行文特性(书写注意)

  • 英文半角符号
  • JavaScript语句和语句之间换行、空格、缩进都不敏感。
  • 语句后面的分号，不是必须写的，若是语句是一行一行写的，那么分号是没有必要的。可是压缩页面的时候，语句结尾的分号，很是重要。
  • 咱们把页面作好以后，一般都会进行压缩，用软件把全部的空格、换行都去掉。此时，语句末尾的分号显得很是重要，若是去掉分号，将不能执行。

4.注释方式

注释给别人看的,对读程序是一个提示做用

复习HTML和css注释方式

HTML注释方式

<!-- HTML注释方式 -->

CSS注释方式

/* CSS注释方式 */

JavaScript注释方式

  • 单行注释
// 单行注释
  • 多行注释
/* 我是被注释的第一行 我是被注释的第二行 */

JavaScript注释注意点

多行注释不能嵌套

我是注释第一行
/* 注释错误的注释方式 */
联系我们 沪ICP备13005482号-10