This is my blog.

最近听编译老师吹嘘JavaScript

发现书架上正巧有这本书

那就学习一下吧！

Javascript有三个部分

这一部分的笔记记录的基本就是语法

虽然有java这个字吧，其实人家本来不叫这个的，就是当时java太厉害了，于是就改名了

从此走上人生巅峰？？？！所以说风水很重要，取名字需要谨慎呐！

我感觉我的名字就很好听，男女通用，还不撞脸……（不好意思，跑题了

JavaScript 是面向对象的语言，但 JavaScript 不使用类

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）

JavaScript 基于 prototype，而不是基于类的

先给个概述：

Javascript 由核心(ECMAScript ) 、文档对象模型（DOM）、浏览器对象模型（BOM）组成

其中ECMAScript：规定了语法、类型、语句、关键字、保留字、操作符、对象

语法

类型

默认全局变量存在于window对象中
定义变量的时候，不指定类型，只有var关键字；在非严格模式下，没有var关键字的作为全局变量；在严格模式下，则是错误语句，设置为严格模式使用'use strict';语句
增加了undefined类型，在定义变量之后没有赋值的情况下会出现；null表示一个空的值
bool类型封装成Boolean
如果布尔对象无初始值或者其值为：0、-0、null、””、false、undefined、NaN，那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 “false” 时）！
整数，浮点数合并为Number类型，其中含有NaN，表示非数值
JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等，所有 JavaScript 数字均为 64 位，所有的数字都是浮点型类型，所以3/2可以得到小数1.5
整数（不使用小数点或指数计数法）最多为 15 位
当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）
小数的最大位数是 17，但是浮点运算并不总是 100% 准确
浮点数在运算过程中会产生误差
数值转换，parseInt:string->int等等
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，所以绝不要在数字前面写零，除非您需要进行八进制转换
和java一样有object类型，其他类型都是从其中派生出来的

数字可以是数字或者对象

var x = 123;
var y = new Number(123);
typeof(x) // 返回 Number
typeof(y) // 返回 Object

数字属性
- MAX_VALUE
- MIN_VALUE
- NEGATIVE_INFINITY
- POSITIVE_INFINITY
- NaN
- prototype
- constructor
数字方法
- toExponential()
- toFixed()
- toPrecision()
- toString()
- valueOf()
字符串
- 多行字符串的表示方法，用反引号 ` … ` 表示：
1
2
3
`这是一个
多行
字符串`;
- 得到字符串的长度，不是使用方法吗？反正感觉不像函数，s.length；看了一下chrome的报错信息，真的不是函数呢！
- 字符串是不可变的！就很神奇，可能是因为JavaScript中的变量除了基本类型都是引用类型的原因吧，使得这些赋值的时候，都是指向一个地址，然后这个字符串就是一个const值了；但是通过调用toUpperCase()函数，这说明返回的是一个新的字符串呢！那这样的话，原字符串就没有变
- 字符串使用indexOf()来定位字符串中某一个指定的字符首次出现的位置
- match()函数来查找字符串中特定的字符，并且如果找到的话，则返回这个字符
- replace()方法在字符串中用某些字符替换另一些字符
- 字符串使用split()函数转为数组:
  1
  2
  txt="a,b,c,d,e" // String
  txt.split(","); // 使用逗号分隔
- 字符串可以直接用”+”连接；但是JavaScript还提供了新的一种方法，使用${}包含变量的值
  1
  2
  3
  4
  var name = '小明';
  var age = 20;
  var message = `你好, ${name}, 你今年${age}岁了!`;
  alert(message);
- 属性:
  - length
  - prototype
  - constructor
- 方法:
  - charAt()
  - charCodeAt()
  - concat()
  - fromCharCode()
  - indexOf()
  - lastIndexOf()
  - match()
  - replace()
  - search()
  - slice()
  - split()
  - substr()
  - substring()
  - toLowerCase()
  - toUpperCase()
  - valueOf()
Array
- 数组可以包括任意数据类型
- arrayname.length，这不叫函数了，我也不知道叫什么呢；并且可以对他进行直接赋值！但是由于字符串不可变，所以赋值以后没有变化；对于变长后，后面的值默认为undefined；如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化；
- slice()就是对应String的substring()版本；
- push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉【好像说array可以队列也可以是堆栈操作；
- 如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉；
- splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素；
- concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array，并没有修改当前Array，而是返回了一个新的Array；
- sort()会直接修改当前Array的元素位置
变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。例如Java是静态语言
复制变量值的时候，除了基本类型是复制值，完全独立外；其他都是复制一个引用地址；所以在函数传递参数的时候需要注意呀！！！！
对于同一个变量，不可以声明两次

对象

