前言
学习web，当然不能少了万能的javaScript，由于之前接触过javaScript基础语法，那么这次刚好派上用场了，就是感叹 “书到用时方恨少”，脚踏实地慢慢学咯，这里简单总结记录下这几天复习的js语法和demo，时时记，才能不至于忘得太快~~~
Ⅰ.简述
1.javaScript的特点：
- 安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。
- 跨平台性。（只要是可以解释Js的浏览器都可以执行，和平台无关。）
2.js(javaScript的简称)和java的不同点：
- JS是Netscape公司的产品，Java是Sun公司的产品
- JS是基于对象，Java是面向对象。
- JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
- JS是弱类型，Java是强类型。
3.js由3部分组成：
- ECMAScript
- Bom(全称Browser Object Model浏览器对象模型)
- Dom(全称Document Object Model文档对象模型)
4.ECMASCRIPT 中有5种基本数据类型:：
- Undefined
- null
- Boolean
- Number
- String
5.类型总结：
5种基本数据类型:Undefined, null,Boolean,Number和String
所有的数值都是number类型，字符和字符串都是string类型
布尔是boolean类型，如果一个变量未定义，那么类型是undefined
6.js引入方式和位置：
向HTML页面插入JavaScript的主要方法
- JS代码存放在标签对中。
- 使用script标签的src属性引入一个js文件。（方便后期维护，扩展）例：
7.区分大小写：
与 Java 一样，变量、函数名、运算符以及其他一切东西都是区分大小写的
8.变量：
变量是弱类型的，与 Java不同，ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值。
9.变量使用细节：
- var关键字在定义变量的时候可以省略不写
- 变量名可以重复，后面的将覆盖前面的变量
- 变量的类型取决于值的类型
10.运算符：
加法运算符的注意点
- ECMAScript 中的加法也有一些特殊行为：某个运算数是 NaN，那么结果为 NaN；
- 如果两个运算数都是字符串，把第二个字符串连接到第一个上。如果只有一个运算数是字符串，把另一个运算数转换成字符串，结果是两个字符串连接成的字符串。
乘/除法运算符基本和java语言中的相同
比较运算符的注意点
- 两个字符串进行比较，会转化为字符之后进行比较；
- 一个数字和一个字符串进行比较，字符串会转换成数字，再比较。
逻辑运算符基本和java语言中的相同
赋值运算符基本和java语言中的相同
乘法/赋值（*=） 除法/赋值（/=） 取模/赋值（%=） 加法/赋值（+=） 减法/赋值（-=）三目运算符基本和java语言中的相同
Ⅱ.练习
注释：下面的每个demo都可以拷贝在文本然后运行，运行方式也是很简单的，那么效果图就懒得贴了,下面的注释说明也非常详细.
1.先来个for练习，同样的需求，C和java都实现过了，那么用js来实现下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javaScript for 练习</title>
</head>
<body>
<script type="text/javascript">
//输出一个6行6列的的 *正方形
for(var i=0 ;i<6 ;i++){
for(var j=0 ; j<6 ;j++){
document.write(" * ");
}
document.write("<br/>");
}
document.write("<hr/>");
//输出 *三角钱
for(var i=1 ; i<6 ; i++){
for(var j=0 ; j<i ; j++){
document.write(" * ");
}
document.write("<br/>");
}
document.write("<hr/>");
//输出九九乘法表
for(var i=1 ; i<=9 ; i++){
for(var j=1 ; j<=i ; j++){
document.write(j + "*" + i + "=" + j*i + " ");
}
window.document.write("<br/>");
}
</script>
</body>
</html>
2.需求：移动到小图片区域内，旁边出现大图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 事件监听</title>
</head>
<body>
<!--小图片-->
<img src="img/small.png" width="80" id="wlh"/>
<br/>
<!--大图片，默认距离左边80px,默认不显示的-->
<img src="img/big.png" width="400" style="margin-left: 80px;display: none;" id="big"/>
</body>
<script type="text/javascript">
function myPic(){
var small = document.getElementById("wlh"); //查找小图片
var big = document.getElementById("big"); //查找大图片
small.onmouseenter = display; //鼠标进入图片区域的事件
// small.onmousemove = display; //鼠标在图片区域内移动的事件
small.onmouseleave = nodisplay; //鼠标离开图片区域的事件
}
function display(){ //函数功能：让图片显示
big.style.display = "block";
}
function nodisplay(){ //函数功能：让图片隐藏
big.style.display = "none";
}
//窗体加载完毕后执行该函数
window.onload = myPic();
</script>
</html>
3.引用类型String:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 引用类型String体验</title>
</head>
<body>
<script type="text/javascript">
/* var a = "abc";
document.write(typeof a + "<br/>"); //string
var b = new String("abc");
document.write(typeof b + "<br/>"); //object*/
//-------------------------------------------------------------------------------------------------------
//获取构造函数
var a = "wyk";
document.write(a.constructor + "<br/>"); //输出：function String() { [native code] }
document.write(typeof a.constructor); //输出：function
document.write("<hr/>");
//-------------------------------------------------------------------------------------------------------
//通过构造函数创建String对象
var a = new String("jack");
var b = new String("jack");
document.write(a + "," + b + "<br/>"); //jack,jack
document.write(a==b); //false
document.write("<br/>");
document.write(a.valueOf() == b.valueOf()); //true
document.write("<br/>");
document.write("<hr/>");
//-------------------------------------------------------------------------------------------------------
//练习属性
var c = "Hello World";
document.write(c.length + "<br/>"); //输出： 11
document.write("第五章".anchor("ch1") + "<br/>"); // 第五章
document.write("第五章".blink() + "<br/>"); //第五章
// 返回在指定位置的字符。
document.write("第五章".charAt(0) + "<br/>"); //第
document.write("abc".charCodeAt(0) + "<br/>") //97
document.write("第五章".concat("abcde") + "<br/>"); //第五章abcde
document.write("第五章".fontcolor("#ff0000") + "<br/>"); //字体变为红色
document.write("第五章".indexOf("五") + "<br/>"); // 1
document.write("第五章".italics() + "<br/>"); //斜体
document.write("第五章".link("http://www.baidu.com") + "<br/>"); //下划线，点击可以链接到其他网页
document.write("helloworld".replace(/l/g,"L") + "<br/>"); //将l 换位L ，木有写g，表示第一个换而已
//-------------------------------------------------------------------------------------------------------
document.write("<hr/>");
var names = "jack - lin - zhong".split("-");
for(var temp in names) {
document.write(names[temp] + "<br/>"); //这里的temp 应该是索引
}
document.write("helloworld".substr(1,2) + "<br/>"); //el
document.write("helloworld".substring(1,2) + "<br/>"); //e
document.write("helloworld".toUpperCase() + "<br/>"); //HELLOWORLD
document.write(new String("java").toString() + "<br/>"); //java
document.write(new String("java").toString() == new String("java").toString()); //true
document.write("<br/>")
document.write(new String("java") == new String("java")); //false
document.write("<br/>")
document.write("abc" == "abc"); //true
</script>
</body>
</html>
4.引用类型Number:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 引用类型Number体验</title>
</head>
<body>
<script type="text/javascript">
var a = 12;
var b = new Number(12);
document.write(a +"," + b + "<br/>"); //12,12
document.write(a == b); //true
document.write("<br/>");
document.write(a === b ); //false
document.write("<br/>");
document.write(new Number(12) == new Number(12)); //false
document.write("<br/>");
document.write(new Number(12) === new Number(12)); //false
document.write("<br/>");
document.write(new Number(12).valueOf() == new Number(12).valueOf()); //true
document.write("<br/>");
document.write(new Number(12).valueOf() === new Number(12).valueOf()); //true
document.write("<hr/>");
//-------------------------------------------------------------------------------------------------------
document.write("Number的最大值：" + Number.MAX_VALUE + "<br/>");
document.write("Number的最小值：" + Number.MIN_VALUE + "<br/>");
document.write(new Number(12).toString(10) + "<br/>"); //12 ,10进制
document.write(new Number(12).toString(2) + "<br/>"); //1100 ，2进制
document.write(new Number(12).toString(8) + "<br/>"); //14 ，8进制
document.write(new Number(12).toString(16) + "<br/>"); //c ，16进制
document.write("<br/>");
document.write(new Number(12.12345) + "<br/>");
document.write(new Number(12.12345).toFixed() + "<br/>"); //默认没有小数，即= 12
document.write(new Number(12.12345).toFixed(2)+ "<br/>"); //留下两个小数位
document.write(new Number(12.12345).toFixed(3) + "<br/>"); //留下三个小数位
</script>
</body>
</html>
5.引用类型Boolean:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 引用类型Boolean体验</title>
</head>
<body>
<script>
var a = new Boolean(false);
document.write("a.constructor===== " + a.constructor + "<br/>"); //输出： function Boolean() { [native code] }
document.write("a.toString ====" + a.toString() + "<br/>"); //输出 ： a.toString ====false
document.write("a.valueOf ====" + a.valueOf() + "<br/>"); //输入: a.valueOf ====false
if(a.valueOf()){
document.write("条件成立<br/>");
}else{
document.write("条件不成立<br/>");
}
</script>
</body>
</html>
6.Math类:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js Math类体验</title>
</head>
<body>
<script type="text/javascript">
document.write(Math.ceil(12.34) + "<br/>"); //13 最大的整数
document.write(Math.ceil(12.01) + "<br/>"); //13 最大的整数
document.write(Math.floor(12.34) + "<br/>"); //12 最小的整数
document.write(Math.floor(12.01) + "<br/>"); //12 最小的整数
document.write(Math.round(12.54) + "<br/>"); //13 四舍五入
document.write(Math.round(12.35) + "<br/>"); //12 四舍五入
document.write(Math.random() + "<br/>"); //0~1 随机数
document.write(Math.max(12, 100, -1, 200, 320, 500) + "</br>"); //500 求最大数
document.write(Math.min(12, 100, -1, 200, 320, 500) + "</br>"); //-1 求最小数
</script>
</body>
</html>
7.Date类体验:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js Date类体验</title>
</head>
<body>
<span id="myDate"></span>
</body>
<script type="text/javascript">
//---------------------------------- window.setTimeout() 的练习--------------------------------------
/* function showDate(){
var date = new Date();
var str = date.getFullYear() + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日,星期" + date.getDay() + " "+
date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒" ;
var span = document.getElementById("myDate"); //找寻span标签
span.innerHTML = str.fontcolor("red"); //给Span标签设置标签体内容
window.setTimeout("showDate()",1000); //延时一秒钟之后执行
}
showDate(); //调用函数*/
//---------------------------------- window.setInterval() 的练习---------------------------------------
var span1 = document.getElementById("myDate");
function showDate01(){
var nowDate = new Date(); //获取系统时间，即本机时间
var str1 = nowDate.getFullYear() + "年" + (nowDate.getMonth()+1) + "月" + nowDate.getDate()
+ "日,星期" + nowDate.getDay() + " "+
nowDate.getHours() + "时" + nowDate.getMinutes() + "分" + nowDate.getSeconds() + "秒" ;
span1.innerHTML = str1.fontcolor("blue");
}
function startDate(){
//之所以在这里先调用showDate01，是因为刚开始时setInterval会延长一秒，导致界面出现一秒钟的空白
showDate01();
window.setInterval("showDate01()",1000); //每经过指定毫秒值执行指定的代码
}
startDate();
</script>
</html>
8.数组体验:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 数组体验</title>
</head>
<body>
</body>
<script type="text/javascript">
var arrs = ["aa","bb","ccc"];
document.write(arrs + "<br/>"); //aa,bb,ccc
for(var i in arrs){
document.write(arrs[i] + "<br/>"); //aa bb ccc
}
document.write("<hr/>");
for(var j=0;j<arrs.length;j++){
document.write(arrs[j] + "<br/>"); //aa bb ccc
}
document.write("<hr/>");
arrs[0] = "www";
arrs[2] = "kkkkkk";
arrs[5] = "111111"; //可变长的，会将数组里的元素有三个变为6个
for(var j=0;j<arrs.length;j++){
document.write(arrs[j] + "<br/>"); //aa bb ccc
}
document.write("<hr/>");
var arrss = new Array(20);
for(var a=0;a<arrss.length;a++){
document.write(arrss[a] + "<br/>"); //都是 undefined
}
document.write("<hr/>");
var arrsss = new Array("Hello World");
document.write("----arr length---->" + arrsss.length + "<br/>");
for(var s=0;s<arrsss.length;s++){
document.write(arrsss[s] + "<br/>"); //都是 undefined
}
document.write("<hr/>");
var arr = new Array();
arr[0] = "aa";
arr[1] = "bb";
arr[6] = 'xx';
document.write(arr + "<br/>");
//遍历数组
for (var i = 0; i < arr.length; i++) {
document.write(arr[i]+"<br/>");
}
//下标越界时：
var arr = ["aa", "bb"];
document.write(arr[200]);
// 显示undefined
/**
* 上面输出结果：
* aa,bb,,,,,xx
*
aa
bb
undefined
undefined
undefined
undefined
xx
undefined
*/
document.write("<hr/>");
var sortArr = new Array("hello","b","world","none","a");
document.write("sort toString ====" + sortArr + "<br/>");
sortArr.sort();
document.write("sort toString ====" + sortArr + "<br/>"); // a,b,hello,none,world
document.write("<hr/>");
var a =["a","b","c"];
document.write(a + "<br/>"); //a,b,c
document.write(typeof a + "<br/>"); //object
document.write(a.concat([100,200]) + "<br/>"); //a,b,c,100,200
var strings = a.concat([100,200],[500,5]);
document.write(typeof strings + "<br/>"); //object
var b = a.join("$");
document.write(b + "<br/>"); //a$b$c
document.write(typeof b + "<br/>"); //string
// document.write(a.pop() + "<br/>"); //c,将最后一个元素c 从数组中删除
document.write(a.push(100,154) + "<br/>"); //5，返回添加之后的数组的长度
document.write(a + "<br/>"); // a,b,c,100,154
document.write(a.toString() + "<br/>"); //a,b,c,100,154
document.write(typeof a + "<br/>"); //object
var c = a.valueOf();
document.write(typeof c + "<br/>"); //object
var sortaaaa = ["d","da","a","c","1"];
/* sortaaaa.sort(); 输出： 1,a,c,d,da
document.write(sortaaaa + "<br/>");*/
sortaaaa.sort(compareTo);
document.write(sortaaaa + "<br/>");
function compareTo(a, b){
return a - b;
}
</script>
</html>
9.自定义对象:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 自定义对象体验</title>
</head>
<body>
</body>
<script type="text/javascript">
/*
//-----------------------------Object 方式-------------------------------------------------
var person = new Object();
person.name = "wyk";
person.age = 18;
person.sayHello = function () {
document.write(this.name + "," + this.age + "<br/>");
}
person.sayHello();
//-----------------------------------------------------------------------
document.write("<br/>");
var student = new Object();
student.name = "lxf";
student.age = 16;
student.gan = "girl";
// document.write(student.toString() + "<br/>"); //[object Object]
student.sayDetail = function () {
document.write(this.name + "," + this.age + "," + this.gan);
}
student.sayDetail();
*/
//--------------------------------------自定义无参构造函数对象---------------------------
function Person(){
//window.document.write("constructor<br/>");
}
var person = new Person();
person.name = "gg";
person.age = 17;
person.gan = "super man";
person.work = function () {
window.document.write(this.name +","+ this.age +"," + this.gan);
}
window.document.write(person.constructor + "<br/>");
window.document.write(person.name +","+ person.age +"," + person.gan + "<br/>");
person.work();
//--------------------------------------自定义有参构造函数对象------------------------------
document.write("<hr/>");
function Student(name,age){
this.name = name;
this.age = age;
this.study = function () {
window.document.write(this.name + ":" + this.age);
}
}
var student = new Student("yyyyy",78);
student.study();
//--------------------------------------json方式定义对象----------------------------------
document.write("<hr/>");
var teacher = {
name:"小王",
age:28,
classtify:"数学",
teach: function () {
window.document.write(this.name + "," + this.age + "," + this.classtify);
},
play:function(){
window.document.write("play play....<br/>");
}
};
document.write(teacher.constructor + "<br/>"); //function Object() { [native code] }
teacher.play();
teacher.teach(); //小王,28,数学
</script>
</html>