javascript教程 (1)——javascript基础

JavaScript基础语法

1.JavaScript的来源和发展

1. JavaScript介绍
           JavaScript一种直译式脚本语言，是一种动态语言、弱类型，内置支持类型。 它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
    　    在1995年时，由Netscape公司在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Java较为接近，其它的没有关系。  　　
           为了取得技术优势，微软推出了JScript，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
2. javascript基本特点

           JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。  　　
           通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。是一种解释性脚本语言（代码不进行预编译）。     
           主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。  　　
           可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。  　　
           跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。  　　Javascript脚本语言同其他语言一样，有它自身的基本数据类型， 表达式和算术运算符及程序的基本程序框架。

3. javascript的用途

   嵌入动态文本于HTML页面;   

   对浏览器事件做出响应;   

   读写HTML元素;      

   在数据被提交到服务器之前验证数据;

   检测访客的浏览器信息;  

   控制Cookies包括创建和修改等;   

   基于Node.js技术进行服务器端编程。 

4. ECMAScript介绍
           ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。  
           这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript， 但实际上后两者是ECMA-262标准的实现和扩展。
       一般我们认为JavaScript包含三个部分：  　
            1.ECMAScript规定核心语法  　　
            2.DOM (document object model) 文档对象模型 作用：操作文档  
            3.BOM (browser object model) 浏览器对象模型 作用：操作对象

5. javascript写法

   我们的JavaScript语句可以有几种写法

   可以写在HTML页面里面的script标签里面：

   
       alert("js你好")
   
   
   也可以写在外部的后缀为.js的文件里面,然后在html页面里面指定script标签的scr属性引入：
   
   my.js文件里的内容：alert("js你好") 
   html页面里面：
   
   也可以直接写在标签里面:点我吧

2.标识符和关键字

1. 标识符
   所谓的标识符（Identifier），就是一个名称。在JavaScript中，标识符用来命名变量和函数，或者用作JavaScript代码中某些循环的标签。在JavaScript中，合法的标识符命名规则和Java以及其他许多语言的命名规则相同，第一个字符必须是字母、下划线或者是美元符号（$），其后的字符可以是字母、数字、下划线或美元符号。  
   注：标识符不能和javascript 中用于其他目的的关键字同名。数字不允许作为首字符出现，这样JavaScript可以轻易地区别开标识符和数字。
    

2. 关键字
   关键字是指在JavaScript语言中有特定含义，成为JavaScript语法中一部分的那些单词。
   
   JavaScript关键字是不能作为变量名和函数名使用的。
   
   常见的关键字：
   break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

3. 保留字
   “保留字”实际上就是预留的“关键字”，意思是现在虽然现在还不是关键字（也就是本身还不具备特殊含义的），但是未来可能会成为关键字的，你一样是不能使用它们当变量名啊方法名的。
   
   常见的保留字：
   abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等

4. 注释
   所谓的注释，从中文含义就是标注解释，而我们代码里的注释就是用来解释代码的作用。在实际开发中我们可能是多人做相同的一个工作，或者大家写完的代码以后会交给别人看，或者很久以后再看，需要去重新理清思路。这个时候注释的作用就非常有用。可以清楚了解代码的思路，便于团队协作。注释是不会影响我们JS代码的运行，所以放心大胆的写注释，良好的注释习惯会让你的代码整齐，思路顺畅。
   
   注释的写法：  
   单行注释      //注释的内容
   多行注释     /*注释的内容*/

3.变量和常量

1. 变量的定义
   变量是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。对于变量的使用首先必须明确其命名规则、声明方法及其作用域。简而言之，就是可以变化的量。类似我们初中数学题目的时候假设变量的含义类似。

2. 变量的命名规则
   必须以字母或下划线开头，中间可以是数字、字母或下划线变量名     不能包含空格、加号、减号等符号     不能使用JavaScript 中的关键字。   JavaScript  的变量名是严格区分大小写的。
   注：UserName 与username 代表两个不同的变量。与标识符的命名规则差不多。

3.  变量的声明和赋值
   在JavaScript中，使用变量前需要先对其进行声明，所有的JavaScript变量都由关键字var 声明，语法格式如下：
           var age;
   在声明变量的同时也可以对变量进行赋值。
           var age=20;

   可以使用一个关键字var 同时声明多个变量：
           var a，b，c；
   也可以在声明变量的同时对其赋值，即初始化，如：
           var i = 1, j = 2, k = 3;
           
   如果只是声明了变量，并未对其赋值，则其值默认为undefined。var语句可以用作for循环和for/in循环的一部分，这样就使循环变量的声明成为循环语法自身的一部分，使用起来比较方便。 
   
   也可以使用var语句多次声明同一个变量，如果重复声明的变量已经有一个初始值，那么此时的声明就相当于对变量的重新赋值。
   
   由于JavaScript采用弱类型的形式，因此大家可以不必理会变量的数据类型，即可把任意类型的数据赋值给变量。

