JavaScript基础
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中设置一个button，当button被点击调用rec()函数
</body>
- 消息对话框prompt
- 实例：
function rec(){
var score; //score变量，用来存储用户输入的成绩值。
score = prompt();//把消息框的值赋值给变量score
if(score>=90) // 做if判断
{
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="点击我，对成绩做评价!" />
//button调用rec()函数
</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); //输出获取的P标签。
</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");//取得p标签的id
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的id
p1.className="one"; //把p1的样式改为one
}
function modify(){
var p2=document.getElementById("p2");//获取p2的id
p2.className="two"; //把p2的样式改为two
}
</script>
</body>
</html>
- 逻辑与操作符 &&
- 用法：
if(条件1 && 条件2)//条件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++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j
}
}
方法2：
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]];
