技术文章 | jishuwenzhang

北京html5培训之JavaScript学习笔记(D1)


 
第1天北京html5培训课堂笔记
(本课程共8天)
 
 

一、北京html5培训之javascript简介

前端分为3层:
结构层 html 从语义的角度搭建网页结构
样式层 css 从装饰的角度美化页面
行为层  Javascript 从交互的角度描述我们的页面行为

1.1 用途:

数据验证
读写HTML元素
与浏览器窗口及其内容的交互效果
网页特效
WEB游戏制作
基于Node.js技术进行服务器端编程
 
举例:

       
 
Javascript用途很多,我们随时学习随时积累。
了解Javascript发展史。

1.2 Javascript简史

在WEB日益发展的同时,网页的大小和复杂性不断增加,受制于网速的限制,为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担,当时走在技术革新最前沿的Netscape(网景) 公司,决定着手开发一种客户端语言,用来处理这种简单的验证。
1995年,就职于Netscape 公司的布兰登·艾奇(Brendan Eich),开始着手为即将于1996年2月发布的Netscape Navigator 2浏览器开发一种名为LiveScript 的脚本语言。为了尽快完成LiveScript 的开发,Netscape 与Sun 公司建立了一个开发联盟。在Netscape Navigator 2 正式发布前夕,Netscape 为了搭上媒体热炒Java 的顺风车,临时把LiveScript 改名为JavaScript。
由于JavaScript1.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的新脚本语言。
 
布兰登·艾奇(1961年~),JavaScript的发明人,目前(2005年至2014年)在Mozilla公司担任CTO。2014年4月3日,出任Mozilla的CEO十天就被迫辞职。
 
 

1.3 ECMAScript版本发展

1998年6月,ECMAScript 2.0版发布。
1999年12月,ECMAScript 3.0版发布,成为JavaScript的通行标准,得到了广泛支持。
2007年10月,ECMAScript 4.0版草案发布,对3.0版做了大幅升级。草案发布后,由于4.0版的目标过于激进,各方对于是否通过这个标准,发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司,反对JavaScript的大幅升级,主张小幅改动;以JavaScript创造者Brendan Eich为首的Mozilla公司,则坚持当前的草案。
2008年7月,由于各方分歧太大,争论过于激进,ECMA开会决定,中止ECMAScript 4.0的开发,将其中涉及现有功能改善的一小部分,发布为ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号起名为Harmony(和谐)。会后不久,ECMAScript 3.1就改名为ECMAScript 5。
2009年12月,ECMAScript 5.0版正式发布。Harmony项目则一分为二,一些较为可行的设想定名为JavaScript.next继续开发,后来演变成ECMAScript 6;一些不是很成熟的设想,则被视为JavaScript.next.next,在更远的将来再考虑推出。
2011年6月,ECMAscript 5.1版发布,并且成为ISO国际标准(ISO/IEC 16262:2011)。
2013年3月,ECMAScript 6草案冻结,不再添加新功能。新的功能设想将被放到ECMAScript 7。
2013年12月,ECMAScript 6草案发布。然后是12个月的讨论期,听取各方反馈。
2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015。
2015版本也就是6版本,将来在我们最后面的课程。
 
 

1.4 ECMAScript脚本语言

Javascript,JScript,ActionScript等脚本语言都是基于ECMAScript标准实现的。
在JavaScript,JScript和ActionScript中声明变量,操作数组等语法完全一样,因为它们都是ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法,这些都是各自语言的扩展。
JavaScript是由ECMAScript,DOM和BOM三者组成的。
 

二、北京html5培训之javascript基础

2.1 javascript书写位置

第一种:直接书写在body标签内部一对script标签里面。(目前练习使用方法)。script标签有一个属性type,属性值是“text/javascript”表示书写的是纯文本的javascript语言。javascript语言简称js。
1 <body>
2 <script type="text/javascript">
3 javascript语言
4 </script>
5 </body>
第二种:书写在head标签内部。通过外部引入js文件的方法。js文件扩展名是.js
js文件的书写:直接在js文件中书写我们想显示的内容。(工作中使用的方法)

1 <script type="text/javascript" src="js_01.js"></script>
 
js脚本语言不能直接在浏览器中加载,必须依托html载体实现。

2.2 注释

快捷键:ctrl + /
1 <!--html注释 -->   
2 /*css注释*/
 
