一基本语法:
1.(基本的数据类型)
js提供了四种数据类型,分别为数值,字符(不要用关键字做变量名),布尔,空值
var a=1;
var a="wudongyu";
var a=TURE;
var a=null;
2.(运算符)
+-*/(加减剩除),%求余,++自加,--自减
列子:
<script type="text/javascript" >
function rec(form) {
form.an.value=(form.t.value*form.h.value+form.l.value*form.h.value)/2
}
</script>
<form action="">
<h1>面积</h1>
t<input type="text" name="t"><br>
l<input type="text" name="l"><br>
h<input type="text" name="h"><br>
<input name="button" type="button" onclick="rec(this.form)" value="面积"><br>
<input type="text" name="an"><br>
</form>
其中的通过onclick事件,调用函数rec(this.form)来计算梯形面积
3.(逻辑运算符)
&&与,只有都为真,才真,否则为假
||或,只要有一个为真,就是真
!非,就是相反
二程序结构:
在编程语言中,程序的结构会有:顺序结构,循环结构,选择结构,在js中,只提供了条件if和循环结构for。
1:if语句(在编程语言中,其实这些都大同小异,就格式不太一样)
语法
if 条件
{
....
}
或者是 if 条件
{
...
}
Else 条件
{
...
}
列子
<script type="text/javascript">
function rec(form){
var a=form.recshortth.value
{
if (a>60)
alert("及格");
else
alert("不及格");
}
}
</script>
<form action="">
<input type="text" name="recshortth"><br>
<input name="button" type="button" onclick="rec(this.form)" value="提交">
</form>
2:for语句
基本语法
for (初始化值;条件;求新值)
{
...
}
列子:
<script type="text/javascript">
var i=1
for (i=1;i<=5;i++){
document.write("<h",i,">欢迎学习for!</h",i,">");
}
</script>
3:Sitch语句
基本语法
switch(n){
case: 语句1;
执行代码块 1
break;
case: 语句2;
执行代码块 2
break;
case: 语句3;
...
default: 语句
}
其中n是变量,然后和case对比
列子:
<script type="text/javascript">
function rec(form){
var a=form.recshortth.value;
switch(a){
case '90':{
document.write("优秀");
break;}
case '80':{
document.write("良好");
break;}
case '70':{
document.write("中等");
break;}
case '60':{
document.write("及格");
break;}
default:{
document.write('不及格');
break;
}
}
}
</script>
<form action="">
<input name="button" type="button" onclick="rec(this.form) value="成绩">
</form>
4:While和Do..While(两者都是用来循环语句,但前者是先判断后执行,后者相反)
基本语法
1)while 语法
While(){
程序段
...
}
2)Do ... While语法
Do
{
程序段
...
}
While()
列子:
1)While
<script type="text/javascript">
var i=1;
while (i<1){
document.write("<h",i,">欢迎您!</h",i,">");
i++;
}
</script>
#会发现没有显示内容,因为while是先判断后显示,因为i<1,所有就不会显示。
2)Do ... While语法
<script type="text/javascript">
var i=1;
do
{
document.write("<h",i,">欢迎您!</h",i,">");
i++;
}
while(i<1)
</script>
#会发现程序会执行一次,因为它是无论条件是否满足while后面的条件,它都会执行一次。
三函数:
在js中,是使用function来定义的,函数结构分为参函数和无参函数,比如写个函数rec
function rec();是无参涵数
function rec(form);有参函数
四总结小列子:
<script type="text/javascript" >
function rec(form) {
var a=form.textl.value;
var b=form.textf.value;
var c=form.texts.value;
{
if (c==b)
alert("恭喜您,修改密码成功!");
else
alert("对不起,密码与确认码不一致");
}
}
function re(form) {
form.textl.value="";
form.textf.value="";
form.texts.value="";
}
</script>
<form action="">
<table width="321" border="1" border-style="none">
<tr><td align="center" valign="middle" colspan="3"><h1>用户密码修改</h1></td>
</tr>
<tr>
<td>旧密码:</td>
<td><input type="password" name="textl"></td>
</tr>
<tr>
<td>新密码:</td>
<td><input type="password" name="textf"></td>
</tr>
<tr>
<td>重新输入密码:</td>
<td><input type="password" name="texts"></td>
</tr>
<tr>
<td><input type="button" name="button" value="提交" onclick="rec(this.form)"></td>
<td><input type="reset" name="reset" value="重置" onclick="re(this.form)"></td>
</tr>
</table>
</form>
四事件分析:
js是一门脚本语言,也是基于面向对象的编程语言,虽然没有专业面向对象编程语言那么规范的使用类的继承,封装等,但有面向对象的编程就必须有事件的驱动,才能执行程序,比如用户A点击按钮或者提交数据的时候,就发生了一个鼠标单击onclick事件,需要浏览器作出处理,返回给用户一个结果,二js的事件处理功能,可以带给用户更多的操作性,也可以来开发更具交互性,应用性的网页.
1)主要事件,还有其它一些事件
onClick 鼠标单击事件(在页面上单击鼠标时,就会发生该事件,同时onclick事件调用的程序块也会被执行,鼠标的单击事件通常和按钮一起使用)

