Web基础之JavaScript（一）

JavaScript概述：

• 是一种网页编程技术，用来向HTML页面添加动态交互效果；
• 是一种基于对象和事件驱动的解释性脚本语言，具有与Java和C语言类似的语法；
• 可直接嵌入HTML页面，由浏览器解释执行，不进行预编译。
  发展史
• 正式名称是“ECMSCript”,由ECMA组织发展和维护；
• CMA-262是正式的JavaScript（Netscape）和JScript（Microsoft）。
• 网景公司在Netscape2.0首先推出了JavaScript。微软公司从IE3.0开始提供对客户端JavaScript的支持，并另取名为JScript。
  特点
• 可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
• 解释执行：事先不解释，逐行执行。
• 基于对象：内置大量现成对象。
• 适宜：客户端数据计算、客户端表单合法性验证、浏览器事件的触发、网页特殊显示效果制作。
  定义方式
• 直接定义在事件中。如：

在标签中嵌入标签，在其中放置javaScript代码；

• 将代码写在单独的.js文件中，在html页面的里使用

  错误查看

  • 解释性代码，若代码错误，则页面无任何效果。
  • 使用浏览器里的开发者工具；

  注释：单行使用// ; 多行使用：/**/

  JavaScript基础语法：
  编写：

  • 由Unicode字符集编写。
  • 语句：表达式、关键字、运算符组成；大小写敏感；使用分号结束。
    常量、标识符和关键字
    1）常量：直接在程序中出现的数据值（字面量），用完就丢弃了。如alert(“hello");
    2）标识符：由不以数字开头的字母、数字、下划线、$组成。常用于表示函数、变量等的名称。不能和保留关键字重复，如break、if等。
    3）关键字：只有系统才能用的标识符。
    变量
    1）声明：使用关键字var声明变量，如var x,y;
    【注意：以var关键字声明，声明的时候不确定类型，变量的类型以赋值为准。如：var x,y,z; x=10; y="mary"; z=true;】
    2）变量初始化：使用等号赋值。
    【注意：没有初始化的变量则自动取值为undefined，如：var count = 0;】
    3）变量命名同标识符的规则，大小写敏感。
    数据类型
    1）基本类型：number数字、string字符串、boolean布尔
    2）特殊类型：null空、undefined未定义
    3）复杂类型：array数组、object对象
    number数字：
    —> 不区分整型数值和浮点型数值：所有数字都采用64位浮点格式存储，类似于double格式。
    —> 整数：16进制数前面加上0x，8进制前面加0。
    —> 浮点数：使用小数点记录数据，如3.4，5.6；使用指数记录数据，如4.3e23=4.3X10^23
    string字符串：
    —> 表示文本：由Unicode字符、数字、标点符号组成的序列。
    —> 首尾由单引号或双引号括起来。
    —> 特殊字符需要转义，用转义符\，如：\n，\，\’，\“
    【注意：可用在正则表达式，只允许录入汉字[^\u4e00-\u9fa5$]，每个汉字都有转义符。】
    boolean布尔
    —>仅有两个值：true和false；实际运算中true=1，false=0

  数据类型的转换
  1）转换方式
  —> 隐式转换：使用隐式自动转换规则直接转换
  —> 显式转换：利用系统提供的函数
  【注意：不建议使用隐式转换】
  隐式转换
  1）JavaScript属于松散类型的程序语言
  —> 变量在声明时不需要指定数据类型。
  —> 变量由赋值操作确定数据类型。
  2）不同类型数据在计算过程中会自动进行转换
  —> ①数字+字符串：数字转换为字符串
  —> ②数字+布尔值：true转换为1，false转换为0
  —> ③字符串+布尔值：布尔值转换为字符串true或false
  —> ④布尔值+布尔值：布尔值转换为数值1或0
  显式转换
  toString：转成字符串，所有数据类型均可转换为string类型。
  parseInt：强制转换成整数，如果不能转换，则返回NaN。（去尾法）
  parseFloat：牵制转换成浮点数，如果不能转换，则返回NaN。
  typeof：查询数值当前类型，返回string/number/boolean/object。
  NaN：not a number，非常特殊，它不是数字，所以任何数跟它都不相等，甚至NaN本身也不等于NaN
  isNaN(str)：is not a number，判断文本是否为数值，false为数值，true为非数值
  null：null在程序中代表“无值”或者“无对象”。可以通过给一个变量赋值null来清除变量的内容。
  undefined：声明了变量但从未赋值或这对象属性不存在。

  • 算术运算：+ - * / %
  • 关系运算：> < <= >= == != ===(严格相等，值与类型都相等) !==(非严格相等）
  • 逻辑运算：！ && ||
  • 条件运算：? :
  • 流程控制：switch-case for while

  JavaScript常用内置对象
  *概念：
  1）JavaScript是一种基于对象的语言，对象是JavaScript中最重要的元素。
  2）JavaScript包含多种对象：内置对象、自定义对象、浏览器对象、HTML DOM对象、ActiveX对象

  • 使用：
    1）对象由属性和方法封装而成。
    2）属性的引用：使用点“．”运算符、通过下标的方式引用。
    3）对象的方法的引用：ObjectName.methods()。
  • 常用内置对象
    1）简单数据对象：String、Number、Boolean
    2）组合对象：Array、Date、Math
    3）复杂对象：Function、RegExp

  String
  1）创建：var str1 = "hello world”; var str2 = new String("hello world”);
  2）属性：length；如：str1.length;
  3）方法：
  —> toLowerCase()：转为小写；
  —> charAt(index)/charCodeAt(index)：获取index处的字符/Unicode编码
  —> indexOf(str) / lastIndexOf(str)：查询位置,没有则返回-1
  —> substring(start,end)：截取
  —> substr(start,length):截取
  —> replace(oldStr,newStr)：替换
  —> split(bystr)：分割
  正则相关：
  —> replace(regexp,newstr)：根据正则替换
  —> match(regexp)：返回匹配字符串的数组
  —> search(regexp)：返回匹配的首个字符串的索引值
  匹配模式：JavaScript中使用正则表达式：使用两个斜杠， / 表达式 / 匹配模式
  ① g：global，全局匹配；② m：multilin，多行匹配；③ i：忽略大小写匹配。
  如：var array=str1.match(/\d/g); //即全局匹配数字

  • Array
    一列有多个数据。可以有不同类型的数据。JavaScript只有数组没有集合；
    1）创建：
    ① var arr = [“mary”,10,true];//用中括号！不是大括号；常用；声明的同时并赋值。
    ② var arr = new Array(“mary",10,true);//声明的同时并赋值。
    ③ var arr = new Array();或var arr = new Array(7);//可有长度也可没有长度。即便写了长度，也能把第8个数据存入！先声明后赋值。
    2）属性：length；
    3）二维数组：通过指定数组中的元素为数组的方式可以创建二维甚至多维数组。week[0][1] = “Monday”；
    4）方法：
    —> join(str)：以bystr作为连接数组中元素的分隔字符，返回拼接后的数组。
    //也可直接使用新的下标赋值，如:var arr = new Array(4);arr[5]=5;
    —>** toString()：输出数组的内容（以逗号隔开）。
    —> concat(value,…)：value作为数组元素连接到数组的末尾（数组连接），返回连接后的一个新数组。原数组内容不变。
    —> slice(start,end)：截取从start开始到end结束（不包含end）的数组元素。end省略代表从start开始到数组结尾。
    —> reverse()：数组反转，改变原数组元素的顺序。
    —> pop(): 删除并返回最后一个元素
    —> shift()：删除并返回第一个元素
    —>unshift()：向数组开头添加一个或更多元素，并返回新的长度
    —> push()：向数组末尾添加一个或更多元素，并返回新的长度
    —> splice()：删除元素，并向数据添加新元素
    —>toSource()**：返回该对象的源代码。
    —> valueOf():返回数组对象原始值。
    —> sort()：数组排序，默认按照字符串的编码顺序进行排序。
    —> sort(sortfunc)：sortfunc用来确定元素顺序的函数名。函数的形式如：

  function(a,b) { return a-b; }
  

  Math
  用于执行数字相关。
  1）没有构造函数Math()。
  2）不需要创建，直接把Math作为对象使用就可以调用其所有属性和方法。如：不需要创建var data=Math.PI; 直接使用Math.PI;像Java中的静态类一样。
  3）常用属性：都是数学常数，如：Math.E（自然数）、Math.PI（圆周率）、Math.LN2（ln2）、Math.LN10（ln10）等
  4）常用方法：
  ①三角函数：Math.sin(x)、Math.cos(x)、Math.tan(x)等
  ②反三角函数：Math.asin(x)、Math.acos(x)等
  ③计算函数：Math.sqrt(x)、Math.log(x)、Math.exp(x)等
  ④数值比较函数：Math.abs(x)、Math.max(x,y,…)、Math.random()、Math.round(x)等
  【注意：①Math.random()：是一个 >=0 且 <1 的正小数；②Math.floor(x)：地板，小于等于x，并且与它最接近的整数。注意：将负数舍入为更小的负数，而不是向0进行舍入。③Math.ceil(x)：天花板，返回大于等于x，并且与它最接近的整数。注意：不会将负数舍入为更小的负数，而是向0舍入。】

  Number
  是对原始数值的包装对象。
  1）创建：
  ① var myNum=new Number(value);
  ② var myNun=Number(value);
  2）方法：
  —>toString：数值转换为字符串
  —>toFixed(n)：数值转换为字符串，并保留小数点后n位数，多了就截断，四舍五入。少了就用0补足，常用作数值的格式化。

  RegExp
  正则表达式对象。JavaScript中，正则表达式的应用分为两类：
  ① 和String对象的三个方法结合使用，实现对string的操作，如：replace/match/search
  ② 调用正则表达式对象的常用test方法测试，RegExpObject.test(string)：如果字符串string中含有与RegExpObject匹配的文本，则返回true，否则返回false；
  1）创建：
  ① var reg1=/^\d{3,6}$/;
  ② var reg2=new RegExp("^\d{3,6}$");

  Date
  用于处理日期和时间
  1）创建：
  ① var now = new Date();//当前日期和时间
  ② var now = new Date("2013/01/01 12:12:12”)/(“Oct 1, 2013”)/(2013,1,1);
  2）方法：
  —> 读取相关：getDay()(星期)、getDate()、getMonth()、getFullYear()…
  —> 修改相关：setDay()、setDate()、setMonth()、setHours() ……
  —> 转换字符串：得到某种格式的字符串显式，常用于页面显式，如：toString()、toDateString()、toLocaleTimeString()

  Function
  函数。是一组可以随时随地运行的语句。Function对象可以表示开发者定义的任何函数。函数实际上是功能完整的对象。
  1）定义：：function 函数名(参数){ 函数体; return; }
  【注意：由关键字function定义；函数名的定义规则与标识符一致，大小写敏感；可以使用变量、常量或表达式作为函数调用的参数；返回值必须使用return。】
  2）调用：函数可以通过其名字加上括号中的参数进行调用。如果有多个参数，则参数之间用逗号隔开。
  3）创建：
  ① 使用function关键字明文的声明一个方法（最常用，用于功能相关的方法）
  ② 使用Function对象创建函数，语法：
  var functionName=new Function(arg1,...argN,functionBody);//最后一个参数是方法体，前面的其它参数是方法的参数。

  
  function testFunction(){
  var f = new Function("a","b","alert(a+b);");
  f(10,20);
  }
  

  【注意：需求：有些方法不需要显式的存在，只是为其他方法里所使用（类似于java中的内部类）；缺陷：方法体不能复杂。】

  ③ 创建匿名函数，语法：
  var func=function(arg1,...argN){ func_body; return value; }
  4）全局函数 ：可用于所有内建的JavaScript对象。常用的全局函数有：
  —> encodeURI(str)：把字符串作为URI进行编码（大写i）。
  —> decodeURI(str)：对encodeURI()函数编码过的URI进行解码。
  —> parseInt/parseFloat:
  —> isNaN(str)：判断文本是否为数值
  —> eval(str)：用于计算某个字符串，以得到结果；或者用于执行其中的JavaScript代码。【注意：eval(str)只接受原始字符串作为参数，如果参数中没有合法的表达式和语句，则抛出异常；如eval(“2+3”)。】

  Arguments

  1. 是一种特殊对象，在函数代码中，代表当前方法被传入的所有的参数，形成一个数组。
     2）在函数代码中，可以使用arguments访问所有参数。
     ①arguments.length：函数的参数个数； ②arguments.[i]：第i个参数
     3）JavaScript中，没有传统意义上的重载（方法名相同，但是参数不同），即：如果方法名相同，则以最后一次定义的为准。如果想在JavaScript中实现类似于重载的效果，就需要使用arguments对象。即在同名方法体中判断参数的个数来确定方法体。如

  function(){ if(argumtents.length==1){…} else{…} }
  

  博客地址：Web基础之JavaScript（一）