javascript

一基本语法：
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" οnclick="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" οnclick="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" οnclick="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="提交" οnclick="rec(this.form)"></td>
<td><input type="reset" name="reset" value="重置" οnclick="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" οnclick="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就会触发，执行程序块。

转载于:https://www.cnblogs.com/wudongyu/p/6920559.html