js基础语法

今天来总结一下javascript入门的东西，包括java语言和js的区别，js的基础语法，js中的函数，事件等等。

javascript简称JS，是一门基于Html脚本语言(无法独立运行，一般嵌入到html中运行：自从有了NodeJS之后，js可以基于node环境运行)，JS是一么基于对象的语言(不是面向对象，没有类的概念，但是构造器)，是一门基于事件驱动(可以通过页面中的可交互控件触发js代码)的语言由三大核心部分构成:

1.ECMAScript核心语法(js基础语法)

2.DOM模型(Document Object Model)

3.BOM模型(Browse Object Model)

java和js的区别：

Java:

   面向对象(任何对象都需要创建)

   需要先编译，再解释(运行)

   强类型语言(任何数据类型在使用时，都需要先声明类型，并且所有数据类型一旦定义无法修改)

   四类八种基本数据类型

Js:

   基于对象(有一系列内置对象，同时也可以创建)

   无需编译，可以直接运行

   弱类型语言(所有的数据类型都不必事先声明,并且在使用时能动态改变数据类型)

   JS所有的数字类型都是double类型(没有整数，小数之分)

   JS没有字符型，所有的字符字符串都是字符串类型

   JS的数据类型：数字，字符串，布尔类型，null，undefined，NaN，对象

 

JS在页面中使用的两种方式：

1.在html页面的头部，或者body结束部分使用<script>标签包裹js代码

2.将外部的js文件，引入到head之间使用如下代码

<script type=”text/javascript”  src=”js文件所在路径”></script>

 

js中的一些基础语法：

1、js中==和===区别：都属于逻辑判断，==比较运算符两边的值是否一致(不包含数据类型)，===恒等于，会比较运算符两边的值以及数据类型，所以===是一种强制比较

2、由于js不像java一样通过编译解析后才能运行，可以直接运行，所以对js的调试要做一些特殊的标记。下面给出js调试的一些基本方法（显示调试信息）

在页面输出信息包含如下方式
 1.在浏览器的控制台中显示消息（F12），一般用于调试，不会影响代码的正常执行

eg:console.log();( 按日志的级别可分为： info debug log warn error)
  2.在浏览器中弹出一个警告框，影响代码的执行 alert();
  3.在页面文档中输出内容，会覆盖当前页面内容   document.write();
  4.在页面文档指定位置输出，可以按照需求覆盖指定位置对象.innerHTML="";

3、js中的函数

由于js是一门弱类型语言，所以其函数也不必声明返回值类型，调用时，直接用函数名即可

js中的函数和java中的一样，也分四种类型：有参数有返回值
有参数无返回值
无参数有返回值
无参数无返回值 

eg:

无参数无返回值的普通函数

function print(){console.info('hello');}//函数调用1print();

另一种函数调用方式

//函数调用2 创造一个作用域  多库共存(function(){console.info('helloworld');})();

有参数有返回值的函数

//包含参数的函数function fun1(a,b){return a+b;}var sum = fun1(10,5);console.info(sum);

匿名函数及其调用

//匿名函数（java中只存在匿名内部类）var a = function(){console.info('匿名函数');}a();

另外：js中无重写重载概念，函数若重名，则后面的函数覆盖前面定义的函数。

javaScript中的循环语句和判断语句和java相同（除了for  each以外）,所以就不再赘述了。

4、js中argument的使用

一、js中允许调用时传入的参数和函数声明时的参数个数不一致，这时则可用arguments.length来获取函数在调用时实际传入的参数个数