4. 变量的作用域
   变量的作用域是指某变量在程序中的有效范围，也就是程序中定义该变量的区域。在JavaScript中变量根据作用域可以分为两种：全局变量和局部变量。  局部变量是定义在函数体内，只作用于函数体的变量，函数的参数也是局部性的，只在函数内部起作用。  例如，下面的程序代码说明了变量的作用域作用不同的有效范围。

    

5. 变量的生存期
   变量的生存期是指变量在计算机中存在的有效时间。从变成的角度来说，可以简单地理解为该变量所赋的值在程序中的有效范围。JavaScript 中变量的生存期有两种：全局变量和局部变量。全局变量在主程序中定义，其有效范围从其定义开始，一直到本程序结束为止。局部变量在程序的函数中定义，其有效范围只有在该函数之中，在函数结束后，局部变量的生存期也就结束了。

6. 常量
   当程序运行时，值不能改变的量为常量。常量主要用于为程序提供固定和精确的值，如数字，逻辑值真（true）、逻辑值假（false）等都是常量。需要改变的常量可以使用变量来进行提供。  在我们的ES5里面没有常量的概念，我们会使用大写的变量来假设是常量，从ES6开始我们有了常量的定义方法const,后面我们的介绍到。
    

4. 基本数据类型

        所谓的数据类型我们从字面含义，可以了解到就是描述数据的类型，数据就和我们人一样也有类型，人有男人，女人。数据也分，数据的类型有数字的，字符的，描述对错的。这就是我们的数据类型。那我们常见的基本数据类型有：数字型，字符串型，布尔型，undefined,null这五种基本的数据类型;同时还有我们对象类型 数组和对象 。

1. 数字型(number)
   只有一种数字类型。数字可以带小数点，也可以不带；
   JavaScript 数字型数据可以为正数也可以为负数；JavaScript 数值极大或者极小的时候可以用e来表示。

   var x = 10; //整数 型  
   var y = 10.00;  //浮点型
   var x2 = 10;    //正数
   var y2 = -10 ;  //负数
   var x3 = 122e5; //12200000
   var y3 = 122e-5;    //0.00122

   JavaScript数字型数据可以使用八进制、十进制、十六进制运算十进制：是一个数字系列，如：1，2，-3，0十六进制：是以16为基数的数据，是以“0X”和“0x”开头，其后跟随十六进制数字串的直接量。十六进制的数字可以是0到9中的某个数字，也可以是a（A）到f（F）中的某个字母，它们用来表示0到15之间（包括0和15）的某个值。

   var x = 0xff ;  //  15*16+15 = 255  
   var y = 0xCAFE911;  // 212855057

   八进制：尽管ECMAScripr标准不支持八进制数据，但JavaScript的某些实现却允许采用八进制（基数为8）格式的整型数据。八进制数据以数字0开头，其后跟随一个数字序列，这个序列中的每个数字都在0和7之间（包括0和7）。

   var x = 0377;   // 3*64+7*8+7 = 255

2. 字符串(string)
   字符串是存储字符的变量。用来表示文本的数据类型，程序中的字符串是包含单/双引号中的，由单引号定界的字符串中包含有双引号，反之也是如此。
    

   var x = "javascript";  
   var y = 'javascript基础';
   var str = '本节课的内容是："javascript基础"';
   var str2 = "本节课的内容是：'javascript基础'";

3. 布尔型(boolean)
   布尔值通常用于流程控制。字符串和数字型的值都是无穷尽的，然而布尔数据类型（逻辑）只能有两个值：true或false，这两个值分别用来说明某个事物是真还是假。布尔值通常在JavaScript 程序中用来比较所得的结果。例如：

   n==1    
   //这行代码测试了变量n的值是否与数值1是否相等，如果相等， 则表示结果为true，否则为false

4. undefined(未定义)
   这个值表示变量不含有值，没有定义的值；或者被赋予了一个不存在的属性值。

   var i;  
   document.write(i) ; //结果就是undefined；

