JavaScript相关-基础语法,常用对象和简单事件

1,与 Java 一样,变量、函数名、运算符以及其他一切东西都是区分大小写的。

2,对于js而言,是没有数据类型的,全部都是通过var来完成变量的创建。

1 var a = 19;
2 alert(a);
3 a = "hello";
4 alert(a);

3,变量的作用域

当在函数内部没有使用var来声明变量的时候,这个变量就会作为全局变量声明。所以一定注意,在函数中定义变量一定要使用var。

4,变量的类型,常用的类型有:Number,String,Array,Date

1 var a = 10.6;
2 alert(typeof a);

java进行强制类型转换是(Number)a,而js是通过Number(a)

alert(Number(a)+1);

如果强制转换一个非数字的值为Number会得到一个NaN的值。

使用parseInt可以将字符串开头的几个数字转换为int,但是如果开头不是数字,那就得到NaN

1 var b = "12px";
2 alert(parseInt(b));

对于数组等对象而言,显示的结果就是object不会显示Array

//判断as是否是Array的实例,如果是返回true

1 var as = ["a","b",1,2,3];
2 alert(typeof as);

alert(as instanceof Array);

布尔类型:true和false,在js中,非0就是true,特别注意:NaN是false
当一个变量没有定义值的时候,是undefined类型,undefined类型是false
特别注意:在js中除了NaN,undefined,0这三个数是false外其余皆是true

1 var size;        
2 alert(!!size);

 5,对象的创建

 1 //可以使用function来模拟java的类
 2 function Person(name,age) {
 3     //定义了一个Person的属性为name
 4     this.name = name;
 5     //定义了Person的属性为age
 6     this.age = age;
 7     this.address = "Harbin";
 8     //如果没有用this声明,这个变量就仅仅只是一个局部变量,不是类的属性
 9     var x = 10;
10     //创建了一个行为,匿名函数 (占用内存)
11     this.say = function() {
12         alert(this.name+","+this.age);
13     }
14 }
15 var p1 = new Person("张三",22);
16 alert(p1.name+","+p1.address);
17 alert(typeof p1);
18 alert(p1 instanceof Person);

遍历p1属性,可以用for in。

1 for(var a in p1){
2     alert(a+":"+p1[a]);
3 }

6,常用对象

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

Date:对于js而言,月的下标是从0开始的。

1 var d = new Date();
2 document.write(d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+"星期"+d.getDay());

String:不存在java中的equals方法。内容相等就相等。

1 var str1 = new String("abc");
2 var str2 = "abc";
3 alert(str1==str2);

  concat() 连接字符串。

1 var str1="Hello "
2 var str2="world!"
3 document.write(str1.concat(str2))

  slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。

1 var str="Hello happy world!"
2 document.write(str.slice(6))
3 document.write(str.slice(6,11))

输出:happy world!

    happy

String 对象的方法 slice()、substring() 和 substr() (不建议使用)都可返回字符串的指定部分。slice() 比 substring() 要灵活一些,因为它允许使用负数作为参数。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。

  substr(start,length)  包含从 stringObject 的 start(包括 start 所指的字符) 处开始的 length 个字符。如果没有指定 length,那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

1 var str="Hello world!"
2 document.write(str.substr(3))

输出:lo world!

  substring(start,stop) 其内容是从 start 处到 stop-1 处的所有字符,包括开头不包括结尾。

1 var str="Hello world!"
2 document.write(str.substring(3,7))

输出: lo w

Array:js的array就是java中的list和stack的集合。定义数组:

1 var as = new Array();
2 as.push(11);
3 as.push(22);
4 alert(as);
1 as = new Array(11,22,33,44,55,66,77,"111","222",23);
2 alert(as);

一般使用以下方式定义数组

as = ["11",12,1,2,3];

  sort() 对数组的元素进行排序。

  reverse() 颠倒数组中元素的顺序。

  pop() 删除并返回数组的最后一个元素。

  valueOf() 返回数组对象的原始值。

  splice() 删除元素,并向数组添加新元素。

 1 var arr = new Array(6)
 2 arr[0] = "George"
 3 arr[1] = "John"
 4 arr[2] = "Thomas"
 5 arr[3] = "James"
 6 arr[4] = "Adrew"
 7 arr[5] = "Martin"
 8 
 9 document.write(arr + "<br />")
10 arr.splice(2,0,"William")
11 document.write(arr + "<br />")

输出:

George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

二,简单事件

1,onclick事件

1 function clickE(obj){
2     alert(obj.innerHTML);
3 }
4 
5 <div onclick="clickE(this)" style="color:red; cursor:pointer">点击了试一下</div>

2,鼠标移动事件onmouseover 和 onmouseout 

设置这个对象的颜色,在js中设置文本的样式均通过xx.style.样式名称。当使用代码来设置样式的时候,如果在css中通过-表示的,都是有驼峰标识,font-size-->fontSize。

1 function mouseE(obj){
2      obj.style.color = "#f00";
3     obj.style.fontSize = "18px";
4 }
5 function outE(obj){
6     obj.style.color = "#000";
7 }
8 
9 <div onmouseover="mouseE(this)" onmouseout="outE(this)">鼠标移动上来试试</div>

3,计时事件setTimeout和clearTimeout

var t=setTimeout("javascript语句",毫秒)

广告可以用div,弹出框会被禁用。

1 <script type="text/javascript">
2 setTimeout("endAd()",5000);
3 function endAd(){
4     document.getElementById("ad").style.display = "none";
5 }
6 </script>
7 
8 <div id="ad">我是广告!!</div>
9 <div>body</div>

4,浏览器对象JavaScript Window

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

window.history 对象包含浏览器的历史。

  • history.back() - 与在浏览器点击后退按钮相同
  • history.forward() - 与在浏览器中点击按钮向前相同

window.open() - 打开新窗口

原文地址:https://www.cnblogs.com/dongye/p/3256476.html