JavaScript概述

1. JavaScript定义

JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言。仅仅能由浏览器解释运行。

当中：

脚本语言：解释执行（由浏览器来解释执行），无需编译。

基于对象：有一些内置的对象共我们使用，可是不能全然实现继承。封装和多态，仅仅能模拟。

事件驱动：必须由事件触发。

2. JavaScript的发展历程

在1995年时，由网景（Netscape）公司在Netscape浏览器上首次设计实现而成。

由于网景公司与升阳（Sun）公司合作，网景公司管理层次结构希望它外观看起来像Java，因此取名为JavaScript。

但实际上它的语法风格与Self及Scheme较为接近。

为了获取技术优势，微软（Microsoft）推出了JScript。CEnvi推出ScriptEase，与JavaScript类似相同可在浏览器上执行。为了统一规格，1997年。在ECMA（欧洲计算机制造商协会）的协调下，由网景、升阳、微软和Borland公司组成的工作组确定统一标准：ECMA-262。由于JavaScript兼容于ECMA标准，因此也称为ECMAScript。

眼下规范：ECMA-262。

3. JavaScript的特点

交互性（信息的动态交互）
跨平台性（不同意直接訪问本地硬盘）
安全性（仅仅要是能够解释Js的浏览器都能够运行，和平台无关）

JavaScript的语言组成

1. 核心语法（ECMA Core）

2. 浏览器对象模型（BOM，Browser Object Model）

3. 文档对象模型（DOM，Document Object Model）

JavaScript和HTML的结合方式

方法1：

直接写在事件中，当浏览器不能正确解释时。在前面加上“javascript:”，比如：javascript:alert('写在事件中')。


<input type="button" value="方法1" onclick="alert('写在事件中')" />

方法2：

使用script标签，在标签内写js代码。注意：script标签，必须有独立的结束标签。


<script  type="text/javascript" >
function _second(){
	alert("使用script标签，在标签内写js代码");
}
</script>
 
<input type="button" value="方法2" onclick="_second()" />

方法3：

引入外部js文件。<script>和</script>间不能够有JavaScript代码。


<script type="text/javascript" src="demo.js" ></script>
 
<input type="button" value="方法3" onclick="_third()" />

注意：

JavaScript每句最后的分号“;”非必须。可是建议加上。
JavaScript的变量，方法和运算符对大写和小写敏感。
JavaScript能够写在网页<html>标签内的随意地方，可是一般在<head>标签内。
仅仅有须要使用JavaScript打印输出，才将JavaScript写在<body>标签内。

JavaScript的基本的语法

1. 凝视


/*多行凝视*/
//单行凝视

2. 变量定义

使用varkeyword进行变量定义。也能够不使用：


var a = 1;
a = "test";
a = 3.1415926;
a = false;
b = 3;

因为JavaScript是弱类型语言，所以数据类型由值确定。

3. 变量类型

五种基本数据类型：Undefined、Null、Boolean、Number 和 String，存储在栈区。

引用数据类型：存储在堆区。


var v1 = 10; //number
var v2 = 15.6; //number
var v3 = "abc"; //string
var v4 = false; //boolean
var v5; //undefined
var v6 = null; //基本数据类型是null。用typeof验证的时候是object

Undefined：typeof()測试为Undefined。
null：typeof()測试为Object。
var str = "abc";：基本数据类型字符串。

var str = new String("abc");：引用数据类型字符串对象。

基本数据类型字符串能够直接调用字符串对象的方法，由于JavaScript为弱类型语言。

4. 弱类型转换


var v1 = "1.5";
var v2 = 3;
var v3 = v2 + v1; //string
var v4 = v2 - v1; //number
var v5 = v2 * v1; //number
var v6 = v2 / v1; //number

5. 运算符

加减乘除：，字符串+数字返回的是字符串。其余全是返回number。
与或非：&&：左右两边都成立则为真；||：左右有一边为真即是真；！：取反。
条件运算。两个等号比較的值的内容，三个等号比較的是值的内容和数据类型。

演示样例


var u = 10;
var t = "10";
alert(u==t); // true
alert(u===t); // false

三元运算符：推断表达式 ? 表达式1 : 表达式2;
在javaScript其中，''、0、false、undefined、NaN、null是假。其余全是真。

演示样例


