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就会触发,执行程序块。

  • 相关阅读:
    my first android test
    VVVVVVVVVV
    my first android test
    my first android test
    my first android test
    ini文件
    ZZZZ
    Standard Exception Classes in Python 1.5
    Python Module of the Week Python Module of the Week
    my first android test
  • 原文地址:https://www.cnblogs.com/wudongyu/p/6920559.html
Copyright © 2011-2022 走看看