zoukankan      html  css  js  c++  java
  • 2017.9.22 HTML学习总结--JavaScript脚本语言

     接上:

    1.JavaScript脚本语言

    定义:javascript是一种简单的脚本语言,可以在浏览器中直接运行,

       是一种在浏览器端实现网页与客户交互的技术javascript代码可

       以直接运行在html网页中,它响应一系列的事件,当一个javascript

       函数响应一系列的事件,当一个javascript函数响应动作时,浏览

       器就执行对应的代码。

    基本用法:

      组成:

       数据类型:主要类型有int、float、string、boolean、null

       常量变量:(1)变量的声明:var 变量名=“值”

            (2)数组的声明:1.var array1=new Array();

            (3)运算符:算术运算符、逻辑运算符、关系运算符、字符串运算符、位操作运算符;

             (4)控制语句:if else

    函数的定义和使用:

    <script> 标记对封装代码,且必须放在<head> <head>之间,其语法格式:

     <head>

       <script language=“javascript”>

          function functionName(【parameter1,parameter2,。。。。】){

            //处理有关的语句;

          }

        </script>

        </head>

    2.javascript的事件  

      在浏览器中网页与客户的交互都是通过事件引发的,当一个事件发生时,

    例如:“用户单击某个按钮”浏览器认为在这个按钮上发生了一个click事件,

    然后根据该按钮所定义的事件处理函数,执行相应的javascript脚本。

      

    常用的事件、事件处理的函数列表

      事件        事件处理函数名        何时触发

      blur         onBlue          元素或窗口本身失去焦点时触发

      change        onChange         当表单元素获取焦点,且内容值发生改变时触发

      click        onClick          单击鼠标左键时触发

      keydown        onKeydown        键盘键被按下时触发,如果一直按着某键,则会不断触发

      select        onSelect         选中文本时触发 

      submit        onSubmit          单击提交按钮时,在<form>上触发

      unload         onUnload          页面完全卸载后,在window对象上触发

    2.2 在HTML中引用(指定)事件处理函数

      在HTML中指定事件处理程序,需要在html标记中添加相应的事件处理程序的属性,

    并在其中指定作为属性值的代码或是函数名。

      使用格式:

     <标签  各有关属性及其属性值  on事件名称=“函数名称(参数)”>

    例如:

    引发一个单击事件,该事件的处理函数名是onClick(),其要完成的功能是通过函数test()实现,

    而函数test()的功能是现实一个提示对话窗口(有window的alert方法完成)

    <html>
      <head>
       <title>单击按钮事件实例</title>
       <script language="javascript">
        function test(){
          window.alert("事件引发一操作,并成功执行了这个操作!!!");
        }
       </script>
       </head>
       <body>
        <form action="">
          <input type="Buttom" value="警告对话框" onclick="test()"><br/>
        </form>
       </body>
      </html>

     

    3.javascript的对象

      javascript中设有内置对象,常用的内置对象有StringData和浏览器

    的文档对象(window、navigator、screen、history、location、document)

      3.1 window对象属性的常用方法

        alert()         弹出一个警告对话框       

        comfirm()     显示一个“确认”对话框,单击“确认”按钮时返回true,否则返回false

        prompt()       弹出一个提示对话框,并要求输入一个简单的字符串

        setTimeout(timer)  在经过指定的时间后执行代码

        clearTimeout()        取消对指定代码的延迟执行

        setInterval()       周期执行指定的代码

        clearInterVal()      停止周期性的执行代码

    其中警告对话框window.alert()和window.confirm()是使用较多的

     

     

     3.2 location对象

      ·location对象实现网页页面的跳转。在html中使用aa来实现页面来跳转,

        在javascript中,利用location对象实现页面自动的跳转

      ·使用格式:

         window.location.href=“网页路径”

        例如:跳转到搜狐网页:window location href=“http://www.souhu.com”

    1.3 history 对象

     ·length属性     浏览历史记录的总数

     ·go(index)方法  从浏览历史中加载URL,index参数是加载URL的相对路径,

               index为负数时,表示当地址之前的浏览记录,index正数时,

               表示当前地址之后的浏览记录.

     ·forward()方法  从浏览历史中加载下一个URL,相当于history.go()

     ·back()方法     从浏览历史中加载上一个URL,相当于history.go(-1)

    例如:从当前网页,回退到刚访问过的上一个网页页面,需要语句为:

      window.history.back()或者 window.history.go(-1)

      3.4 document对象

      (1)或者表单域对象;通过表单访问和直接访问

        假设有以下表单:

        <form action="" name="form1">

          <input type="text" name="t1" value="">.

          </form>

    则可以通过以下方法获取输入域的对象:

    (3.4.1)通过表单访问:

      ·var fObj=document.form1.t1;      //form1为表单的名字,t1为某表单域的name值

      ·var fObj=document.form1.elements["t1"];  //form1为表单的名字,t1为某表单域的name值

      ·var fObj=document.forms[0].t1;   //不使用表单名字,采用表单集合,【0】表示第一个表单

    (3.4.2)直接访问:

      ·var fOb=document.getElementsByName("t1")[0];//通过名字访问,t1为某表单域的name值

      ·var fOb=document.getElementById("t1");  //通过id访问,t1为某表单域的id值

      ·var fOb=document.all("t1").value;   //通过名字访问,t1为某表单域的name值 

  • 相关阅读:
    Centos7安装teamviewer 32/64位
    Centos7安装32位库用来安装32位软件程序
    linux环境下配置mysql双主复制
    zabbix自定义触发器进行监控
    VM安装系统时提示硬件不支持(unsupported hardware detected)
    mysql新建用户在本地无法登录
    msyql开启慢查询以及分析慢查询
    zabbix怎么把英文界面换成中文
    xencenter如何安装系统
    mysql优化查询
  • 原文地址:https://www.cnblogs.com/qichunlin/p/7577541.html
Copyright © 2011-2022 走看看