zoukankan      html  css  js  c++  java
  • 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" 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就会触发,执行程序块。

  • 相关阅读:
    practice
    C#Hello World
    Merge
    Python学习面向对象编程
    Python学习Python操作数据库
    jmeter压力测试
    Python学习基础常用模块
    Python学习Python操作excel
    Python学习网络编程
    Python学习函数
  • 原文地址:https://www.cnblogs.com/wudongyu/p/6920559.html
Copyright © 2011-2022 走看看