js01

/////////////////////////////////////////////////////////////js开端//////////////////////////////////////////////////////////////////////////////

------------htnl

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />


<script type="text/javascript" src="hello.js"></script>

</head>
<body>

</body>

</html>

----------js

alert("hello world");

///////////////////////////////////////////////////变量、数据类型、作用域//////////////////////////////////////////////////////////////

--------------------主意几个数据类型操作函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
//对于js而言，是没有数据类型的，全部都是通过var来完成变量的创建
/*var a = 19;
alert(a);
a = "hello";
alert(a);
*/

//变量的作用域
function fn1() {
var c = 10;
alert(c);
}

function fn2() {
//当在函数内部没有使用var来声明变量的时候，这个变量就会作为全局变量声明
//b = 10;
//所以一定注意，在函数中定义变量一定要使用var
var b = 10;
alert(b);
// alert(c);
}

function fn3() {
alert(b);
}

//变量的类型,常用的类型有:Number,String,Array,Date
var a = 10.6;
// alert(typeof a);
a = "11";
//java进行强制类型转换是(Number)a,而js是通过Number(a)
// alert(Number(a)+1);
//如果强制转换一个非数字的值为Number会得到一个NaN的值
var b = "abc";
//alert(Number(b));
b = "12px";
//使用parseInt可以将字符串开头的几个数字转换为int，但是如果开头不是数字，那就得到NaN
//alert(parseInt(b));
var as = ["a","b",1,2,3];
//对于数组等对象而言，显示的结果就是object不会显示Array
//alert(typeof as);
//判断as是否是Array的实例，如果是返回true
//alert(as instanceof Array);

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

for(var i=0;i<as.length;i++) {
alert(as[i]);
}
</script>
</head>
<body>
<input type="button" value="运行fn1" onclick="fn1()"/>
<input type="button" value="运行fn2" onclick="fn2()"/>
<input type="button" value="运行fn3" onclick="fn3()"/>
</body>
</html>

/////////////////////////////////////////////////////////简单流程控制语句。太简单在此略掉///////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////js面向对象/////////////////////////////////////////////////////////////////

---------------------------1：主意如何创建实例

---------------------------2：函数的堆栈模型以及区别 var k = fn(指向堆中的函数);var k=fn()(调用函数得到返回值);

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
// var x = function() {
// alert("x");
// }
// //此时x就是一个function函数
// x();
// function fn() {
// alert("fn");
// //对于函数而言，直接写return就等于有返回值
// return "100";
// }
// //此时是将y这个变量指向函数fn,可以通过y()来调用函数
// var y = fn;
// fn();
// //可以调用
// y();
// //将函数fn所执行的返回值传给z变量，所以z为100
// var z = fn();
// alert(z);
// alert(y);

//可以使用function来模拟java的类
function Person(name,age) {
//定义了一个Person的属性为name
this.name = name;
//定义了Person的属性为age
this.age = age;
this.address = "云南昭通";
//如果没有用this声明，这个变量就仅仅只是一个局部变量，不是类的属性
var x = 10;
//创建了一个行为
this.say = function() {
alert(this.name+","+this.age);
}
}
//创建了一个对象p1是Person的对象
var p1 = new Person("张三",12);
alert(p1.name+","+p1.address+","+p1.x);
p1.say();

var p2 = new Person("德华",22);
p2.address = "香港";
//可以通过对象["属性字符串"]完成对属性的调用
alert(p2["name"]+","+p2["address"]);

alert(typeof p1);
alert(p1 instanceof Person);
//在js中对于对象而言，可以通过for in来变量对象的属性
for(var a in p1) {
//可以获取对象中的所有显示声明的属性
alert(a+":"+p1[a]);
}
</script>
</head>
<body>
<input type="button" value="运行fn1" onclick="fn1()"/>
<input type="button" value="运行fn2" onclick="fn2()"/>
<input type="button" value="运行fn3" onclick="fn3()"/>
</body>
</html>

