JavaScript基础
弹出消息框 alert实例:
var
a=
8
alert(
"hello world"+
a)
消息对话框confirm实例:
function rec(){
var mymessage=confirm(
"你喜欢javascript");
if(mymessage==
true)
{
document.write(
"是的!");
}
else
{
document.write(
"不是!");
}
}
<body>
<input name=
"button" type="button" onClick=
"rec()" value=
"点击我,弹出确认对话框" />
</body>
消息对话框prompt实例:
function rec(){
var score;
score = prompt();
if(score>=
90)
{
document.write(
"你很棒!");
}
else if(score>=
75)
{
document.write(
"不错啊!");
}
else if(score>=
60)
{
document.write(
"要加油!");
}
else
{
document.write(
"要努力了!");
}
}
<body>
<input name=
"button" type="button" onClick=
"rec()" value=
"点击我,对成绩做评价!" />
</body>
打开新窗口 Window.open实例:语法:window.open([URL], [窗口名称], [参数字符串])
function myopen{
window.
open(
'http://www.baidu.com',
'_black',
'width=300,height=200,menubar=no,toolabr=no,status=no,scrollbar=yes')
}
<body>
<input
type="button" name=
"button" onClick=
"myopen" value=
"点我打开新窗口">
</body>
各个参数
关闭窗口 Window.close语法:window.close();或object.close();实例:
var mywin=
window.open(
"http://www.baidu.com");
var a=confirm(
"是否关闭窗口");
if(a==ture){
mywin.close();
}
初识DOM
获取元素语法 document.getElementById(标签值);实例:
<p id="con">JavaScript
</p>
<script type="text/javascript">
var mychar= document.getElementById("con") ;
document.write("结果:"+mychar);
</script>
innerHTML属性语法 object.innnerHTML
<h2 id="con">JavaScript
</h2>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("原标题:"+mychar.innerHTML+"<br>");
mycahr.innerHTML="hello world";
document.write("现标题:"+mychar.innerHTML+"<br>")
</script>
改变HTML样式语法:object.style.property=new style; (property 属性)
<h2 id="con">I love JavaScript
</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。
</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#ccc";
mychar.style.width="300px";
</script>
显示和隐藏语法:object.style.display=value
function hidetext(){
var mychar=document.getElementById(
"con");
mychar.style.display=
"none";
}
function showtext(){
var mychar=document.getElementById(
"con");
mychar.style.display=
"block";
}
<body>
<p id=
"con">快来隐藏我!</p>
<input type=
"button" name=
"button" value=
"隐藏" onclick=
"hidetext()">
<input type=
"button" name=
"button" value=
"显示" onclik=
"showtext()">
</body>
控制类名 className();语法:object.className=classname
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"> //css样式
body{font-size: 10px;}
.one{
border: 1px solid #eee;
width: 200px;
height: 50px;
background: #ccc;
color: red;
}
.two{
border: 1px solid #ccc;
width: 200px;
height:50px;
background: #9cf;
color: blue;
}
</style>
</head>
<body>
<p id="p1">javascript
</p>
<input type="button" name="button" onclick="add()" value="添加样式">
<p id="p2">javascript
</p>
<input type="button" name="button" value="改变外观" onclick="modify()">
<script type="text/javascript">
function add(){
var p1=document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2=document.getElementById("p2");
p2.className="two";
}
</script>
</body>
</html>
逻辑与操作符 &&用法:
if(条件
1 && 条件
2)
{
运行代码
}
逻辑或操作符 ||用法:
有真则真,全假才假。
逻辑非操作符 !用法:
var a=
3;
var b=
5;
var c;
c=!(b>a);
// b>a值是
true,! (b>a)值是
false
c=!(b<a);
// b<a值是
false, ! (b<a)值是
true
一维数组创建方法:
var myarr=
new Array();
数组赋值
第一种方法
var myarray =
new Array(
66,
80,
90,
77,
59);
第二种方法
var myarray = [
66,
80,
90,
77,
59];
数组添加成员 myarray[6]=88; (注意数组下标为0)
数组长度:
var myarray=[
10,
55,
66,
88];
document.
write(
"数组长度"+myarray.
length);
二维数组创建数组:
方法1:
var myarr=
new Array();
for(
var i=
0;i<
2;i++){
myarr[i]=
new Array();
for(
var j=
0;j<
3;j++){
myarr[i][j]=i+j;
}
}
方法2:
var Myarr =
[[0 , 1 , 2 ],[1 , 2 , 3]];