var v = NaN ? 10 : 20; // 20

6. 流程控制

6.1 条件


if (condition1) {
  statement1;
} else if (condition2) {
  statement2;
} else {
  statement3;
}

当中，else if 和 else 不是必须的。

6.2 循环

方式一：

while (condition) {

statement;

}

方式二：

do {

statement;

} while (condition);

方式三：

for (初始化表达式; 循环条件表达式; 循环后操作表达式) {

statement;

}

while 循环是先推断。后运行；do-while 循环是先运行后推断。
for 循环先运行初始化表达式。然后推断循环条件表达式，假设满足则运行循环体，接着运行循环后操作表达式，然后循环推断循环条件表达式，直到不满足为止。
也就是说初始化表达式仅仅在一開始运行一次。接下来就是条件表达式->循环体->操作表达式的循环运行。

6.3 多重选择


switch (choice) {
  case 1:
    statement1;
    break;
  case 2:
    statement2;
    break;
  default:
    // bad input
    statement3;
    break;
}

case 标签能够是随意数据类型 var。
switch 语句从与选项值（choice）相匹配的 case 标签处開始运行，直到遇到 break 语句，或者运行到 switch 语句的结束为止。假设没有相匹配的 case 标签，而有 default 子句，就运行这个子句。

6.4 案例

动态打印表格


<html>
 
<head>
    <title>动态打印表格</title>
</head>
 