////////////////////////////////////////////////////////////////////js常用的对象///////////////////////////////////////////////////////////////////////////

--------日期时间

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
var d = new Date();
//对于js而言，月的下标是从0开始的
document.write(d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+"星期"+d.getDay());

</script>
</head>

-------字符串

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

---------------数组对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

//////////////////////////////////事件处理/////////////////////////////////////

-------1.通过事件来操作document的属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">

function clickD(obj) {
alert(obj.innerHTML);
}
function mouseD(obj) {
//设置这个对象的颜色，在js中设置文本的样式均通过xx.style.样式名称
obj.style.color = "#f00";
//当使用代码来设置样式的时候，如果在css中通过-表示的，都是有驼峰标识，font-size-->fontSize
obj.style.fontSize = "18px";
}
function outD(obj) {
obj.style.color = "#000";
obj.style.fontSize = "16px";
}
</script>
</head>
<body>
<div onclick="clickD(this)" style="cursor: pointer">点击了试一下</div>
<div onmouseover="mouseD(this)" onmouseout="outD(this)">鼠标移动上来试试</div>
</body>
</html>

-------2.主要通过数字变大变小的例子来讲解的

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

-----------------wtch函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
with(document) {
//此时花括号中的所有代码都是基于document作为根对象，当使用write(xxx)就等于document.write(xxx);
write("aaa<br/>");
write("bbb<br/>");
write("ccc<br/>");
//使用alert也是允许
alert("abc");
}

</script>
</head>
<body>
</body>
</html>

-----timeOut函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
function cd() {
//在3秒之后会执行bigger这个函数,setTimeout的意思就是间隔一段时间来执行某个函数
//setTimeout仅仅只会执行一次，如果希望重复执行，需要使用setInterval
setTimeout("bigger()",3000);

}

function bigger() {
//获取html中节点的id为txt的节点
var node = document.getElementById("txt");
node.style.fontSize = "200px";
}
</script>
</head>
<body>
<div id="txt" style="cursor: pointer">开始</div>
<div onclick="cd()">点击开始操作</div>
</body>
</html>

---------setInterval

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
var timeId;
function cd() {
//在3秒之后会执行bigger这个函数,setTimeout的意思就是间隔一段时间来执行某个函数
//setInterval表示每隔一段时间就调用一次函数
timeId = setInterval("bigger()",500);

}

function sd(){
clearInterval(timeId);
}

function bigger() {
//获取html中节点的id为txt的节点
var node = document.getElementById("txt");
var size = parseInt(node.style.fontSize);
if(size) {
size+=10;
} else {
size = "14";
}
node.style.fontSize = size+"px";
}
</script>
</head>
<body>
<div id="txt">开始</div>
<div onclick="cd()" style="cursor: pointer">点击开始操作</div>
<div onclick="sd()" style="cursor: pointer">停止操作</div>
</body>
</html>

//////////////////////////////浏览器对象模型////////////////////

--------------------history对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

-------------状态栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
function loc() {
var txt = document.getElementById("address").value;
window.status = txt;
}
</script>
</head>
<body>
<a href="#" onclick="loc()">test01</a>
<input type="text" id="address"/>
</body>
</html>

----------获取其他页面属性

=======1.主页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
// setTimeout("endWelcome()",5000);
// function endWelcome() {
// document.getElementById("welcome").style.display = "none";
// }
</script>
</head>
<body>
<div id="welcome">欢迎进行我们的网站</div>
<a href="#" onclick="window.open('test02.html','aaa','width=300,height=300,resizable=0')">test02</a>
<a href="#" onclick="window.open('test03.html','aaa','width=400,height=400,resizable=0')">test03</a>
<br/>
<a href="#" onclick="window.open('bless.html','aaa','width=600,height=300')">输入你祝福语</a>
<a href="#" onclick="window.open('bless.html','aaa','width=600,height=300')">选择性别</a>
<div id="bless"></div>
</body>
</html>

=======2.子页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

posted @ 2017-04-26 22:34 小拽A 阅读(402) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

小拽A

js01

公告