12.javascript中的对象、属性、方法/函数
对象、属性、方法基本和java的中的理解保存一致.
特别的对javascript中的方法/函数稍作说明:
12.1 形式
//无参的
function test1(){
}
//有参的
function test2(name){
}
//多个参数的
function test3(v1,v2){
alert(v1+v2);
}
//有返回值的
function test4(v1,v2){
return v1+v2;
}
//匿名函数 在上面自定义对象的例子中有使用过
function(){
//....
} 12.2 位置
定义在<script>标签中或者是外部的.js文件中
注意:定义函数并不是执行函数
12.3 调用
在<script>标签中调用定义的函数
例如:可以先调用后定义
<script type="text/javascript">
test();
function test(){
alert("hello world");
}
test();
</script> 在html元素的事件属性中调用定义过的函数
例如:可以先调用后定义
<script type="text/javascript">
function test(){
alert("hello world");
}
</script>
<input type="button" value="点击" onclick="test()" />例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//方法
//语法 function method_name(args...){}
//方法不会自己执行，方法都要手动调用
//或者基于事件调用
//注意：有多个同名的函数的时候
//js只会调用到最后一个函数，和函数中的参数无关
//test();
function test(){
document.write("test......");
/* console.log("test......."); */
}
function test(msg){
document.write("test......"+msg);
/* console.log("test......."+msg); */
}
function test2(v,v1){
document.write(v+"---"+v1);
}
//有返回值的函数只要加return语句
function test3(a,b){
return a+b;
}
var add=test3(12,23);
document.write(add);
//test();
</script>
</head>
<body>
<!-- 事件触发方法 -->
<input type="button" onclick="test2()" value="提交"/>
<p onclick="test()">这是段落</p><br>
<div onclick="test()">test</div>
</body>
</html>13.javascript中的局部变量和全局变量
13.1局部变量:
在 JavaScript 函数内部声明的变量（*使用 var *）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，局部变量就会被删除。
13.2全局变量:
在函数外声明的变量是全局变量，网页上的
所有脚本和函数都能访问它。
注意:全局变量都默认是window对象的属性
,所以一个全局变量name也可以用
window.name来访问,方法window的属性的
是都可以省去window不写,直接写属性名字
就可以了.window的方法也是同样的.
window是javascript中的一个内置对
象可以直接使用表示浏览器窗口
13.3变量的声明周期:
javaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
13.4向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
name="tom";
将声明一个全局变量 name，即使它在函数内执行。
例如: 注意 全局变量会在页面关闭后被删除。
<script type="text/javascript">
function test(){
var name = "tom";
}
function test1(){
alert(name);
}
test();
test1();
</script>例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//变量（全局变量和局部变量）
//局部变量：定义在函数（方法）内部的变量
//作用范围：只在函数（方法）内部使用，函数执行完成变量也就销毁
//注意：局部变量赋值但是没有声明的，自动转换为全局变量。例：age=44;
function test(){
//局部变量
var age=33;
age=44;
document.write(age+"*****");
}
//ReferenceError: age is not defined
/* document.write(age+"^^^^^^"); */
//全局变量：在函数外部定义的变量
//作用范围：整个页面script脚本中
//页面关闭的时候变量销毁
//全局变量
var age=55;
test();
document.write(age+"^^^^^^");
</script>
</head>
<body>
<script type="text/javascript">
document.write(age+"&&&&&&")
</script>
</body>
</html>14.javascript中的运算符
14.1 算术运算符
+ 加法
- 减法
* 乘法
/ 除法
% 取模
++ 自增
-- 自减14.2 赋值运算符
给定 x=10 和 y=5
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=014.3字符串的 + 运算符
连接多个字符串:
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;14.4字符串和数字进行加法运算
例如:
x=5+5;
y="5"+5;
z="Hello"+5;
x,y, 和 z 输出结果为:
10 数字类型
55 字符串类型
Hello5 字符串类型15.javascript中的比较
15.1 比较运算符
对于给的变量x=5:
== 等于
x==8 false
x==5 true
x=="5" true
=== 绝对等于/恒等于 (值和类型均相等)
x==="5" false
x===5 true
!= 不等于
x!=8 true
!== 绝对不等于 (值和类型均不相等)
x!=="5" true
x!==5 false
> 大于
x>8 false
< 小于
x<8 true
>= 大于或等于
x>=8 false
<= 小于或等于
x<=8 true15.2 逻辑运算符
对于给的变量 x=6 以及 y=3:
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true注意:& |运算结果是0或者1
15.3 条件运算符
java中的三目运算符:
var msg =(age<18)?"年龄太小":"年龄已达到";
16.条件语句
16.1 if语句
if (condition){
// 当条件为 true 时执行的代码
}
-----------------------------------
if (condition){
//当条件为 true 时执行的代码
}
else{
//当条件不为 true 时执行的代码
}
-----------------------------------
if (condition1){
//当条件 1 为 true 时执行的代码
}
else if (condition2){
//当条件 2 为 true 时执行的代码
}
else {
//当条件 1 和 条件 2 都不为 true 时执行的代码
}16.2 switch语句
例如:
var day=new Date().getDay();
var x = "";
switch (day){
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
default:
x="error!!!";
} 17.循环
17.1 for循环
for (var i=0; i<5; i++){
document.write("hello world");
}
-----------------------------
for (i=0; i<5; i++){
document.write("hello world");
} 注意:千万不要写成了for(int i=0;...)
17.2 for-in循环
var person={fname:"John",lname:"Doe",age:25};
for (x in person){
alert(x+":"+person[x]);
}
-------------------------------------
var arr = [1,3,4,5];
for(x in arr){
alert(x+" : "+arr[x]);
}17.3 while循环 do-while循环
var i=0;
while (i<5){
document.write("hello world");
i++;
}
------------------------------
var i=0;
do{
document.write("hello world");
i++;
}while(i<6);
18. javascript中break 、continue 、标签用法和java中的一样.
break可以跳出当前标记代码块:
test1:{
test2{
document.write("hello world");
document.write("hello world");
document.write("hello world");
break test1;
}
document.write("hello world");
document.write("hello world");
document.write("hello world");
}
19.javascript中的错误
19.1 try-catch
try{
alert1("test");
alert("hello");
}
catch(err){
alert(err);
}注意:如果是语法错误SyntaxError,catch就捕获不到
19.2 throw
try{
var x = 3;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err){
alert(err);
}例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* var str="test"+"hello";
var str1="test"+1;
var num=1+1;
var n="tom"+true;
document.write(str+"<br>");
document.write(str1+"<br>");
document.write(num+"<br>");
document.write(n+"<br>"); */
//比较运算符
//==：只比较值的大小，不比较类型
/* var n=5;
document.write((n==5)+"<br>");//true
document.write((n=="5")+"<br>");//true
document.write((n==4)+"<br>");//false */
//===：既比较值的大小还比较类型
/* var n=5;
document.write((n===5)+"<br>");//true
document.write((n==="5")+"<br>");//false
document.write((n===4)+"<br>");//false */
//!=：看值的大小，不关注类型
/* var n=5;
document.write((n!=5)+"<br>");//false
document.write((n!="5")+"<br>");//false
document.write((n!=4)+"<br>");//true */
//!==：看值的同时，还要看类型
/* var n=5;
document.write((n!==5)+"<br>");//false
document.write((n!=="5")+"<br>");//true
document.write((n!==4)+"<br>");//true */
//&&:并且(and)
//T&&T=T T&&F=F F&&T=F F&&F=F
//document.write((3<10&&3>4)+"<br>");//false
//||:或(or)
//T||T=T T||F=T F||T=T F||F=F
//document.write((3<10||3>4)+"<br>");//true
//& 并且 得到的结果是0或1
//T&T=1 T&F=0 F&T=0 F&F=0
//document.write((3<10&3>4)+"<br>");//0
//| 或 得到的结果是0或1
//T|T=1 T|F=1 F|T=1 F|F=0
//document.write((3<10|3>4)+"<br>");//1
//三目运算
/* var name=prompt("请输入名字:");
var ms=(name=="tom")?"欢迎":"拒绝";
document.write(ms); */
//if语句
/* var name=prompt("请输入名字:");
if(name=="tom"){
document.write("欢迎");
}else if(name=="jake"){
document.write("拒绝");
}else{
document.write("稍等");
} */
//switch语句
/* var name=prompt("请输入星期:");
document.write(typeof(name));
//js中将字符串转化为数字类型
var na=parseInt(name);
switch (na) {
case 1:
document.write("星期天");
break;
case 2:
document.write("星期一");
break;
case 3:
document.write("星期二");
break;
case 4:
document.write("星期三");
break;
case 5:
document.write("星期四");
break;
case 6:
document.write("星期五");
break;
default:
document.write("星期六");
break;
} */
//for循环
/* for( i=0;i<10;i++){ */
/* for(var i=0;i<10;i++){
document.write(i+"<br>");
} */
//for-in循环：主要遍历数组和js对象
/* var arr=["test",33,true,new Date()];
//其他全用und修饰
arr[100]='huzl';
for(i in arr){
document.write(i+"---"+arr[i]+"<br>");
} */
/* for(var i in arr){
document.write(i+"---"+arr[i]+"<br>");
} */
/* var person={
name:"tom",
age:33,
gender:true,
say:function(msg){
document.write("test......"+msg);
}};
for(i in person){
//i指的是属性的名字和方法的名字
document.write(i+"---"+person[i]+"<br>");
} */
//while循环
/* var sum=0;
var i=0;
while(i<=100){
sum+=i;
i++;
}
document.write(sum+"<br>"); */
//do while循环
/* var sum=0;
var i=0;
do {
sum+=i;
i++;
} while (i<=100);
document.write(sum+"<br>"); */
//break & continue
/* for(var i=0;i<10;i++){
if(i==5){
//break;
continue;
}
document.write(i+"<br>");
} */
//break 跳出代码块（必须指明跳出那个代码块）
/* test1:{
document.write("test<br>");
document.write("test1<br>");
document.write("test2<br>");
test2:{
document.write("tom1<br>");
document.write("tom2<br>");
break test1;
document.write("tom3<br>");
}
document.write("briup<br>");
document.write("briup1<br>");
} */
//try-catch
//catch中的参数异常内容，名字随便起
//注意：try-catch不能捕获语法错误
/* try {
//int num=10;
document.write("test....");
// TypeError: document.writ is not a function
// document.writ("test....");
window.alert1(1111);
} catch (e) {
alert(e);
}
function alert1(msg){
document.write("test...."+msg);
} */
//isNaN()：判断一个值是不是一个数字
/* var name=prompt("请输入一个数字:");
var b=isNaN(name);
//false不是 不是一个数字-》是数字
//true是 不是一个数字-》不是数字
document.write(b);//12 false */
/* var name=prompt("请输入一个数:");
try {
if(name==5)throw"不能为5";
if(isNaN(name))throw"必须为一个数字";
document.write("test.....ok");
} catch (e) {
alert(e);
} */
function test(){
//跳转到一个新的资源
//让浏览器重新加载一个新的资源
window.location.href="test5.html";
}
</script>
</head>
<body>
<!-- <a href="test5.html">点击</a> -->
<!-- <a href="javascript:void(0)">点击</a> -->
<!-- <a href="javascript:void(0)" onclick="test()">点击</a>
<div onclick="test()">divtest</div> -->
<div>test1</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div id="dd">test2</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div><a name="tt">test3</a></div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<a href="#">回到顶部</a>
<a href="#dd">回到test2</a>
<a href="#tt">回到test3</a>
</body>
</html>20.void关键字
javascript:void(0) 是我们经常在超链接中用到的代码.
href="#"与href="javascript:void(0)"的区别:
# 包含了一个位置信息，默认的锚是#top
也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
<a href="javascript:void(0);">
点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