<body>
    <script type="text/javascript">
    //document 是DOM中的内置对象,有一个输出方法write()
    document.write("<table border='1' width='600px' height='300px'>");
    for (var i = 0; i < 5; i++) {
        document.write("<tr>");
        for (var j = 0; j < 5; j++) {
            document.write("<td align='center'>第" + (i + 1) + "行。第" + (j + 1) + "列</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
    </script>
</body>
 
</html>

效果

打印倒三角


<script type="text/javascript">
var icon = "\u263a";
for (var i = 0; i < 6; i++) {
    for (var j = 0; j < i; j++) {
        document.write("  ");
    };
    for (var j = 0; j < (6 - i); j++) {
        document.write(icon+"  ");
    };
    document.write("<br />");
};
</script>

效果

JavaScript方法的定义

定义方法的keyword：function。

方法1：

function 方法名(參数){

方法体

（有可能有返回值，有可能没有返回值）

}

演示样例


//没有參数没有返回值
function _myfunction() {
    alert("hello world");
}
//调用方式 
_myfunction();
 
//没有參数。有返回值
function _myfunction() {
    return "hello world";
}
//调用方式
alert(_myfunction());
 
//有參数，没有返回值
function _myfunction(str) {
    alert(str);
}
//调用方式
_myfunction("hello World");
 
//有參数和返回值
function _myfunction(str) {
    return ("hello javascript " + str);
}
//调用方式
alert(_myfunction("test"));

方法2：

var 方法名 = function(參数){

方法体

（可能有返回值，也可能没有）

}

演示样例


var _myfunc = function() {
    alert("hello second defined function ");
}



//调用方式
_myfunc();
alert(_myfunc); // 把等号后面的内容当成变量的值输出
alert(_myfunc()); // 先执行方法体，然后输出undefined

方法3（不经常使用）：

var 方法名 = new Function(參数1, 參数2, 參数n, 方法体内容);

演示样例


var _mytest = new Function("a", "b", "return a+b;");



//调用方式
alert(_mytest(1, 2));

JavaScript全局方法

1. isNaN

当不是数字时返回true，是数字时返回false。


var a = "test";
alert(isNaN(a)); // true

2. parseInt，parseFloat

对字符串进行解析。parseInt解析成整数，假设是整数则正常解析，假设是浮点数则返回整数部分，假设不是数字返回NaN。

parseFloat解析成浮点数，假设是浮点数则正常解析，假设不是一个数字则返回NaN。

演示样例


var s = "1";
alert(parseInt(s)+1); // 2
var t = "s";
alert(parseInt(t)); // NaN
var u = 3.1415926;
alert(parseInt(u)); // 3
 
var a = "3.1415926";
alert(parseFloat(a)); // 3.1415926
var b = "test";
alert(parseFloat(b)); // NaN

3. eval

将eval的參数当成js代码来运行。


eval("alert(1+2)"); // 3

4. escape和unescape

对字符串进行编码和解码。这样就能够在全部的计算机上读取该字符串而不受平台影响。


var v1 = "      test";
var v2 = "你好";
alert(escape(v1)); // "%20%20%20%20%20%20test"
alert(escape(v2)); // "%u4F60%u597D"
 
var v3 = "%20%20%20%20%20%20test";
var v4 = "%u4F60%u597D";
alert(unescape(v3)); // "      test"
alert(unescape(v4)); // "你好"

5. encodeURI和decodeURI

把字符串作为 URI 进行编码和解码。


var uri = "      test你好";
document.write(encodeURI(uri)); // "%20%20%20%20%20%20test%E4%BD%A0%E5%A5%BD"
var _uri = "%20%20%20%20%20%20test%E4%BD%A0%E5%A5%BD";
document.write(decodeURI(_uri)); // "      test你好"

JavaScript经常使用对象

1. Array

数组定义能够不指定数组长度，数组中的数据类型能够随意并混合。
初始化数组的方法比較自由。
方法较多。详细查阅文档。


var arr = new Array(); // 创建数组
arr[0] = "a";
arr[1] = 3;
arr[15] = 5;
alert(arr[14]); // undefined
 
var arr1 = new Array(5); // 初始化一个数组，长度为5
var arr2 = new Array(1, 2, 3, 4); // 初始化一个数组长度为4。并初始化了元素
var arr3 = [5]; // 初始化一个数组长度为1，并初始化了元素

经常用法

按指定分隔符转化为字符串

join()
向数组末尾加入和删除元素

push()

pop()
对数组进行字典排序

sort()

2. String

能够对基本数据类型String类型变量使用String对象方法。

经常用法（多数与Java类似）

字符串截取

subString(a, b)：从a截取到b，含头不含尾。

subStr(a, b)：从a開始截取b个字符。
方法较多。详细查阅文档。

演示样例


var s = "hello-world";
var s1 = s.substring(2,5);
document.write(s1+"<br />"); // "llo"
var s2 = s.substr(2,5);
document.write(s2+"<br />"); // "llo-w"

3. Date

与Java类似。

方法较多。详细查阅文档。


var mydate = new Date();
alert(mydate.getDate()); // 日：15
alert(mydate.getMonth()); // 月1：0
alert(mydate.getDay()); // 星期四：4

4. Math

与Java类似。

方法较多，详细查阅文档。


var t = Math.random(); // 返回的是0-1之间的随机数
var f = Math.floor(-5.9999); // 下舍入：-6
var s = Math.round(-3.5); // 四舍五入：-3

5. RegExp

5.1 正則表達式对象的建立

使用new创建对象：var _reg = new RegExp("正則表達式");
直接使用正則表達式创建对象：var _reg = /^正則表達式/，注意：不能够有双引號。

5.2 正則表達式的使用

test()方法用于匹配正則表達式。方法较多。详细查阅文档。


<script type="text/javascript">
function _check() {
    var _reg = /^[0-9]{11}/;
    var _tel = document.getElementsByName("tel")[0].value;
    if (_reg.test(_tel)) {
        alert("是一个电话号码");
    } else {
        alert("不是一个电话号码");
    }
}
</script>
电话号码：
<input type="text" name="tel" />
<br/>
<input type="button" value="检查是否是电话号码" onclick="_check()" />

ECMA

[学习笔记]JavaScript基础

JavaScript概述

1. JavaScript定义

2. JavaScript的发展历程

3. JavaScript的特点

JavaScript的语言组成

JavaScript和HTML的结合方式

方法1：

方法2：

方法3：

注意：

JavaScript的基本的语法

1. 凝视

2. 变量定义

3. 变量类型

4. 弱类型转换

5. 运算符

6. 流程控制

6.1 条件

6.2 循环

6.3 多重选择

6.4 案例

动态打印表格

打印倒三角

JavaScript方法的定义

方法1：

方法2：

方法3（不经常使用）：

JavaScript全局方法

1. isNaN

2. parseInt，parseFloat

3. eval

4. escape和unescape

5. encodeURI和decodeURI

JavaScript经常使用对象

1. Array

2. String

3. Date

4. Math

5. RegExp

5.1 正則表達式对象的建立

5.2 正則表達式的使用