js基础（一）

javascript基本介绍（一）

（后面我会持续写关于关于js的知识，里面写了很多js的小细节大家可以看下希望对大家有帮助，同时希望大家如果感觉有帮助的话可以帮忙顶一下，谢谢了）

Javascript介绍

javascript是什么

• javaScript 是因特网上最流行的脚本语言，它存在于全世界所有 Web 浏览器中，能够增强用户与 Web 站点和 Web 应用程序之间的交互。
  
  脚本语言：脚本语言又被称为扩建的语言，或者动态语言，直接嵌入html页面,是一种解释型语言，由解释器来运行，用来控制软件应用程序，脚本通常以文本保存，只在被调用时进行解释或编译

• JavaScript 是可插入 HTML 页面的编程代码。

• JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

• JavaScript 与 Java 是两种完全不同的语言

javascript作用

我们通过javascript可以改变html内容,改变html样式,进行验证输入等。

javascript历史

Netscape（网景） 发明了 JavaScript

    1997年由来自由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。

    从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 **ECMAScript **作为 JavaScript 实现的基础。

ECMAScript 仅仅是一个描述，定义了脚本语言的所有属性、方法和对象。其他语言可以实现 ECMAScript 来作为功能的基准，JavaScript 就是这样：

javascript组成 ###

javascript的核心ECMAScript描述了语言的语法和基本对象。

一个完整的javaScript实现是由下面三个不同部分组成的。

• 本地对象和内置对象JavaScript(ECMAScript)即核心
• 文档对象模型(DOM)
• 浏览器对象模型(BOM)

导入js方式

HTML 的 <script> 标签用于把 JavaScript 插入 HTML 页面当中

编写JavaScript 三种种方式：事件定义时、内部JS和外部JS

内部JS程序，在HTML源码中

<script type="text/javascript">
   alert(1);
</script>

外部JS程序，在HTML中引入单独的JS程序

 <script src="1.js"></script>
 1.js 内容
 alert(2);

注意：在引用外部JS的script标签间不能编写JavaScript代码，Style标签可以放在任意的位置，但不建议放在body中。

Javascript基础语法

变量声明

变量是用于存储信息的容器

javascript中的变量与我们在java中的变量一样。

在javascript中使用用 var 运算符（variable 的缩写）加变量名定义的

JavaScript 变量名称的规则：

• 变量对大小写敏感（y 和 Y 是两个不同的变量）
• 变量必须以字母或下划线开始

注意：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。

数据类型

JavaScript和Java一样存在两种数据类型

• 原始值 （存储在栈Stack中简单数据）
• 引用值 （存储在堆heap中对象）

5种原始数据类型

**Undefined、Null、Boolean、Number 和 String **

JavaScript中字符串是原始数据类型

typeof方法：运算符，查看变量类型

所有引用类型都是object

instanceof 运算符解决typeof对象类型判断问题

**区分 undefined 和 null **

• 变量定义了未初始化/ 访问对象不存在属性 --undefined
• 访问的对象不存在 --null

原始数据类型

(1)Number

创建方式：

var myNum=new Number(value);

var myNum=Number(value);

属性和方法：

• toString():转成字符串
• valueOf()：返回一个 Number 对象的基本数字值

(2)Boolean

创建方式：

var bool = new Boolean(value);

var bool = Boolean(value);

属性和方法：

• toString():转成字符串
• valueOf()：返回一个 Boolean 对象的基本值(boolean)

(3)String

创建方式：

var str = new String(s);

var str = String(s);

属性和方法：

•       **length:**字符串的长度
  

•   	**charAt(index):**返回索引字符
  

•   	**charCodeAt(index):**返回索引字符unicode
  

•   	**indexOf(String):**返回字符的索引
  

•   	**lastIndexOf(String);**逆向返回字符的索引
  

•   	**split(reg);**将字符串按照特殊字符切割成数组
  

•   	**substr(index):**从起始索引号提取字符串中指定数目的字符
  

•   	**substring(str1,str2):**提取字符串中两个指定的索引号之间的字符
  

•   	**toUpperCase();**转大写
  

示例：

(4)Array

创建方式：

var arr = new Array();//空数组

var arr = new Array(size);//创建一个指定长度的数据

var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素

var arr = [];//空数组

** var arr = [1,2,5,"java"];**//创建数组直接实例化元素

属性和方法：

•       **length:**数组长度
  

•   	**join()：**把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
  

•   	**pop():**删除并返回最后元素
  

•   	**push()：**向数组的末尾添加一个或更多元素，并返回新的长度
  

•   	**reverse();**反转数组
  

•   	**sort();**排序
  

  ** join方法演示**

输出结果

**George,John,Thomas

George_John_Thomas **

(5)Date

创建方式：

var myDate = new Date();

var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值

属性和方法

•       getFullYear():年
  

•   	getMonth():月 0-11
  

•   	getDate():日 1-31
  

•   	getDay()：星期 0-6
  

•   	getTime():返回1970年1月1日午夜到指定日期（字符串）的毫秒数
  