js注释:
单行注释:ctrl + /

1 <script type="text/javascript">
2 // 我是js的单行注释
3 //只能注释单行文本
最后一行是错误写法
5 </script>
单行注释只能注释单行,换行之后不再有效果。最后一行语句有语法错误。
 
 
js多行注释:ctrl + shift + /

1 /*
2 js多行注释,
3 可以同时注释多行语句
4 换行也没关系
5 快捷键是ctrl+shift+/
6 */

2.3 alert()

alert()表示警告框,弹出框。alert()是js内置方法。 alert()不用调用任何对象,直接使用。
1 alert("你好,世界");
 
l alert使用:alert紧跟小括号,小括号中书写文本必须使用一对双引号包裹。

1 alert("今天是8月份");
l alert()分号的重要性。
 
js解析器的工作原理:js解析器是一条一条语句解析的,当看到分号时,知道这是一条语句的结束。如果没有分号,解析器会一直解析知道遇见分号。所以书写js语句要求大家每一条语句必须用分号结尾。
 
下面这段代码可以正常解析,因为每一行语句都换行。但是不能这样书写。因为js代码在上传前会压缩代码,将所有的换行,空格,缩进都删掉。
 

1 alert("你好,世界")
2 alert("今天是1月份")
3 alert("今天是2月份")                                      
4 alert("今天是3月份")
js上传网上之前会进行压缩,去掉所有的空格,换行,缩进。变成下面代码
1 alert("你好,世界")alert("今天是1月份")alert("今天是2月份")alert("今天是3月份")
 
l alert()执行顺序是从上到下依次执行

1 alert("我是1");
2 alert("我是2");
3 alert("我是3");
4 alert("我是4");
 
 
l alert()语句对空格,缩进,换行不敏感。

2.4 console控制面板

console是js内置的对象。console有一个方法log(日志)console.log()可以在控制面板输出内容。
可以直接使用邮件的“审查元素”或者“检查”可以打开控制面板。或者使用快捷键F12.
 
l console控制面板的作用:汇总js错误的信息。(错误的类型,错误的数量,错误的位置)
 
 
l console控制面板可以直接输出语句。
console.log()直接在控制版面输出语句,输出语句书写log()小括号中的一对双引号中,按回车键可以直接输出。
 
 
l console.log()还可以书写在js语句,然后在控制输出。

1 <script type="text/javascript">
2 console.log("我直接在控制台输出语句1");
3     console.log("我直接在控制台输出语句2");
4     console.log("我直接在控制台输出语句3");
5 </script>
 

三、北京html5培训字面量

字面量是用来表示固定值的。你看到什么就是什么。
字面量:数字,字符串,undefined,布尔类型的值(true,false)。

3.1 数字字面量

数字字面量:整数,浮点数,特殊值。
l 整数
整数的表示方法:八进制,十进制,十六进制。
控制面板只能输出十进制的数。参与数学时也是转换为十进制。
 
八进制:前缀0,0o,0O  (可以出现的数字0,1,2,3,4,5,6,7)逢八进一。

1 console.log(010);
2 console.log(0100);
3 console.log(01000);
4 console.log(0o1000);
5 console.log(0O1000);
 
 
如果八进制出现了超过7的数字时,会强制转换成十进制。

1 // 有超过7的数字会强制转换为十进制
2 console.log(096);
3 console.log(0289);
 
 
如果前缀是0o或者0O有超过7的数字时,会报错。

1 // 前缀是0o,0O有超过7的数字时,会报错
2 console.log(0o96);
3 console.log(0O289);
 
 
 
十六进制:逢十六进一,用0-9,a-f表示0-15数字。前缀是0x,0X

4 console.log(0x10);
5 console.log(0x100);
6 console.log(0x1000);
 
如果有超过0-9或者a-f的数,直接报错。

1 console.log(0Xh3);
2 console.log(0xj3);
 
 
浮点数:在js中浮点数只能用十进制表示。

1 console.log(2.389);
2 console.log(23.47893896);
3 console.log(0.0000023);
4 console.log(2.3e-6);
 
 
特殊值:Infinity(无穷),NaN(not a number);
Infinity:由于计算机的计算能力有限,当超过某个数值时,表示成无穷。

1 console.log(2.3e10);
2 console.log(2.334e20000);
3 console.log(Infinity);
4 console.log(-Infinity);
5 console.log(1/0);
6 console.log(-2/0);
 
