JavaScript学习

1、输出

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

2、对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。

1）typeof

判断变量的数据类型，ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String，还有一种Object类型。

var sTemp = "test string";
alert (typeof sTemp);    //输出 "string"
alert (typeof 86);    //输出 "number"
var date = new Date();
alert(typeof date);//输出Object

2）toString

JavaScript 中所有对象都可以使用toString方法来转换为字符串类型。

var iNum = 10;
alert(iNum.toString()); //输出 "10"
alert(iNum.toString(2));    //转换为2进制，输出 "1010"
alert(iNum.toString(8));    //转换为8进制，输出 "12"
alert(iNum.toString(16));   //转换为16进制，输出 "A"
var date = new Date();
alert(date.toString());//输出"Wed May 02 2018 16:36:50 GMT+0800"

3）parseInt、parseFloat

变量转换为数字类型。

var iNum1 = parseInt("12345red");   //返回 12345
var iNum2 = parseInt("0xA");    //返回 10
var iNum3 = parseInt("56.9");   //返回 56
var iNum4 = parseInt("red");    //返回 NaN
var fNum1 = parseFloat("11.2");

4）Boolean、Number、String

强制转换。

var b1 = Boolean("");       //false - 空字符串
var b2 = Boolean("hello");      //true - 非空字符串
var b3 = Boolean(50);       //true - 非零数字
var b4 = Boolean(null);     //false - null
var b5 = Boolean(0);        //false - 零
var b6 = Boolean(new object()); //true - 对象
var n1 = Number(false);     //0
var n2 = Number(true);      //1
var n3 = Number(null);      //0
var n4 = Number("1.2.3");       //NaN,非数字
var s1 = String(null);      //"null"

5）运算符

//++,--与java一样，运行先后的问题
iNum++;
++iNum;

//一元加法和一元减法
var iNum = 20;
iNum = -iNum;   //输出-20

//位运算
var iResult = 25 & 3;   //and，转换为2进制数，然后相加，输出"1"
var iResult = 25 | 3;   //or，转换为2进制数，然后相减，输出"27"
var iResult = 25 ^ 3;   //or，转换为2进制数，存放的是1时，它才返回1，输出"26"

//逻辑运算
var b = true;
var bResult = (b && bUnknown);      //与java一样，左屏蔽功能，左边是false，右边不执行，所以b是true时候报错，b是false是输出false
var bResult = (true || false);

//全等号和非全等号,全等与等于就是在比较数值的基础上，等于要进行类型转换，而全等不进行类型转换
var sNum = "66";
var iNum = 66;
alert(sNum == iNum);    //输出 "true"
alert(sNum === iNum);   //输出 "false"
alert(sNum != iNum);    //输出 "false"
alert(sNum !== iNum);   //输出 "true"

//三元运算
var iMax = (iNum1 > iNum2) ? iNum1 : iNum2;

//赋值运算符，+=、*=、/=....
var iNum = 10;
iNum += 10；

6）对象冒充

//call()方法，
function sayColor(sPrefix,sSuffix) {
    alert(sPrefix + this.color + sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.call(obj, "The color is ", "a very nice color indeed.");

//apply()方法
function sayColor(sPrefix,sSuffix) {
    alert(sPrefix + this.color + sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));

3、对象操作

1）Array

var arr1 = new Array(2);
arr1[0] = "George";
arr1[1] = "John";
var arr2 = new Array();
arr2[0] = "James";

/*concat，合并两个或多个数组*/
var newArr = arr1.concat(arr2);     //数组长度3

/*join，把数组元素放入一个字符串中，不添加参数时，默认使用","连接*/
var str = newArr.join(".");     //George.John.James

/*pop，弹出数组最后一个元素*/
var name = newArr.pop();    //James

/*push，向数组最后面添加元素，并返回数组长度*/
var length = newArr.push("Kobe");       //3

/*reverse，数组反转*/
newArr.reverse();       //Kobe,John,George

/*shift，弹出数组第一个元素*/
name = newArr.shift();      //Kobe

/*slice，返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素，不改变数组本身*/
var a = newArr.slice(0,2);      //John,George

/*sort，排序，默认按字母顺序，参数必须是函数*/
newArr.sort();      //George,John

/*splice，删除元素，并在指定位置添加元素或数组*/
newArr.splice(0,1,"Kobe");      //George,John

/*unshift，向数组最前面添加元素，并返回数组长度*/
length = newArr.unshift("YaoMing");     //3

2）String

var str1 = "hello ";
var str2 = "world";

/*concat，连接字符串*/
var newStr = str1.concat(str2);

/*charAt，返回指定索引位置的字符*/
var a = newStr.charAt(2);       //l

/*indexOf，lastIndexOf，从指定位置向前或向后检索字符串*/
var index = newStr.indexOf("o", 5);     //7

/*match，参数是检索的字符串或者正则，如有匹配，返回匹配的字符串，没有匹配，返回null*/
var b = newStr.match("wors");       //null

/*replace，参数是检索的字符串或者正则，替换为第二个参数，不改变原字符串*/
newStr = newStr.replace("h", "H");      //Hello world

/*search，查找检索字符串或者正则的位置，对大小写敏感*/
var c = newStr.search("o");     //4

/*slice，截取字符串，指定位置开始，指定位置结束*/
var d = newStr.slice(0,3);      //Hel

/*split，切割*/
var arr = newStr.split(" ");        //Hello,world

/*substr，截取字符串，指定位置开始，指定个数*/
var e = newStr.substr(0,3);     //Hel

/*toLowerCase，toUpperCase，转大写小写，不改变原字符串*/
newStr = newStr.toUpperCase();

3）Function

/*编码或解码url*/
var url = "www.baidu.com?search=你好";
var enUrl = encodeURI(url);     //www.baidu.com?search=%E4%BD%A0%E5%A5%BD
var deUrl = decodeURI(enUrl);   //www.baidu.com?search=你好

/*编码或解码字符串*/
var str = "你好";
var esStr = escape(str);        //%u4F60%u597D
var unStr = unescape(esStr);        //你好

4）Events

onabort         //图像加载被中断
onblur          //元素失去焦点
onchange        //用户改变域的内容失去焦点
onclick         //鼠标点击某个对象
ondblclick      //鼠标双击某个对象
onerror         //当加载文档或图像时发生某个错误
onfocus         //元素获得焦点
onkeydown       //某个键盘的键被按下
onkeypress      //某个键盘的键被按下或按住
onkeyup         //某个键盘的键被松开
onload          //某个页面或图像被完成加载
onmousedown     //某个鼠标按键被按下
onmousemove     //鼠标被移动
onmouseout      //鼠标从某元素移开
onmouseover     //鼠标被移到某元素之上
onmouseup       //某个鼠标按键被松开
onreset         //重置按钮被点击
onresize        //窗口或框架被调整尺寸
onselect        //文本被选定
onsubmit        //提交按钮被点击
onunload        //用户退出页面