键值组合，感觉像map，但是这里叫做对象

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null //最后一个键值对不需要加,
};
//在构造器函数内部定义对象
function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}

访问属性用.或者[“”];若是访问不存在的属性，则返回undefined，并会给该对象添加这个属性
删除属性，直接用delete 对象.属性名
可以判断属性是否存在属性 in 对象
可以通过对象.hasOwnProperty()的方法，判断这个属性是否是这个对象的，而不是从父类继承而来的

Map

创建var m = new Map();
赋值m.set(a,b);
查询m.get(a); //b
删除m.delete(a);

Set

创建var s = new Set()
添加s.add(value);
删除s.delete(value);

迭代器

可以用迭代器来遍历，如for(var x of arrays/Map/Set)，这样输出的x就是他的值
forEach 可以接收一个函数

这里是Array，对于Set没有index；而Map则是value,kep,map

a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});

Boolean

Number

String

var txt = "Hello World!";
document.write("<p>字体变大: " + txt.big() + "</p>");
document.write("<p>字体缩小: " + txt.small() + "</p>");
document.write("<p>字体加粗: " + txt.bold() + "</p>");
document.write("<p>斜体: " + txt.italics() + "</p>");
document.write("<p>固定定位: " + txt.fixed() + "</p>");
document.write("<p>加删除线: " + txt.strike() + "</p>");
document.write("<p>字体颜色: " + txt.fontcolor("green") + "</p>");
document.write("<p>字体大小: " + txt.fontsize(6) + "</p>");
document.write("<p>下标: " + txt.sub() + "</p>");
document.write("<p>上标: " + txt.sup() + "</p>");
document.write("<p>链接: " + txt.link("http://www.w3cschool.cc") + "</p>");
document.write("<p>闪动文本: " + txt.blink() + " (不能用于IE,Chrome,或者Safari)</p>");

Date

创建日期：

var d1 = new Date() // 当前日期和时间
var d2 = new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
var d3 = new Date(dateString)
var d4 = new Date(year, month, day, hours, minutes, seconds, milliseconds)

方法：

getFullYear() 获取年份

getTime() 返回从 1970 年 1 月 1 日至今的毫秒数

setFullYear(year, month-1, day) 设置具体的日期，JavaScript 月数是从0至11

setDate() 一般会通过getDate()为基准，来设定前后天的日期

getDate()

toUTCString() 将当日的日期（根据 UTC）转换为字符串

getDay() 显示星期几（数字），其中0表示周日

getHours()、getMinutes() 、getSeconds()

在网页上显示一个时钟

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function startTime(){
	var today=new Date();
	var h=today.getHours();
	var m=today.getMinutes();
	var s=today.getSeconds();
	m=checkTime(m);// 在小于10的数字前加一个‘0’
	s=checkTime(s);
	document.getElementById('txt').innerHTML=h+":"+m+":"+s;
	t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
	if (i<10){
		i="0" + i;
	}
	return i;
}
</script>
</head>
<body onload="startTime()">
	
<div id="txt"></div>
	
</body>
</html>

Array

创建：

常规方式

var myCars=new Array(); 
myCars[0]="Saab";       
myCars[1]="Volvo";
myCars[2]="BMW";

简洁方式

1	var myCars=new Array("Saab","Volvo","BMW");

字面

1	var myCars=["Saab","Volvo","BMW"];

注：所有的JavaScript变量都是对象，因此，你可以在数组中有不同的变量类型

方法：

length()

indexof(“value”)

concat() 参数个数任意

join() 数组元素组成字符串，数组元素间用,隔开

pop() 删除最后一个元素

push() 数组的末尾添加新的元素

reverse()

shift() 删除数组的第一个元素

unshift() 在数组的开头添加新元素

slice(begin,end) 选择[begin,end)内的元素

sort() 若想降序，则sort(function(a,b){return b-a});

toString()

算术Math

方法：

random() 0~1之间的随机数

round() 四舍五入

floor()

max()

min()

属性：

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

RegExp

语法：

1
2
3

var patt=new RegExp(pattern,modifiers);
//或更简单的方法
var patt=/pattern/modifiers;

修饰符：

i - 修饰符是用来执行不区分大小写的匹配。

g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）

方法：

test(sentence)方法搜索字符串指定的值，根据结果并返回真或假。

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

操作符

其中<<左移，<<<无符号左移；右边类似
==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

不要使用==比较，始终坚持使用===比较
1
NaN === NaN; // false 注意中间的a是小写呐
有^2，表示平方

语句

with语句，简化编写同一对象的工作 with(object){}，相当于不用写.function
和c后面的版本类似，可以用for(var i in arrays);，但是i的值是下标，必须用arrays[i]来获得值
有label:statement语句，类似于goto语句

关键字

const、var

其他