NaN(not a number);

1 console.log(NaN);
2 console.log(0/0);
 
 

3.2 字符串字面量

字符串字面量:生活中说的什么的话。比如各种语言,符号,语句中包含的数字。
字符串必须使用一对相同的引号(“”  ‘’)包裹,数字自字面量不用引号包裹。

1 console.log("你年多少岁?");
2 console.log("18");
 
字符串字面量可以书写零个或者多个特殊字符:
\n    回车
\t    制表符
 

1 console.log("这是第一行文字\n这是第二行文本");
 
 
字符串中还可以书写标点符号。如果符号有特殊的含义,需要在符号加\

1 console.log("这是一段特殊文字,输出双引号\",我还想输出\\,我是最后的引号\"。");
 

四、北京html5培训变量

4.1 变量的概念

变量:variable
变量:可以把变量看成容器,可以盛放各种数据。数据包括:数字,字符串,函数,数组等
 
变量输出时输出的是变量的赋值,而不是变量名。

1 // 声明变量
2 var a;
3 // 变量的赋值
4 a = 10;
5 // 变量的引用
6 console.log(a);
 
变量的数据类型取决于赋值的数据类型。如果有多次赋值,旧的数据会扔掉,直接输出最后一次的赋值

1 // 声明变量
2 var a;
3 // 变量的赋值
4 a = 10;
5 // 再次赋值
6 a = "hello world"
7 // 变量的引用
8 console.log(a);
 
 

4.2 变量的声明

变量的声明使用关键字var 。var后面紧跟空格,空格后面书写变量名。
1 var a;
变量名(标识符)命名规则:第一个字符可以是字母(可以是大写字母也可以是小写字母,js严格区分大小写a和A 是不同的变量名),下划线,美元符号$。其他字符可以是字母,下划线,美元符号或者是数字。
变量名不可以使用js关键字,或者是保留字。
js关键字:js中有很多特殊功能的单词。
break  do  instanceof  typeof  case  else  new  var  catch  finally  return  void  continue  for  switch  while debugger*    function  this  with    default  if  throw  delete  in  try 
js保留字:以后会成为js关键字.
abstract  enum  int  short  boolean  export  interface  static  byte  extends  long  super  char  final  native  class
synchronized  float  package  throws  const  goto  private  transient  debugger  implements  protected  volatile  double  
import  public
 
 

4.3 变量的赋值

js中=表示赋值。
=表示赋值,是将等号右侧的数据赋值给等号左侧。
 
 

1 // 变量的赋值
2 a = 10;
3 b = a;
4 a = 5;
5 console.log(a);
6 console.log(b);
 
变量的赋值只是将a的数值赋值给b,然后a改变,不再影响b数值。
一般情况,我们将变量的声明和赋值写一起。

1 var a = 10;
2 console.log(a);
 
当使用未声明的变量时,会报错。

1 console.log(c);
 
 
使用未赋值的变量,不会报错,会输出undefined(未定义)。表示变量没有赋值,可以接受任何数据类型。

1 // 使用声明的变量,但是没有赋值
2 var d;
3 console.log(d);
 
 

4.4 变量声明的提升

js有一个非常好的特性,当我使用后面声明的一个变量时,不会抛出错误。输出结果是undefined。即使后面进行了变量的赋值仍然输出的是undefined。这就是变量声明的提升。
 

1 console.log(a);
2 var a = 10;
 
变量声明的提升:使用一个前面未声明变量,而后面声明了这个变量。好像js语句在解析时,将所有的变量的声明语句都全部“举起”,也就是将所有的变量声明语句放到所有js语句的最前面。(js预解析)
 
js预解析只是提升了变量的声明,没有提升变量的赋值
 
等价写法:

1 var a;
2 console.log(a);
3 a = 10;
 

4.5 声明多个变量

js可以同时声明多个变量,用逗号隔开。
1 var a,b,c,d;
2 a = 10;
3 b = 11;
4 c = 12;
5 d = 13;
6 console.log(a);
7 console.log(b);
8 console.log(c);
9 console.log(d);
 
1 // 等价写法
2 var a = 10,
3     b = 11,
4     c = 12,
5     d = 13;
6 console.log(a);
7 console.log(b);
8 console.log(c);
9 console.log(d);
 
 

五、北京html5培训之数据类型