•   	toLocaleString();获得本地时间格式的字符串
  

(6)Math

创建方式：

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

属性和方法

•       PI：圆周率
  

•   	abs():绝对值
  

•   	ceil():对数进行上舍入
  

•   	floor():对数进行下舍入
  

•   	pow(x,y)：返回 x 的 y 次幂
  

•   	random():0-1之间的随机数
  

•   	round():四舍五入
  

(7)RegExp

创建方式：

var reg = new RegExp(pattern);

var reg = /^正则规则$/;

规则的写法：

•       [0-9]
  

•   	[A-Z]
  

•   	[a-z]
  

•   	[A-z]
  

•   	\d 代表数据
  

•   	\D	非数字
  

•   	\w	查找单词字符
  

•   	\W	查找非单词字符
  

•   	\s	查找空白字符
  

•   	\S	查找非空白字符
  

•   	n+	出现至少一次
  

•   	n*	出现0次或多次
  

•   	n?	出现0次或1次
  

•   	{5} 出现5
  

•   	{2,8} 2到8次
  

方法：

test(str):检索字符串中指定的值。返回 true 或 false

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

例子

var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

输出：e

您可以向 RegExp 对象添加第二个参数，以设定检索。例如，如果需要找到所有某个字符的所有存在，则可以使用 "g" 参数 ("global")。

在使用 "g" 参数时，exec() 的工作原理如下：

• 找到第一个 "e"，并存储其位置

• 如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置

  var patt1=new RegExp("e","g");
  
  do
  
  {
  
  result=patt1.exec("The best things in life are free");
  
  document.write(result);
  
  }
  
  while (result!=null)

输出结果：**eeeeeenull

**

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：

truefalse

需求：

校验邮箱：

		var email = haohao_827@163.com
		var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
		reg.test(email);

引用类型

引用类型通常叫做类(class),也就是说，遇到引用值，所处理的就是对象。

从传统意义上来说，ECMAScript 并不真正具有类。

ECMAScript 定义了“对象定义”，逻辑上等价于其他程序设计语言中的类。

对象是由 new 运算符加上要实例化的对象的名字创建的

var obj=new Object();

Object对象自身用处不大，但是 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似，ECMAScript 中的所有对象都由这个对象继承而来，Object 对象中的所有属性和方法都会出现在其他对象中

常用的javascript对象有 Boolean,Number,Array,String,Date,Math,RegExp.

可以使用instanceof运算符来判断对象的类型。

类型转换###

ECMAScript为开发者提供了大量的类型转换方法。

大部分类型具有进行简单转换的方法，还有几个全局方法可以用于更复杂的转换。

Boolean 值、数字和字符串的原始值它们是伪对象，这意味着它们实际上具有属性和方法。

转换成字符串

toString()方法.

转换成数字

ECMAScript 提供了两种把非数字的原始值转换成数字的方法，

即 **parseInt() **和 parseFloat()

前者把值转换成整数，后者把值转换成浮点数。

注意：只有对 String 类型调用这些方法，它们才能正确运行；对其他类型返回的都是 NaN（not a number)。

强制类型转换

使用强制类型转换可以访问特定的值。

ECMAScript 中提供了三种强制类型转换：

1. 把给定的值转换成Boolean类型
2. 把给定的值转换成数字
3. 把给定的值转换成字符串

在js中一切元素都可以都判断出布尔值，所以我们把其他数据强转为布尔型

重点：（这个和java中不同）

下面的这些都需要记忆

var b1=Boolean(""); //false--空字符串
var b2 = Boolean("hello"); //true  非空值
var b3 = Boolean(50); // true 非空值
var b4 = Boolean(null);// false 空值
var b5 = Boolean(0); // flase -零
var b6 = Boolean(new object()); // true 对象
var b7 = Boolean(NaN); // flase
var b8 = Boolean(undefined); //flase 创建变量没有赋值

根据这个特性可以当做简单的if语句

如

var a;
a&&console.log("我是判断语句我不会输出，因为a是false所以不会执行到后面来");

运算符与表达式

一元运算符

• ++ 自加
• -- 自减
• void运算符

void 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值，

例如，

从 HTML 的<a元素调用 JavaScript 函数时。

要正确做到这一点，函数不能返回有效值，否则浏览器将清空页面，只显示函数的结果。

例如：

<a href="javascript:window.open('about:blank')">Click me</a>

如果把这行代码放入 HTML 页面，点击其中的链接，即可看到屏幕上显示 "[object]"。这是因为 window.open() 方法返回了新打开的窗口的引用。然后该对象将被转换成要显示的字符串。要避免这种效果，可以用 void 运算符调用 window.open() 函数：

<a href="javascript:void(window.open('about:blank'))">Click me</a>

这使 window.open() 调用返回 undefined，它不是有效值，不会显示在浏览器窗口中。

提示：请记住，没有返回值的函数真正返回的都是 undefined。

**逻辑运算符**

逻辑运算会有三种 NOT AND OR

在学习各种逻辑运算符之前，让我们先了解一下 ECMAScript-262 v5 规范中描述的 ToBoolean 操作。