onChange 文本框内容改变事件(通过改变文本框的内容来发生事件的,但=当输入文本框的内容发生改变时,onChange事件调用的程序就会被执行)

onSelect 文本框内容被选中事件(选中事件,当文本框的内容被选中时,onSelect事件就会被执行)

onFocus 聚焦事件(网页的对象获得聚焦时,onFocus事件调用的程序就会被执行)

onLoad 装载事件(当载入一个新的网页文件的时候,onLoad事件调用的程序就会被执行)

onUnload 卸载事件(当卸载页面文件时,onUnload事件调用的程序就会被执行,#需要注意的是,onUNload很好用,但是在ie下可以执行,在火狐下不兼容来,这个事件用不了)

onBlur 失焦事件(失焦和onFocus相反,当光标移开当前对象的时候,onBlur事件调用的程序会被执行)

onMouseOver 鼠标事件(当鼠标移到一个对象上,就会触发onMouseOver事件)

onMouseOut 鼠标移开事件(与上相反)
**还有鼠标双击事件,鼠标按下事件,页面内容复制事件,窗口移动事件等等都可以来为网页提供更多的方便
列子
*1*鼠标单击事件
<script type="text/javascript" >
function wdy() {
alert("hello,welcome to blog!")
}
</script>
<form>
<input name="button" type="button" onclick="wdy()" value="yunxingchengxu"/>
</form>
*2*文本框内容改变事件onChange
<form action="">
<input type="text" name="change" value="欢迎您" onChange="alert('看就好,别点')"></text>
</form>
*3*onSelect文本框内容被选中事件
<form> <input type="text" name="change" value="你好!" onSelect="alert('你真的好吗?')"></form>
*4*聚焦事件onFocus
<script type="text/javascript">
function aihao(){
alert("选择成功!")
}
</script>
<h1 style="text-align:center;font-family:arily;color:#ff00ff">请选择您的爱好:</h1><br>
<form action="">
<select name="gushi" onFocus="aihao()">
<option>体育</option>
<option>音乐</option>
<option>美术</option>
<option>其他</option>
</select>
</form>
网页中的对象获取焦点时,该对象的onFocus事件就会被触发,执行程序,弹出对话框“选择成功!”
*5*装载事件onLoad
<body onLoad="alert ('页面文件装载中,请稍等....')">
</body>
装载一个新的页面和新的网页文件时,onLoad事件就会被触发,就执行程序,弹出对话框
*6*
<body onUnload="confirm('真的要退出页面,请点击确定。')">
</body>
*7*
<form action="">
口令:<input name="kouling" type="text" onBlur="confirm('口令错误,请重新输入')"/>
<input name="anniu" type="button" value="确定"/>
</form>
*8*
<form action="">
口令:<input name="kl" type="text"/>
<input name="anniu" type="button" value="确定" onMouseOver="confirm('请输入口令后,再单击')"/>
</form>
此代码表示,当鼠标放在确定按钮上,onMouseOver就会被触发,执行程序,弹出对话框
*9*
<form action="">
口令:<input name="kl" type="text"/>
<input name="anniu" type="button" value="确定" onMouseOut="confirm('不要离开,请单击进入')"/>
</form>
当鼠标从确定按钮移开时,onMouseOver就会触发,执行程序块。

posted on 2017-05-30 15:44  期待某一天  阅读(183)  评论(0编辑  收藏  举报