5. null(空)
   关键字null是一个特殊的值，它表示为空值，用于定义空的或不存在的引用。如果试图引用一个没有定义的变量，则返回一个null值。这里必须要注意的是：null不等同于空的字符串（""）或0。  null与undefined的区别是： null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值。

   var i = 10;
   document.writeln(i);    //结果 10
   i = null;
   document.writeln(i);    //结果 null

   typeof  
   我们使用typeof函数，来检测变量的数据类型

   var aa = "你好";
   var res =  typeof(aa);  
   //或者简写  var res =  typeof aa; 
   console.log(res)  // string

5.运算符

        所谓的运算符是用于执行程序代码运算，会针对一个以上操作数项目来进行运算。例如我们以前数学学习中的加减乘除等等这种就属性运算符。

1. 算术运算符
   加减乘除，取模，累加，累减

   运算符	描述	例子(y=5)	x 运算结果	y 运算结果
   +	加法	x=y+2	7	5
   -	减法	x=y-2	3	5
   *	乘法	x=y*2	10	5
   /	除法	x=y/2	2.5	5
   %	取模（余数）	x=y%2	1	5
   ++	自增	x=++y	6	6
   --	自减	x=--y	4	4

   
   
   所谓的累加是 ++运算符，所谓的累减是--运算符。

   var a = 10;
   a++;  // 实质是 a = a +1 结果a变成了11

   但是我们的累加和累减分为前后，在有的时候有点区别。

   var a = 10;
   ++a;  // 实质是 a = a +1  结果还是11 和 ++a没区别

   可是如果我们在将累加和累减放在运算中就会有点不同。

   var a = 10;
   var res = 9 + ++a;
   console.log(res);  //console.log()函数适用于控制台输出
   console.log(a); 

   你会以为结果是res是20，a的值是11。这符合大家的思考逻辑。好的看下面的代码。

   var a = 10;
   var res = 9 + a++;
   console.log(res);  //console.log()函数适用于控制台输出
   console.log(a); 

   这个时候你发现 res是19，a的值还是11。这个就让大家觉得很奇怪。 这里强调一点：我们的前++是将自己先进加1后再去和别人运算。这里我们可以看出来上面个案例 a在和9相加之前已经将自己加了1，而下面那个案例是先去和9进行运算，当运算完了以后再回来将自己加1 。口诀：前++是先加完自己再去和别人运算，后++是先和别人运算，运算结束后再将自己加一下。

2. 比较运算符
   比较运算符在逻辑语句中使用，以测定变量或值是否相等。

   运算符	例子(y=5)	等同于	运算结果
   ==	等于	x==8	false
   ===	全等	x==="5"	false
   !=	不等于	x!=8	true
   !==	不全等	x!=="5"	true
   >	大于	x>8	false
   <	小于	x<8	true
   >=	大于或等于	x>=8	false
   <=	小于或等于	x<=8	true

   全等于需要值相同并且数据类型相同
    

3. 赋值运算符
   赋值语句是JavaScript程序中最常用的语句。在程序中，往往需要大量的变量来存储程序中用到的数据，所以用来对变量进行赋值的赋值语句也会在程序中大量出现。赋值运算符用于给 JavaScript 变量赋值。给定 x=10 和 y=5，下面的表格解释了赋值运算符：

   运算符	例子(y=5)	等同于	运算结果
   =		x=y	x=5
   +=	x+=y	x=x+y	x=15
   -=	x-=y	x=x-y	x=5
   *=	x*=y	x=x*y	x=50
   /=	x/=y	x=x/y	x=2
   %=	x%=y	x=x%y	x=0

   用于字符串的 + 运算符 。+运算符用于把文本值或字符串变量加起来（连接起来）。如需把两个或多个字符串变量连接起来，请使用 + 运算符。

   var str = "javascript";
   var str2 = "基础";
   var str3 = str + str2;
   console.log(str3)  // "javascript基础"
   

   对字符串和数字进行加法运算  

   var x=15+15;  // 30 数字型
   var y="5"+5;  // 55  字符串
   var z="Hello"+5;  // Hello5 字符串

    

4. 逻辑运算符
   逻辑运算符用于测定变量或值之间的逻辑。给定 x=6 以及 y=3，下表解释了逻辑运算符：

   运算符	描述	例子
   &&	and	(x < 10 && y > 1) 为 true
   ll	or	( x<6 || y=3 ) 为true
   !	not	!(x==y) 为 true

5. 三元运算符

   var 变量 = 条件 ？ 结果1 : 结果2 

   我们的条件成立的时候我们将结果1赋给变量，条件不成立的时候我们将结果2赋给变量。

   var a = 20;
   var c = a > 21 ? "a大于21" : "a不大于21";
   console.log(c) // 输出 a不大于21

   
   PS：纯属本人原创，如有错误 欢迎指点  不才会及时更正  互相学习