参数类型 结果

Undefined	false
Null		 false
Boolean	  结果等于输入的参数（不转换）
Number	   如果参数为 +0, -0 或 NaN，则结果为 false；否则为 true。
String	   如果参数为空字符串，则结果为 false；否则为 true。
Object	   true

• 逻辑NOT运算符

  如果运算数是对象，返回 false
  
  如果运算数是数字 0，返回 true
  
  如果运算数是 0 以外的任何数字，返回 false
  
  如果运算数是 null，返回 true
  
  如果运算数是 NaN，返回 true
  
  如果运算数是 undefined，发生错误

• 逻辑AND运算会

  运算数 1 运算数 2 结果
  
  true true true
  
  true false false
  
  false true false
  
  false false false

• 逻辑OR运算符

  运算数 1 运算数 2 结果
  
  true true true
  
  true false true
  
  false true true
  
  false false false

• 加性运算符

某个运算数是 NaN，那么结果为 NaN。

-Infinity    加 		-Infinity，	结果为 	-Infinity。
Infinity	 加 		-Infinity，	结果为	 NaN。
+0 		  加 		+0，		   结果为	 +0。
-0 		  加		 +0，		   结果为 	+0。
-0 		  加 		-0，           结果为 	-0。

不过，如果某个运算数是字符串，那么采用下列规则：

如果两个运算数都是字符串，把第二个字符串连接到第一个上。

如果只有一个运算数是字符串，把另一个运算数转换成字符串，结果是两个字符串连接成的字符串。

 关系运算符

关系运算符有>(大于),<(小于) >=(大于等于) <=(小于等于) ,它们的运算结果返回的是一个boolean值。

常规比较

如果是数字，那么比较与我们在java中操作一样。

如果是两个字符串使用关系运算符操作，那么我们可以简单理解成是按照字母的码值来比较。比较容易理解的是根据字母顺序，在前的字母比在后的小，所有的小写字母都大于大写字母。

比较数字或字符串

如果两个数字字符串比较，例如:”23”<”3”,它们也是按照数字在码表中的码值来比较.

如果一个是数字一个是字符串，那么会将字符串转换成数字在进行比较。

等性运算符

ECMAScript提供了两套等性运算符：

• 等号与非等号用来处理原始值
• 全等号与非全等号来处理对象。

执行类型转换的规则如下：

• 如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。

• 如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。

• 如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。

• 如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。

在比较时，该运算符还遵守下列规则：

• 值 null 和 undefined 相等。

• 在检查相等性时，不能把 null 和 undefined 转换成其他值。

• 如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。

• 如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。

全等号由三个等号表示（=），只有在无需类型转换运算数就相等的情况下，才返回 true。

非全等号由感叹号加两个等号（!）表示，只有在无需类型转换运算数不相等的情况下，才返回 true。

例子

<!DOCTYPE html>
<html>
  <head>
<title>测试不全等</title>
<script>
  var a = 1;
  var b = 4;
  a !== b && console.log("true");//true
  var c = true;
  a !== c && console.log("true");//true
</script>
<meta charset="UTF-8">
  </head>
  <body>
  </body>
</html>

下面列一些特殊情况

表达式   				值
null==undefined		true
"NaN"==NaN			false
5==NaN				false
NaN==NaN			  false
NaN!=NaN			  true

• 三元运算符

在js中也存在三元运算符，与java中使用方式一样。例如:

var max = (num1 > num2) ? num1 :num2;

这个表达式描述的就是如果num1大于num2，那么max的值就是num1,返回之max的结果就是num2.

• 赋值运算符

简单的赋值运算符由等号（=）实现，只是把等号右边的值赋予等号左边的变量

每种主要的算术运算以及其他几个运算都有复合赋值运算符：

• 乘法/赋值（*=）

• 除法/赋值（/=）

• 取模/赋值（%=）

• 加法/赋值（+=）

• 减法/赋值（-=）

• 逗号运算符
  
  用逗号运算符可以在一条语句中执行多个运算。例如:
  
  var a=1,b=2,c=3;

Javascript基础语法-条件语句 ####

if语句

javascrip中的if语句，与我们在java中使用基本相同，例如:

if (i > 30) {
alert("大于 30");
}else {
alert("小于等于 30");
}

switch语句

switch语句也与我们在jdk1.7中使用相同，也就是说，它可以直接判断字符串类型

var BLUE = "blue", RED = "red", GREEN = "green";

switch (sColor) {
  case BLUE: alert("Blue");
break;
  case RED: alert("Red");
break;
  case GREEN: alert("Green");
break;
  default: alert("Other");
}

Javascript基础语法-循环语句

在javascript中也存在循环语句for while do-while，基本与在java中使用相同.

for示例

var iCount = 6;
for (var i = 0; i < iCount; i++) {
  alert(i);
}

注意:在声明变量归我们使用var

while示例

var i = 0;
while (i < 10) {
  i += 2;
}

do-while示例

var i = 0;
do {
i += 2;
} while (i < 10);

注意:在while后面的分号