本文最初发表于 博客园 ,并在 GitHub 上持续更新前端的系列文章.欢迎在 GitHub 上关注我,一起入门和进阶前端.
以下是正文.
JavaScript 简介
web 前端有三层:
html:从语义的角度,描述页面结构
CSS:从审美的角度,描述样式(美化页面)
JavaScript:从交互的角度,描述行为(提升用户体验)
JavaScript 历史背景介绍
布兰登 • 艾奇(Brendan Eich,1961 年~),1995 年在网景公司,发明的 JavaScript.
一开始 JavaScript 叫做 LiveScript,但是由于当时 Java 这个语言特别火,所以为了傍大牌,就改名为 JavaScript.如同 "北大" 和 "北大青鸟" 的关系."北大青鸟" 就是傍 "北大" 大牌.
同时期还有其他的网页语言,比如 VBScript,JScript 等等,但是后来都被 JavaScript 打败了,所以现在的浏览器中,只运行一种脚本语言就是 JavaScript.
JavaScript 和 ECMAScript 的关系
ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商协会, 英文名称是 European Computer Manufacturers Association)制定的标准.
JavaScript 是由公司开发而成的,问题是不便于其他的公司拓展和使用.所以欧洲的这个 ECMA 的组织,牵头制定 JavaScript 的标准,取名为 ECMAScript.
简单来说,ECMAScript 不是一门语言,而是一个标准.符合这个标准的比较常见的有:JavaScript,Action Script(Flash 中用的语言).就是说,你 JavaScript 学完了,Flash 中的程序也就轻而易举了.
ECMAScript 在 2015 年 6 月,发布了 ECMAScript 6 版本,语言的能力更强(也包含了很多新特性).但是,浏览器的厂商不能那么快去追上这个标准.
JavaScript 的发展:蒸蒸日上
2003 年之前,JavaScript 被认为 "牛皮鲜",用来制作页面上的广告,弹窗,漂浮的广告.什么东西让人烦,什么东西就是 JavaScript 开发的.所以浏览器就推出了屏蔽广告功能.
2004 年,JavaScript 命运开始改变,那一年,谷歌公司开始带头使用 Ajax 技术,Ajax 技术就是 JavaScript 的一个应用.并且,那时候人们逐渐开始提升用户体验了.Ajax 有一些应用场景.比如,当我们在百度搜索框搜文字时,输入框下方的智能提示,可以通过 Ajax 实现.比如,当我们注册网易邮箱时,能够及时发现用户名是否被占用,而不用调到另外一个页面.
2007 年乔布斯发布了第一款 iPhone,这一年开始,用户就多了上网的途径,就是用移动设备上网.
JavaScript 在移动页面中,也是不可或缺的.并且这一年,互联网开始标准化,按照 W3C 规则三层分离,JavaScript 越来越被重视.
2010 年,人们更加了解 HTML5 技术,HTML5 推出了一个东西叫做 Canvas(画布),工程师可以在 Canvas 上进行游戏制作,利用的就是 JavaScript.
2011 年,Node.js 诞生,使 JavaScript 能够开发服务器程序了.
如今,WebApp 已经非常流行,就是用网页技术开发手机应用.手机系统有 iOS,安卓.比如公司要开发一个 "携程网"App,就需要招聘三队人马,比如 iOS 工程师 10 人,安卓工程师 10 人,前端工程师 10 人.共 30 人,开发成本大;而且如果要改版,要改 3 个版本.现在,假设公司都用 web 技术,用 html+css+javascript 技术就可以开发 App.也易于迭代(网页一改变,所有的终端都变了).
虽然目前 WebApp 在功能和性能上的体验远不如 Native App,但是 "WebApp 慢慢取代 Native App" 很有可能是未来的趋势.
JavaScript 入门易学性
JavaScript 对初学者比较友好.
JavaScript 是有界面效果的(比如 C 语言只有白底黑字).
JavaScript 是弱变量类型的语言,变量只需要用 var 来声明.而 Java 中变量的声明,要根据变量的类型来定义.
比如 Java 中需要定义如下变量:
而 JavaScript 中,只用定义一个变量:
int a;
float a;
double a;
String a;
boolean a;
var a;
JavaScript 不用关心其他的一些事情(比如内存的释放,指针等),更关心自己的业务.
JavaScript 是前台语言
JavaScript 是前台语言,而不是后台语言.
JavaScript 运行在用户的终端网页上,而不是服务器上,所以我们称为 "前台语言".JavaScript 就是一个简单的制作页面效果的语言,就是服务于页面的交互效果,美化,绚丽,不能操作数据库.
后台语言是运行在服务器上的,比如 PHP,ASP,JSP 等等,这些语言都能够操作数据库,都能够对数据库进行 "增删改查" 操作.Node.js 除外.
JavaScript 的组成
JavaScript 基础分为三个部分:
ECMAScript:JavaScript 的语法标准.包括变量,表达式,运算符,函数,if 语句,for 语句等.
DOM:操作网页上的元素的 API.比如让盒子移动,变色,轮播图等.
BOM:操作浏览器部分功能的 API.比如让浏览器自动滚动.
PS:JS 机械重复性的劳动几乎为 0,基本都是创造性的劳动.而不像 HTML,CSS 中 margin,padding 都是机械重复劳动.
JavaScript 的特点
(1)简单易用:可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序.
(2)解释执行(解释语言):事先不编译,逐行执行,无需进行严格的变量声明.
(3)基于对象:内置大量现成对象,编写少量程序可以完成目标
开始写第一行 JavaScript 代码
写 JavaScript 代码的位置
页面中,我们可以在 标签里放入
<script type="text/javascript"></script>
标签对儿,并在
text 表示纯文本,因为 JavaScript 也是一个纯文本的语言.
<script type="text/javascript">
</script>
PS:在 Sublime Text 里,输入 < sc 后,按 tab 键,可以自动补齐.
alert 语句
我们要学习的第一个语句,就是 alert 语句.
alert(英文翻译为 "警报")的用途:弹出 "警告框".
<script type="text/javascript">
alert("生命壹号");
</script>
alert("") 警告框的效果如下:
这个警告框,在 IE 浏览器中长这样:
上面的代码中,如果写了两个 alert() 语句的话,网页的效果是:弹出第一个警告框,点击确定后,继续弹出第二个警告框.
语法规则
学习程序,是有规律可循的,就是程序是有相同的部分,这些部分就是一种规定,不能更改,我们成为:语法.
(1)JavaScript 对换行,缩进,空格不敏感.
也就是说:
代码一:
等价于代码二:
<script type="text/javascript">
alert("今天蓝天白云");
alert("我很高兴");
</script>
备注:每一条语句末尾要加上分号,虽然分号不是必须加的,但是为了程序今后要压缩,如果不加分号,压缩之后将不能运行.
<script type="text/javascript">
alert("今天蓝天白云");alert("我很高兴");
</script>
(2)所有的符号,都是英语的.比如括号,引号,分号.
如果你用的是搜狗拼音,建议不要用 shift 切换中英文(可以在搜狗软件里进行设置),不然很容易输入中文的分号;建议用 ctrl+space 切换中英文输入法.
注释
我们不要把 html,CSS,JavaScript 三者的注释格式搞混淆了.
(1)html 的注释:
<!-- 我是注释 -->
(2)CSS 的注释:
注意:CSS 只有 /* */ 这种注释,没有 // 这种注释.而且注释要写在 <style> 标签里面才算生效哦.
<style type="text/css">
/*
我是注释
*/
p{
font-weight: bold;
font-style: italic;
color: red;
}
</style>
(3)JavaScript 的注释:
单行注释:
// 我是注释
多行注释:
/*
多行注释1
多行注释2
*/
备注:sublime 中,单行注释的快捷键是 ctrl+/,多行注释的快捷键是 ctrl+shift+/.
Javascript 网页中输出信息的写法
弹出警告框:alert("")
我们在上一段讲到了 alert 语句,这里不再赘述.
控制台输出:console.log("")
console.log("") 表示在控制台中输出.console 表示" 控制台 ",log 表示" 输出 ".
控制台在 Chrome 浏览器的 F12 中.控制台是工程师,程序员调试程序的地方.程序员经常使用这条语句输出一些东西,来测试程序是否正确.
console.log("") 效果如下:
普通人是不会在意控制台的,但是有些网站另藏玄机.有个很有意思的地方是,百度首页的控制台,悄悄地放了一段招聘信息:
毕竟做前端的人是经常使用控制台的.
接下来,我们开始学习 JavaScript 语法.
用户输入:prompt() 语句
prompt() 就是专门用来弹出能够让用户输入的对话框.
JS 代码如下:
上方代码中,用户输入的内容,将被传递到变量 a 里面.
var a = prompt("请随便输入点什么东西吧");
console.log(a);
效果如下:
prompt() 语句中,用户不管输入什么内容,都是字符串.alert 和 prompt 的区别:
直接量:数字和字符串
alert("从前有座山"); //直接使用,不需要变量
var a = prompt("请输入一个数字"); // 必须用一个变量,来接收用户输入的值
"直接量" 即常量,也称为 "字面量".看见什么,它就是什么.
简单的直接量有 2 种:数字,字符串.
(1)数值的直接量的表达非常简单,写上去就行了,不需要任何的符号.例如:
1 alert(886); //886是数字,所以不需要加引号.
(2)字符串也很简单,但一定要加上引号.可以是单词,句子等.
温馨提示:100 是数字,"100" 是字符串.
变量
变量的定义和赋值
变量举例如下:
var a = 100;
如下图所示:
var 是英语 "variant" 变量的缩写.后面要加一个空格,空格后面的东西就是 "变量名",
定义变量:var 就是一个关键字,用来定义变量.所谓关键字,就是有特殊功能的小词语.关键字后面一定要有空格隔开.
变量的赋值:等号表示赋值,将等号右边的值,赋给左边的变量.
变量名:我们可以给变量任意的取名字.
PS:在 JavaScript 中,永远都是用 var 来定义变量,这和 C,Java 等语言不同.
变量要先定义,才能使用.比如,我们不设置变量,直接输出:
控制台将会报错:
<script type="text/javascript">
console.log(a);
</script>
正确写法:
有经验的程序员,会把定义和赋值写在一起:
var a; // 定义
a = 100; //赋值
console.log(a); //输出100
变量的命名规范
var a = 100; //定义,并且赋值100
console.log(a); //输出100
变量名有命名规范:只能由英语字母,数字,下划线,美元符号 $ 构成,且不能以数字开头,并且不能是 JavaScript 保留字.
下列的单词,叫做保留字,就是说不允许当做变量名,不用记:
大写字母是可以使用的,并且大小写敏感.也就是说 A 和 a 是两个变量.
abstract,boolean,byte,char,class,const,debugger,double,enum,export,extends,final,float,goto
implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile
变量的类型
var A = 250; //变量1
var a = 888; //变量2
变量里面能够存储数字,字符串等.变量会自动的根据存储内容的类型不同,来决定自己的类型.
数值型:number
如果一个变量中,存放了数字,那么这个变量就是数值型的.
上方代码的输出结果为:
var a = 100; //定义了一个变量a,并且赋值100
console.log(typeof a); //输出a变量的类型
number
typeof() 表示" 获取变量的类型 ",语法为:
typeof 变量
在 JavaScript 中,只要是数,就是数值型 (number) 的.无论整浮,浮点数(即小数),无论大小,无论正负,都是 number 类型的.
字符串型:string
现有如下代码:
控制台输出如下:
var a = "abcde";
var b = "传智播客";
var c = "123123";
var d = "哈哈哈哈哈";
var e = ""; //空字符串
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);
连字符和加号的区别
sting
sting
sting
sting
sting
键盘上的 + 可能是连字符,也可能是数字的加号.如下:
输出:
console.log("我" + "爱" + "你"); //连字符,把三个独立的汉字,连接在一起了
console.log("我+爱+你"); //原样输出
console.log(1+2+3); //输出6
我爱你
我+爱+你
6
总结:如果加号两边都是数值,此时是加.否则,就是连字符(用来连接字符串).
举例 1:
控制台输出:
var a = "1";
var b = 2;
console.log(a + b);
12
举例 2:
控制台输出:
var a = 1;
var b = 2;
console.log("a" + b); //"a"就不是变量了!所以就是"a"+2 输出a2
a2
于是我们明白了,在变量中加入字符串进行连接,可以被同化为字符串.
变量值的传递(赋值)
语句:
a = b;
把 b 的值赋给 a,b 不变.
将等号右边的值,赋给左边的变量;等号右边的变量,值不变.
来做几个题目.
举例 1:
输出:
//a b c
var a = 1; //1
var b = 2; //1 2
var c = 3; //1 2 3
a = b + c; //5 2 3
b = c - a; //5 -2 3
c = a * b; //5 -2 -10
console.log(a);
console.log(b);
console.log(c);
举例 2:
5
-2
-10
输出:
//a b c
var a = 1;
var b = 2;
var c = 3; //1 2 3
a = a + b; //3 2 3
b = b + a; //3 5 3
c = c + b; //3 5 8
console.log(a); //3
console.log(b); //5
console.log(c); //8
8
5
3
举例 3:输出:
//a b
var a = "1";
var b = 2; //"1" 2
a = a + b; //"12" 2
b = b + a; //"12" "212"
console.log(a); //输出12
console.log(b); //输出212
212
12
举例 4:效果:
//a b
var a = "1";
var b = 2;
a = b + a; //"21" 2
b = b + a; //"21" "221"
console.log(a); //21
console.log(b) //221
221
21
举例 5:(这个例子比较特殊,字符串减去数字)效果:(注意,字符串 - 数值 = 数值)
var a = "3";
var b = 2;
console.log(a - b);
1
变量格式转换
用户的输入
我们在上面的内容里讲过,prompt() 就是专门用来弹出能够让用户输入的对话框.重要的是:用户不管输入什么,都是字符串.
parseInt():字符串转数字
parseInt() 可以将字符串转数字.parse 表示" 转换 ",Int 表示" 整数 "(注意 Int 的拼写).例如:
字符串转数字的方法:
parseInt("5");
得到的结果是数字 5.
parseInt() 还具有以下特性:
(1)带有自动净化的功能;只保留字符串最开头的数字,后面的中文自动消失.例如:
console.log(parseInt("2017年在公众号上写了6篇文章");
控制台输出:
2017
(2)自动带有截断小数的功能:取整,不四舍五入.
例 1:
控制台输出:
var a = parseInt(5.8) + parseInt(4.7);
console.log(a);
9
例 2:
控制台输出:
var a = parseInt(5.8 + 4.7);
console.log(a);
10
来源: https://www.cnblogs.com/smyhvae/p/8303507.html