每天一句：没有方向感，我们不知道自己走向哪里。没有方向感，我们所有的努力就缺乏一个标准，我们每时每刻所有的努力都处在一种混沌与盲目的状态之中：没有对错、没有进退、没有成败得失。
一、JavaScript起源
JavaScript诞生于1995年，它当时的目的是为了表单输入的验证。因为在JavaScript问世之前，表单的验证都是通过服务器端验证。而当时都是电话拨号上网年代，服务器验证数据是一件非常痛苦的事情。
二、什么是JavaScript
JavaScript是一种具有面向对象能力、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为它不需要在语言环境下运行，而只需要支持它的浏览器即可。主要目的是，验证发往服务器端的数据、增加web互动、加强用户体验度等。
【JavaScript与Java，就像是雷锋塔与雷锋，两者之间并没有任何关系】
三、JavaScript历史
-
诞生
1995年，当时工作在Netscape(网景)公司的布兰登为解决类似于“向服务器提交数据之前验证”的问题。在Netscape Navigator2.0与Sun公司联手开发一个称之为LiveScript的脚本语言。为了营销便利，之后更名为JavaScript。 -
邪恶的后来者
因为JavaScript1.0如此成功，所以微软也决定进军浏览器，发布了IE3.0并搭载了一个JavaScript的克隆版，叫做JScript。 -
标准的重要
在微软进入后，有3种不同的JavaScript版本同时存在: Netscape Navigator3.0中的JavaScript、IE中的JScript、CEnvi中的ScriptEase。与其他编程语言不同的是，JavaScript并没有一个标准来统一其语法或特性，而这3种不同的版本恰恰突出了这个问题，随着业界担心的增加，这个语言标准化显然已经势在必行。 -
ECMA
1997年，JavaScript1.1作为一个草案提交给欧洲计算机制造协会(ECMA)。第39技术委员会(TC39)被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”。由于自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的TC39锤炼出了ECMA-262，该标准定义了叫做ECMAScript的全新脚本语言。 -
灵敏的微软、迟钝的网景
虽然网景开发了JavaScript并首先提交给ECMA标准化，但因计划改写整个浏览器引擎的缘故，网景玩了整整一年才推出“完全遵守ECMA规范”的JavaScript1.3。而微软早在一年前就推出了“完全遵守ECMA规范”的IE4.0。这导致一个直接恶果:JScript称为JavaScript语言的事实标准。 -
山寨打败原创
JScript成为JavaScript语言的事实标准，加上window绑定着IE浏览器，几乎占据全部市场份额，因此，1999年之后，所有的网页都是基于JScript来开发的。而JavaScript1.x编程可怜的兼容者。 -
网景的没落与火狐的崛起
网景在微软强大的攻势下，1998年全面溃败。但，星星之火可以燎原，同年成立Mozilla项目中Firefox(火狐浏览器)在支持JavaScript方面无可比拟，在后来的时间里一步步蚕食IE的市场，称为全球第二大浏览器。 -
谷歌的野心
谷歌浏览器，是一个由谷歌公司开发的开放原始码网页浏览器。以简洁的页面，极速的浏览，一举成为全球第三大浏览器。随着移动互联网的普及，嵌有Android系统的平板电脑和智能手机，在浏览器这块将大有作为。 -
苹果的战略
Safari浏览器是苹果公司各种产品的默认浏览器，在苹果的一体机(iMac)、笔记本(Mac)、MP4(ipod)、智能手机(iPhone)、平板(iPad)，并且在windows和Linux平台都有相应版本。目前市场份额全球第四，但随着苹果的产品不断的深入人心，具有称霸之势。 -
幸存者
Opera的全球市场份额第五，2%左右。它的背后没有财力雄厚的大公司，但它从“浏览器大战”存活下来的，有着非常大的潜力。
四、JavaScript核心
虽然JavaScript和ECMAScript通常被人们用来表达相同的含义，但JavaScript的含义却比ECMA-262中规定的要多得多。一个完整的JavaScript应该由三个不同的部分组成: 核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)。
-
ECMAScript介绍
由ECMAScript-262定义的ECMAScript与WEB浏览器的没有依赖关系。ECMAScript定义的只是这门语言的基础，而在此基础之上可以构建更完善的脚本语言。我们常见的WEB浏览器只是ECMAScript实现可能的宿主环境之一。 -
文档对象模型(DOM)
文档对象模型(DOM，Document Object Model)是针对XML但经过扩展用于HTML的应用程序编程接口(API，Application Programming Interface)。 -
浏览器对象模型(BOM)
访问和操作浏览器窗口的浏览器对象模型(BOM，Browser Object Model)。开发人员使用BOM可以控制浏览器显示页面以外的部分。而BOM真正与众不同的地方(也是经常会导致问题的地方)，还是它作为JavaScript实现的一部分，至今仍没有相关的标准。 -
JavaScript版本
身为Netscape(网景)“继承人”的Mozilla公司，是目前唯一沿用最初的JavaScript版本编号的浏览器开发商。在网景JavaScript转手给Mozilla项目的时候，JavaScript在浏览器中最后的版本号是1.3，后来，随着Mozilla继续开发，JavaScript版本号逐步递增。
五、JavaScript的引入
- JS代码，可以放在script标签内，script标签可以放置在HTML文档任何位置；
<script>
// JS代码
</script>
- JS代码，可以放置在外部的js文件中，通过script标签的src属性链接到页面中；
<script type="text/javascript" src="test.js" ></script>
注意: 导入外部JS文件的script不要添加JS代码；
注意
六、输出方式
- 向网页文档中输出
document.write()
document.writeln()
向网页文档中输出
- 向web控制台输出
console.log()
向web控制台输出
- 警告框
alert()
七、变量
JavaScript是弱类型脚本语言，使用变量之前可以无需定义；所以JavaScript支持两种方式引入变量。(其他语言例如C语言中，在定义时都会有类型的区分int a; float b;)
- 什么是变量?
变量即是可以存储数据的，可以改变的；
/* 初中数据题目
* 已知x为20, x + y = 100; 求y的值是多少?
*
* x: 20
* y: ?
* x + y = 100
*
* ===> y = 80
*
*/
// var是关键字，表示定义变量
// 定义了一个变量x，变量x的值为20
var x = 20;
// 定义了一个变量为y，变量y没有值
var y;
// x + y = 100; --> y = 100 - x
y = 100 - x;
alert(y); // 80
- 隐式定义: 直接给变量赋值
// 定义一个变量a，其值为'hello world'
a = "hello world";
b = 10;
- 显式定义: 使用var关键字定义变量(使用该方式声明变量时可以没有初始值，声明的变量类型是不确定的)
// 声明变量a，数据类型是不确定的
var a;
// 定义一个变量b，其值为'hello world'
var b = "hello world";
var c = 3;
- 一次性定义多个变量
var a,b,c;
var i=0, j=0, k=0;
- 命名规则
a、变量名必须以字母或下划线“_”或者“$”开头；
b、变量名长度不能超过255字符；
c、变量名中不允许使用空格，首字符不能为数字；
d、变量名区分大小写(备注: JavaScript是区分大小写的语言)；
八、基本运算符操作
- 加法 +
- 减法 -
- 乘法 *
- 除法 /
- 取余(求模) %
10 / 3 = 3 ··· 1
九、字符串拼接
加号有两种含义，如果都是为number类型时，即是加法操作；如果有一个是为字符串类型，即是字符串拼接；
var str1 = '中国';
var str2 = '台湾';
// 将字符串str1和str2拼接起来
var str3 = str1 + str2;
十、HTML属性操作
- 通过id获取页面对应元素(document.getElementById)
var num1 = document.getElementById('num1');
- 属性名、属性值
<input id=“bt1” type=“button” value=“按钮”/>
属性名: id
属性值: bt1
(注: 属性名="属性值")
- 属性读操作: 获取、找到
元素.属性名
- 属性写操作: 添加、替换
元素.属性名 = 新值
- 元素内的HTML内容
元素.innerHTML
注意事项:
a、JS中不允许出现‘-’，即将‘-’去除掉，之后将后面小写字母改为大写字母即可；
例如:
font-size —> fontSize
padding-top —> paddingTop
p1.style.fontSize = '10px';
b、JS中class属性要改为className(class是保留字)
例如: 想要改变某个元素的class名，即是p1.className = 'purpleStyle';
十一、案例 — 猜数字游戏
- 随机数
Math.random(): 得到0~1但不等于1的随机数；
parseInt(): 取整;
parseInt( Math.random() );
- 条件判断
if( 条件1 == 条件2 ){ // 符合条件即执行下面代码区域
// 代码区域
} else if(条件1 == 条件2){ // 符合条件即执行下面代码区域
// 代码区域
} else { // 都不符合上述要求，即执行下面代码区域
// 代码区域
}
网友评论