JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。
javascript中有很多功能语句,
比如输出语句:
document.write("<h1>This is a heading</h1>");
这就是标准的输出语句,但是该语句会覆盖整个页面
而alert有三种用法
function testclick(){
alert("这是警告框");//警告框
}
function testPrompt(){
prompt("请输入密码","123456");//输入框
}
function testConfirm(){
alert(confirm("确定删除吗,请谨慎选择哟!"));//提示框
}
alert("这是警告框");//警告框
}
function testPrompt(){
prompt("请输入密码","123456");//输入框
}
function testConfirm(){
alert(confirm("确定删除吗,请谨慎选择哟!"));//提示框
}
其中警告框在页面中一般不会被使用,警告框被大量使用在测试当中
<input type="button" οnclick="testclick()" value="点我呀">
<input type="button" οnclick="testPrompt()" value="提示输入">
<input type="button" οnclick="testConfirm()" value="确定按钮">
<input type="button" οnclick="testPrompt()" value="提示输入">
<input type="button" οnclick="testConfirm()" value="确定按钮">
想要调用三种alert属性就要触发相应的事件,这里是用鼠标的单击属性触发
在Html5中有许多的鼠标事件比如:
onclick 当单击鼠标时运行脚本
ondblclick 当双击鼠标时运行脚本
ondrag 当拖动元素时运行脚本
ondragend 当拖动操作结束时运行脚本
ondragenter 当元素被拖动至有效的拖放目标时运行脚本
ondragleave 当元素离开有效拖放目标时运行脚本
ondragover 当元素被拖动至有效拖放目标上方时运行脚本
ondragstart 当拖动操作开始时运行脚本
ondrop 当被拖动元素正在被拖放时运行脚本
onmousedown 当按下鼠标按钮时运行脚本
onmousemove 当鼠标指针移动时运行脚本
onmouseout 当鼠标指针移出元素时运行脚本
onmouseover 当鼠标指针移至元素之上时运行脚本
onmouseup 当松开鼠标按钮时运行脚本
onmousewheel 当转动鼠标滚轮时运行脚本
onscroll 当滚动元素滚动元素的滚动条时运行脚本
ondblclick 当双击鼠标时运行脚本
ondrag 当拖动元素时运行脚本
ondragend 当拖动操作结束时运行脚本
ondragenter 当元素被拖动至有效的拖放目标时运行脚本
ondragleave 当元素离开有效拖放目标时运行脚本
ondragover 当元素被拖动至有效拖放目标上方时运行脚本
ondragstart 当拖动操作开始时运行脚本
ondrop 当被拖动元素正在被拖放时运行脚本
onmousedown 当按下鼠标按钮时运行脚本
onmousemove 当鼠标指针移动时运行脚本
onmouseout 当鼠标指针移出元素时运行脚本
onmouseover 当鼠标指针移至元素之上时运行脚本
onmouseup 当松开鼠标按钮时运行脚本
onmousewheel 当转动鼠标滚轮时运行脚本
onscroll 当滚动元素滚动元素的滚动条时运行脚本
函数isNaN是判断非数字,在测试其中的值的时候就用到了alert函数
其中一个=表示赋值,两个=表示值相等,三个=表示值数据类型完全相等
function testA() {
alert(isNaN(2));//判断非数字,是返回·false不是返回true
alert(isNaN(3.2));
alert(isNaN("2"));
alert(isNaN("不是数字"));
alert("弹出\。。。。。。。。。。。");
alert(2==2);
alert(2===2);
var a =0;
alert(a=2);
alert(a==2);
}
alert(isNaN(2));//判断非数字,是返回·false不是返回true
alert(isNaN(3.2));
alert(isNaN("2"));
alert(isNaN("不是数字"));
alert("弹出\。。。。。。。。。。。");
alert(2==2);
alert(2===2);
var a =0;
alert(a=2);
alert(a==2);
}
切换p标签中的值,代码如下所示
其中var x= document.getElementById("name");表示获取P标签ID
function testB() {
var x= document.getElementById("name");
x.innerHTML="<span>请输入。。。。<span>";
}
var x= document.getElementById("name");
x.innerHTML="<span>请输入。。。。<span>";
}
<p id ="name" οnclick="testB()" >切换</p>
当然切换的并不只有P标签中的值很多标签的值都能够切换
获取属性
function testC() {
var dv = document.getElementById("dv");
dv.align="center"
dv.style.color="green";
dv.style.fontSize="90px";
}
var dv = document.getElementById("dv");
dv.align="center"
dv.style.color="green";
dv.style.fontSize="90px";
}
<div id="dv" οnclick="testC()" align="left" style="color: red;font-family: '宋体';font-size:20px;">
跟着我一起嗨!
</div>
跟着我一起嗨!
</div>
上面函数获取了div标签的属性并且赋值在触发相应函数后便会更改div的属性
下面便是JavaScript中比较重要的变量了,JavaScript的变量并不需要刻意定义属性
function testE() {
//声明 a再赋值1
var a;
a=1;
//声明b并赋值2
var b=2;
var c=a+b;
alert(a);
alert(b);
alert(c);
}
function testF(){
var a,b,c;//先声明所有变量 ,在一一进行赋值
a=1;
b=2;
c=a+b;
alert(a);
alert(b);
alert(c);
}
function testG(){
var a=1,b=2,c=a+b;
alert(a);
alert(b);
alert(c);
alert("2"+2);//输出22
alert(parseInt("2")+2);//输出4
var d;
alert(d);//underfine
var e = true;//布尔型
}
//声明 a再赋值1
var a;
a=1;
//声明b并赋值2
var b=2;
var c=a+b;
alert(a);
alert(b);
alert(c);
}
function testF(){
var a,b,c;//先声明所有变量 ,在一一进行赋值
a=1;
b=2;
c=a+b;
alert(a);
alert(b);
alert(c);
}
function testG(){
var a=1,b=2,c=a+b;
alert(a);
alert(b);
alert(c);
alert("2"+2);//输出22
alert(parseInt("2")+2);//输出4
var d;
alert(d);//underfine
var e = true;//布尔型
}
定义数组
function array(){
var car = new Array();
car=["数组1","shuzu2","数组3","44444"];
for(var i=0;i<4;i++){
alert(car[i]);
}
}
var car = new Array();
car=["数组1","shuzu2","数组3","44444"];
for(var i=0;i<4;i++){
alert(car[i]);
}
}
这是一种较为常用的定义数组的方法
在JavaScript还可以定义JavaScript的对象及其属性
function teste(){
var stu = new Object();
stu.stuid=25;
stu.stuname="狗子";
stu.stusex=1;
stu.stuage=18;
stu.studd = function(){
alert("ID:"+stu.stuid+"姓名:"+stu.stuname+"性别:"+stu.stusex+"年龄:"+stu.stuage);
}
stu.studd();
}
var stu = new Object();
stu.stuid=25;
stu.stuname="狗子";
stu.stusex=1;
stu.stuage=18;
stu.studd = function(){
alert("ID:"+stu.stuid+"姓名:"+stu.stuname+"性别:"+stu.stusex+"年龄:"+stu.stuage);
}
stu.studd();
}
在这当中我们用到了alert测试stu中属性的值
在JavaScript中会经常调用系统时间,以下代码便是用来调用系统时间
function starTime(){
var time = new Date(); //定义时间
var h = time.getHours();//时
var m = time.getMinutes();//分
var s = time.getSeconds();//秒
m=chagetime(m);
h=chagetime(h);
s=chagetime(s);//判断是否小于10,是在前面添加一个0
document.getElementById("time").innerHTML=h+":"+m+":"+s;//输出时间
setTimeout("starTime()",500);//每隔500毫秒调用函数
}
var time = new Date(); //定义时间
var h = time.getHours();//时
var m = time.getMinutes();//分
var s = time.getSeconds();//秒
m=chagetime(m);
h=chagetime(h);
s=chagetime(s);//判断是否小于10,是在前面添加一个0
document.getElementById("time").innerHTML=h+":"+m+":"+s;//输出时间
setTimeout("starTime()",500);//每隔500毫秒调用函数
}
在JavaScript中我们经常用到if() else结构,但是很多时候if() else 结构很难表达出想要表达的东西这时候我们需要switch来表达
以下便是用switch来判断并输出今天是星期几
function today(){
var day = new Date().getDay();//定义并获取系统时间中的星期
var x=document.getElementById("timeAA");
switch(day){
case 1:
x.innerHTML="今天是星期一";
break;
case 2:
x.innerHTML="今天是星期二";
break;
case 3:
x.innerHTML="今天是星期三";
break;
case 4:
x.innerHTML="今天是星期四";
break;
case 5:
x.innerHTML="今天是星期五";
break;
case 6:
x.innerHTML="今天是星期六";
break;
case 7:
x.innerHTML="今天是星期七";
break;
default:
break;
}
}
var day = new Date().getDay();//定义并获取系统时间中的星期
var x=document.getElementById("timeAA");
switch(day){
case 1:
x.innerHTML="今天是星期一";
break;
case 2:
x.innerHTML="今天是星期二";
break;
case 3:
x.innerHTML="今天是星期三";
break;
case 4:
x.innerHTML="今天是星期四";
break;
case 5:
x.innerHTML="今天是星期五";
break;
case 6:
x.innerHTML="今天是星期六";
break;
case 7:
x.innerHTML="今天是星期七";
break;
default:
break;
}
}
JavaScript的学习尽情期待下篇吧