数据类型:不管是咱们之前学习的数字字面量,字符串字面量,以后将会学习的函数,数组,都有自己的数据类型。
简单数据类型:
number:整数,浮点数,特殊值
string:字符串
undefined:自己就是一个数据类型。
boolean:true,false
null:也是一个数据类型。
复杂的数据类型:object(对象)
 

5.1 数据类型的检测

数据类型的检测可以使用关键字typeof。
第一种:可以直接在typeof()后面紧跟小括号,在小括号内书写你要检测的数据。

1 var a = 10;          //number
2 a = "hello world";  //string
3 console.log(typeof(a));
 
js是动态语言,变量的数据取决于赋值。
第二种:直接在typeof后面用空格隔开要检测的数据。

1 console.log(typeof 10);
2 console.log(typeof "今天天气有点凉");
3 console.log(typeof true);
4 console.log(typeof false)
 

5.2 数据类型的转换

5.2.1 数字类型转换为字符串类型

js中+加号如果两侧是不同的数据类型表示数据的连接(拼接)。只有+两侧的数数据类型都是数字类型时才表示加法。尤其是当+两边分别是数字和字符串表示拼接。
 

1 var a = 10;
2 var b = 2;
3 console.log(a + b);
 
1 var c = "12";
2 var d = "3";
3 console.log( c + d);
 
 
 

1 var c = 123;
2 console.log(typeof(c + ""));
 

5.2.2 字符串转换为数字

prompt()类似于alert()也是一个弹出框。还可以让用户进行输入。
prompt()可以书写两个参数,参数之间用逗号隔开。第一个参数表示提示文本,第二个表示默认文本(可以省略)。

1 prompt("请输入你的年龄",18);
 
 
 
prompt输入的值可以用变量接收。

1 var a = prompt("请输入你的年龄",18);
2 console.log(a);
 
 
prompt()方法的输出结果,都是字符串类型。

1 var a = prompt("请输入你的年龄");
2 var b = prompt("请输入你的身高");
3 var c = a + b;
4 console.log(c);
5 console.log(typeof a);
6 console.log(typeof b);
7 console.log(typeof c);
 
 
 
如果想让+是数学的运算符,必须两侧的数据类型是数字类型。所以需要将string转换为number。
方法:Number(),parseInt(),parseFloat()。这三种方法转换为数字类型。
第一方法Number()方法只能用于对象类型的转换。parseInt(),parseFloat()用于字符串的转换。
l parseInt()将字符串转换为整数。

1 console.log(parseInt("12.1234456"));
2 console.log(parseInt("你好"));
3 console.log(parseInt("0.1234"));
4 console.log(parseInt("十二"));
5 console.log(parseInt("12e123490"));
 
 
由于ECMAscript3和ECMAscript5版本有一些分歧,最好带上进制参数。parseInt()也是有两个参数,第一个参数书写要转换的字符串,第二个参数书写进制。可以省略不写0o,0x,0这些进制前缀。
 

1 console.log(parseInt("10",2));
2 console.log(parseInt("10",8));
3 console.log(parseInt("10",10));
4 console.log(parseInt("10",16));
 
parseFloat()将字符串转换为浮点数。

1 console.log(parseFloat("12.12.1234.123"));
2 console.log(parseFloat("12.23%^&*niahi"));
3 console.log(parseFloat("0.2"));
4 console.log(parseFloat(".2"));
5 console.log(parseFloat("1.2e-7"));
6 console.log(parseFloat("1.2你好"));
 
 
全部输出15:
parseInt("0xF", 16);
parseInt("F", 16);
parseInt("17", 8);
parseInt(021, 8);
parseInt("015", 10);
parseInt(15.99, 10);
parseInt("15,123", 10);
parseInt("1111", 2);
parseInt("15*3", 10);
parseInt("15e2", 10);
parseInt("15px", 10);
parseInt("12", 13);



爱创课堂是一家专门做前端培训的机构,由百度高级工程师,<javascript设计模式>作者张容铭老师亲自授课。我们前端课程的五大优势:
1. 名师亲自授课,课程无缝隙对接企业
2. 免费学习一周
3. 签订就业协议,目前学员平均就业薪资12K
4. 采取小班教学模式
5. :与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
 
扫描下方二维码或搜索微信公众号:icketang  
关注并回复:js  领取js基础全套视频教程+课堂笔记+案例

 
访问:http://www.icketang.com/获取更多信息。