function fun2(a,b,c){//获取函数在调用时实际传入的参数个数console.info(arguments.length);//fun2();}fun2(1,2);

二、匿名函数的递归调用：(用到arguments.callee(n)回调  )

在说这个之前，首先说一下js中的回调函数，所谓回调，就是把一个函数当作参数向另一个函数传递，该函数被当做参数时传递时函数名后不加（），代表不是立即运行，而是被另一个函数执行时再运行

下面看个例子：

function callme(a){console.info('这是一个回调方法'+a);}function waitme(call,p){console.info('等等我');call(p);//回调函数 把一个函数当做参数向另一个函数中传递}var a = callme;waitme(a,'hello');

arguments.callee()就是用于在函数内部，调用函数自身进行递归，而匿名函数又没有函数名，所以就用arguments.callee()来调用自身进行递归。下面给出一个递归的经典例子：斐波那契数列

//斐波那契数列 1  1  2  3  5  8  13   Nvar result = (function(n){if(n == 1 || n == 2){return 1;}else{//arguments.callee()，在函数内部，调用函数自身(递归) 一般用于匿名函数的递归调用return arguments.callee(n-1) + arguments.callee(n-2);}})(7);console.info(result);

5、js中的异常：js中不存在算术异常，例如，如果用一个数除以0，在js中是不会报异常的，其结果为无穷，因为js中存在正无穷infinity和负无穷-infinity

js中的异常可以说就是一种错误，也可以像java中的异常一样捕获

//异常（错误）function fun3(a,b){try{console.inf(a/b); //  /表达式/}catch(e){console.error(e);}finally{console.debug('最终执行');}}fun3(10,0);

console.info('==================================')//设计一个严格的函数(调用函数时，要求传入的实参个数必须与形参个数一致，否则抛出异常)function fun4(a,b,c){var result;try{if(arguments.length != 3){throw new Error('传入的实参个数为'+arguments.length+'，需要参数为3个!');}else{result = a+b+c;}return result;}catch(e){console.error(e);}finally{result = -1;}return result;}result = fun4(1,2);console.info(result);

6、js虽然没有类的概念，但也存在对象的概念，js中的固有对象不多，但也可以自己创建对象，js中创建对象的方式有三种

一、JSON对象

JSON是JavaScript  Object  Notation的缩写，JSON对象由键值对构成，能实现不同语言平台之间的数据交换，是轻量级的数据交换格式

var p={name:'张三',sex:'男',age:18,//匿名函数setName:function(name){this.name=name;},getName:function(){return this.name;}};p.setName('李四');console.info(p.getName());console.info(p.name)

二、通过new Object的方式来创建对象（js中任何类型的数据，包括对象和方法，均可当做一个变量来处理）

//对象创建方式二var user = new Object();//等效 user = new Object;user.username = 'admin';user.password = '123456';console.info(user);

三、模拟java类的构造器来创建对象

//对象创建方式三 模拟java类的构造器function Employee(ename,job,sal,hello){this.name = ename;this.job = job;this.sal = sal;this.sayHello=hello;}//对象创建var emp = new Employee('james','项目经理',18888,function(){console.info('hello,'+this.name+"--"+this);});

7、闭包

闭包是javaScript的一种高级概念，可实现不同作用域之间的变量共享。其实，简单一点理解，就是把函数当做返回值返回回去

eg：下面给出两个例子

function a(){this.s = 10;this.increment=function(){this.s++;}this.getS=function(){return this.s;}}var a = new a();a.increment();a.increment();console.info(a.getS());

  

function fun1(){var v = 1;var f = function(){return v;}return f;}var fun = fun1();console.info(fun());

8、数组

js中的数组不必一开始就声明其大小，可实现动态初始化

//数组动态初始化var arr1 = []; //var arr1 = [1,2,3] 静态初始化arr1[0] = 1;arr1[1] = 2;arr1[2] = 3;console.info(arr1);

当然了，也可以用Array对象来创建数组

var arr2 = new Array(1,2,3,4,5,6,7,8); //var arr2 = new Array() 动态初始化console.info(arr2[5]);console.info(arr2.length);

数组中元素的遍历可用for...in...    

即格式为：  for 变量 in 数组

变量表示元素所在的位置(索引)

for(var i in arr2){document.write(arr2[i]);}

数组也可通过join()和split()方法实现和字符串之间的转换

console.info(arr2);//将数组根据给定的分隔符转换为字符串arr2 = arr2.join('/');console.info(arr2);//将字符串转换为数组(分割)arr2 = arr2.split('/')console.info(arr2);

js中的数组也可用push()和pop()方法实现动态的添加和删除元素

//向数组的末尾追加元素arr2.push('10');//arr2[arr2.length] = 10;console.info(arr2);//将数组的末尾元素返回并删除var rm = arr2.pop();console.info('移除元素:'+rm);console.info(arr2);

9、js中的正则表达式：处在两斜杠之间的表达式即为正则表达式      /表达式/

对于js正则表达式的使用主要有三种操作
1.校验   test 属于正则表达式对象的方法
2.查找   match     属于string的方法
3.替换   replace   属于string的方法

eg：1、校验

//正则表达式 RegExp  i:不区分大小写匹配       g:执行多次匹配var regex = /1[3578]\d{9}/g //判断参数值是否符合正则表达式console.info(regex.test('13109876543'));

2、查找

var msg = 'sdfhdfhasdfha13212312391331231113215871231312313wsdfsdfnlsd';var phones =  msg.match(regex);console.info(phones)

3、替换

console.info(msg.replace(regex,'手机号'));

10、js中的Date对象

可通过new Date()来新建日期对象，然后通过日期对象的一系列方法来操作时间

//Date对象创建var date = new Date();console.info(date);console.info(date.toString());console.info(date.toLocaleString());//获取完整年份var year = date.getFullYear();//获取月份 从0开始var month = formatDate(date.getMonth() + 1);//获取当前月份的第几天var day = formatDate(date.getDate());//获取小时var hours = formatDate(date.getHours());//获取分钟var min = formatDate(date.getMinutes());//获取秒钟var second = formatDate(date.getSeconds());var content = year+"-"+month+"-"+day+' '+hours+':'+min+':'+second;