• javaScript-进阶篇(一)


    1、变量

    1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。

    2.变量名区分大小写,如:A与a是两个不同变量。

    3.不允许使用JavaScript关键字和保留字做变量名。

    声明变量语法: var 变量名; 

    变量赋值:

    变量是无所不能的容器,你可以把任何东西存储在变量里,如数值、字符串、布尔值等

    表达式:

    表达式与数学中的定义相似,表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。

    +号操作符

    (1)操作符

    看下面这段JavaScript代码。

    sum = numa + numb;

    其中的"=""+"都是操作符。

    JavaScript中还有很多这样的操作符,例如,算术操作符(+、-、*、/等),比较操作符(<、>、>=、<=等),逻辑操作符(&&、||、!)。

    注意: “=” 操作符是赋值,不是等于。

    (2) "+"操作符

    算术运算符主要用来完成类似加减乘除的工作,在JavaScript中,“+”不只代表加法,还可以连接两个字符串

    2、事件

    JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

    比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果

    鼠标单击事件( onclick ):

    鼠标经过事件(onmouseover):

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 鼠标经过事件 </title>
    <script type="text/javascript">
        function message(){
          confirm("请输入密码后,再单击确定!"); }
    </script>
    </head>
    <body>
    <form>
    密码:<input name="password" type="password" onmouseover="message()">
    <input name="确定" type="button" value="确定"/>
    </form>
    </body>
    </html>

    失焦事件(onblur):

    <script type="text/javascript">
      function message(){
        alert("请确定已输入密码后,在移开!"); }
    </script>    
    </head>
    <body>
      <form>
       用户:<input name="username" type="text" value="请输入用户名!" >
       密码:<input name="password" type="text" value="请输入密码!" onblur="message()">

    内容选中事件(onselect):

    选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行

    加载事件:

    事件会在页面加载完成后,立即发生,同时执行被调用的程序。
    注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。

          2. 此节的加载页面,可理解为打开一个新页面时。
    如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”

    <!DOCTYPE html>
    <html>
     <head>
      <title> 事件</title>  
      <script type="text/javascript">
       function count(){
           
        //获取第一个输入框的值
        var txt1 = document.getElementById("txt1").value;
        //获取第二个输入框的值
        var txt2 = document.getElementById("txt2").value;
        //获取选择框的值
        var select = document.getElementById("select").value;
        
        var result = "";
        //获取通过下拉框来选择的值来改变加减乘除的运算法则
        switch(select){
            case "+":
                result = parseInt(txt1)+parseInt(txt2);
                break;
            case "-":
                result = parseInt(txt1)-parseInt(txt2);
                break;
            case "*":
                result = parseInt(txt1)*parseInt(txt2);
                break;
            default:
                result = parseInt(txt1)/parseInt(txt2);
        }
        //设置结果输入框的值 
        document.getElementById("fruit").value=result;
       }
      </script> 
     </head> 
     <body>
       <input type='text' id='txt1' /> 
       <select id='select'>
            <option value='+'>+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
       </select>
       <input type='text' id='txt2' /> 
       <input type='button' value=' = ' onclick="count()"/> <!--通过 = 按钮来调用创建的函数,得到结果--> 
       <input type='text' id='fruit' />   
     </body>
    </html>
  • 相关阅读:
    HTML技巧: 语义化你的代码
    css sprite
    Redis主从复制原理
    idea修改快捷键
    Ubuntu14.20 安装docker,创建centos6.7容器,并访问centos容器
    [转]SQL 中 with as 的用法
    ftp与sftp及sftp和scp的区别
    Linux top 命令
    Linux free 命令
    ubuntu 源方式 安装jdk
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/6388836.html
Copyright © 2020-2023  润新知