一、Javascript简介
网页、网站和应用程序
• 网页:单独的一个页面。
• 网站:一系列相关的页面组合到一起。
• 应用程序:可以和用户产生交互,并实现某种功能。
1.1 Javascript用途
前端三层
• HTML 结构层 从语义的角度描述页面结构
• css 样式层 从美观的角度描述页面样式
• Javascript 行为层 从交互的角度描述页面行为Javascript 的应用场景Javascript 发展到现在几乎无所不能,常见的应用场景有:• 1. 网页特效• 2. 服务端开发(Node.js)• 3. 命令行工具(Node.js)• 4. 桌面程序(Electron)• 5. App(Cordova)• 6. 控制硬件-物联网(Ruff)• 7. 游戏开发(cocos2d-js)• ……Javascript 是什么
• Javascript 是一种运行在客户端 的脚本语言 ,最早是在 HTML(标准通用标记语言下的一个应用)网页上使用,用来给 HTML 网页增加动态功能。
• 浏览器就是一种运行 Javascript 脚本语言的客户端,Javascript 的解释器被称为Javascript引擎,为浏览器的一部分。
1.2 Javascript诞生
Javascript 简史
• 在 WEB 日益发展的同时,网页的大小和复杂性不断增加,受制于网速的限制,为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担,当时走在技术革新最前沿的Netscape(网景)公司,决定着手开发一种客户端语言,用来处理这种简单的验证。• 1995 年,就职于Netscape公司的Brendan Eich,开始着手为即将于 1996年2月发布的NetscapeNavigator 2 浏览器开发一种名为 LiveScript 的脚本语言。为了尽快完成 LiveScript 的开发,Netscape 与 Sun 公司建立了一个开发联盟。在 Netscape Navigator 2 正式发布前夕,Netscape 为了搭上媒体热炒 Java 的顺风车,临时把 LiveScript 改名为 Javascript。• 由于 Javascript 1.0 获得的关注度越来越高, 1996 年,微软就在其 Internet Explorer 3 中加入了名为 JScript 的 Javascript 实现,这意味着有了两个不同的Javascript 版本,导致Javascript没有一个标准化的语法和特性。• 1997 年,以 Javascript 1.1 为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA,European Computer Manufacturers Association)。该协会指定 39 号技术委员会(TC39,Technical Committee #39)负责“ 标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义”。TC39 由来自 Netscape、Sun、微软、Borland 及其他关注脚本语言发展的公司的程序员组成,他们经过数月的努力完成了 ECMA-262 标准,定义一种名为 ECMAScript 的新脚本语言。
ECMAScript 发展过程
Javascript是跨平台的:Javascript是依赖于浏览器本身的,与操作系统无关。
1.3 Javascript从丑小鸭到金凤凰
2003年:牛皮鲜,页面上漂浮的广告、弹窗广告;所以当时的浏览器就推出一个功能,禁用广告,实际上本质就 是禁用Javascript。页面上的特效,都特别俗,比如鼠标后面跟随的星星,然后工程师对JS的感觉就是不用学习,生搬硬套,大量的“效果宝盒”软件,一套就有各种特效了。没有人琢磨语言特性。2004年:谷歌打开了Ajax这个潘多拉的盒子,从此Javascript被人重视,很多人开始学习JS语言。当时问世了两本JS巨作《犀牛书》、《高级程序设计》。2007年:三层分离,iPhone发布,人们开始重视用户体验。大家发现了,Javascript是web页面中制作交互效果唯一的语言,所以把JS的重视程度,提到了相当高的一个地位。招聘信息里面开始出现独立的“JS工程师”职位了,之前都是后台工程师捎带脚写写JS。2008年:Chrome浏览器发布,V8引擎加快了JS的解析,之前的浏览器解析JS的时候卡顿卡顿的,动画效果是蹦蹦的。在Chrome里,它的引擎叫做V8,运行JS很流畅。2009年:jQuery变得流行,解决了浏览器兼容问题,制作页面效果变得简单,越来越多的初学者愿意学习Javascript。2010年:Canvas画布技术得到众多浏览器支持,可以用Canvas替代Flash了,并且能制作小游戏,比如偷菜、停车小游戏。我们有这个课程,做Flappy Bird、俄罗斯方块、消消乐、接触物理抛物线引擎。2011年:Node.js得到广泛应用,实际上就是把Javascript运行在了服务器上,单线程非阻塞,能够让企业用最小的成本实现后台网站,比如之前4万的服务器都卡,现在用了node之后,4000的机器都很流畅。2012年:HTML5+CSS3的流行,也带火了Javascript。2013年: hybrid app模式开始流行。就是做手机app的时候,老板们发现要雇佣三队人马,ios、安卓、windows phone。花三份工资,并且产品还不好迭代。所以人们发明了用网页技术开发手机App的技术,叫做web app。hybrid app就是混合app,同时结合web技术和原生开发技术。省钱,好迭代。2015年:ECMA6发布,叫做ECMA2015。重量级的改变,把语言的特性颠覆性的一个增强。
1.4 Javascript 的组成
• Javascript 是由 ECMAScript,DOM 和 BOM 三者组成的。
1.4.1 ECMAScript
ECMA 欧洲计算机制造联合会
ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
Javascript是脚本语言,所以必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容
1.4.2 BOM
浏览器对象模型
通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等
1.4.3 DOM
文档对象模型
DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
二、Hello World!
2.1 Javascript书写的位置
JavaSript程序,要写在HTML页面中,运行页面的时候,这个页面上的JS也就一起运行了。
也就是说,js的运行必须有宿主环境,最最常见的宿主环境,就是浏览器。JS写在
语法
• 语法1:alert语句作为一个函数,如果要执行,必须在后面紧跟着添加小括号。
• 语法2:alert语句作为一个函数,小括号内部可以传递参数,根据数据类型不同,有不同的语法要求,例如文字内容(字符串)必须写在一对引号内部。
• 语法3:如果需要添加一对引号,要么是单引号,要么是双引号,不能一单一双。
• 语法4:所有的有特殊功能的符号必须是英文字符。
• 语法5:语句后面的分号必要性。
• 语法6:js 对换行、缩进、空格也不敏感。
• 语法7:如果 js 中没有特殊控制结构,代码都是从上往下、从左往右进行加载。
2.3.2 prompt() 语句
• prompt:提示。
• 作用:弹出一个对话框,内部有一个提示语句以及一个输入框,可以在输入框中根据提示任意输入内容。
• prompt 语句也是 js 内置的一个功能,必须加小括号执行,有两个参数可以进行传递,每个参数一般都是字符串类型,必须加引号,两个参数中间用逗号分隔,引号和逗号都必须是英文输入法状态。• prompt("请输入您的年龄","18");
• 第二个参数位置的值,可以删除并重新输入新的内容,甚至代码中可以不写第二个参数。
• prompt("请输入您的年龄");
2.3.3 confirm() 语句
在网页中弹出提示框,显示信息,该方法一般与if判断语句结合使用
2.3.4 console 控制台
• 在大部分浏览器中,都有一个控制台,内部可以查看 HTML、css 代码,甚至调试代码错误。
• 浏览器中右键点击审查元素(检查),都可以打开控制台。
• 快捷键: F12.
• 控制台中有一个 console(控制台) 的选项面板,在 js 中有非常重要的作用。
chrome 浏览器的控制台
IE 浏览器的控制台
控制台功能
• 作用一:帮助程序员调试程序中出现的 bug。可以提示错误的个数、错误所在的行数、错误类型。
• 作用二:可以在控制台中直接书写一些语句,进行执行。
• 作用三:js 有一个内置对象 console,内部封装了大量的属性和方法(函数),可以通过给console 对象打点调用方法名()、属性名方式去执行。有一个叫做 log(日志)方法,可以实现参数位置自定义内容在控制台输出。
使用注意
1)一行代码结束后请加上 ;
如果不写分号,浏览器会自动添加,但是会消耗一些系统资源,此外,还容易加错分号,所以在开发中
分号尽量写上
2)JS中是严格区分大小写的
comfirm("Hello,Liao!"); // 正确
COMFIRM("Hello,Liao!"); // 错误
3)JS中会忽略多个空格和换行
console.log
( "Hello,Liao!"
);