printf被alert代替，会弹出对话框，可以用console.log()在控制台打印内容
弹出输入框，并将输入的值作为返回值
1
prompt('请输入身高(m):')

异常

1
2
3

if (typeof x !== 'number') {
    throw 'Not a number';
}

块级定义的变量，在块结束后可用，但是函数体内定义的就只能在函数体内使用；若是要和c的块内变量一样的话，用let而不是var，let命令使变量的作用域限制在{}内
支持解构赋值var [x, y, z] = ['hello', 'JavaScript', 'ES6'];

函数

严格来说是一个对象

// 方法一
function name(x, y) {
   ....
   return x;
}
// 方法二
var name = function (x,y) {
   ....
   return x;
};

关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。可以用arguments的属性例如length来进行操作

x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

rest参数

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);//这个返回值是一个array
}

return 不支持多行写，那为什么缩进不严格要求呢？！，若是要多行写的时候，需要将返回值用大括号括起来，表示一个整体
和java一样支持函数嵌套；函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。
会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部，所以如果声明在后面也不会报错（挺神奇的，感觉解释器有点难写）

JavaScript闭包

点一下加一，不会一直是1

变量 add 指定了函数自我调用的返回字值。

自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护，只能通过 add 方法修改。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>

JSON

JSON：JavaScript Object Notation

一种轻量级的数据交换格式

{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

语法规则

数据为键/值对
数据由逗号分隔
大括号保存对象
方括号保存数组

JSON&JavaScript

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';//JSON格式的字符串
obj = JSON.parse(text); //转换为Javascript对象
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
//JSON.stringify()用于将JavaScript值转换为JSON字符串

表单验证

必填（或必选）项目

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
	
</body>
</html>

E-mail验证

输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
  		return false;
	}
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
	
</body>
</html>

库

JavaScript 库常被称为 JavaScript 框架

JavaScript 方式

function myFunction()
{
    var obj = document.getElementById("h01");
    obj.innerHTML = "Hello";
    obj.style.color = "red";
}
onload = myFunction;

接下来会在各种库中说明他们的方式

jQuery

它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）
jQuery 同时提供 companion UI（用户界面）和插件

主要的 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能

不能在 jQuery 对象上使用 HTML DOM 的属性和方法

jQuery 方式

function myFunction()
{
    ("#h01").attr("style","color:red").html("Hello");
}
$(document).ready(myFunction);

jQuery 允许链接（链式语法），链接（Chaining）是一种在同一对象上执行多个任务的便捷方法

Prototype

提供用于执行常见 web 任务的简单 API，API 是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作 HTML DOM

Prototype 通过提供类和继承，实现了对 JavaScript 的增强

与 jQuery 类似，Prototype 也有自己的 $() 函数

$() 函数接受 HTML DOM 元素的 id 值（或 DOM 元素），并会向 DOM 对象添加新的功能
与 jQuery 不同，Prototype 没有用以取代window.onload()的 ready() 方法

相反，Prototype 会向浏览器及 HTML DOM 添加扩展

Prototype方式

function myFunction()
{
$("h01").writeAttribute("style","color:red").insert("Hello");
}
Event.observe(window,"load",myFunction);

MooTools

提供了可使常见的 JavaScript 编程更为简单的 API

MooTools 也含有一些轻量级的效果和动画函数

其他

CDN (Content Delivery Network)**内容分发网络**是包含可分享代码库的服务器网络

引用

如需在您的网页中使用 JavaScript 框架库，只需在 <script> 标签中引用该库即可

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script>

例子

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
function writeText(txt){
	document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<body>
<!-- alt： 当浏览器无法显示图片，将用alt中的内容代替 -->
<!-- usemap：客户端图像的映射--> 
<img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />
    
<map name="planetmap">
<!-- 在形状为矩形的时候，coords为左下角和右上角的坐标--> 
<!-- href点击后的连接 -->     
<area shape ="rect" coords ="0,0,82,126"
onmouseover="writeText('太阳和气体巨星类似木星是太阳系中最大的物体。')"
href ="sun.htm" target ="_blank" alt="Sun" />
<!-- 在形状为圆形的时候，coords为圆心的坐标和半径--> 
<area shape ="circle" coords ="90,58,3"
onmouseover="writeText('从地球上很难研究水星，因为它太接近太阳。')"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onmouseover="writeText('至到1960年，金星经常被认为是地球的孪生妹妹，因为金星是最靠近我们的行星，并且两个行星有很多相似的特点。')" 
href ="venus.htm" target ="_blank" alt="Venus" />
</map> 
                                                                                   
<p id="desc">鼠标在太阳和星星上移动，可以看到不同的描述。</p>
</body>
</html>

转载请注明出处，谢谢。

愿我是你的小太阳