zoukankan      html  css  js  c++  java
  • 8.JavaScript

    1.JavaScript简介

      JavaScript主要运行在客户端,用户访问带有JavaScript的网页,网页里的JavaScript程序就会传给浏览器,由浏览器解释和处理。表单数据的有效性验证等互动性功能都是在客户端完成的,不需要和Web服务器发生任何数据交换,因此不会增加Web服务器的负担。

    JavaScript具有以下特点:

        简单性:是一种脚本编程语言,解释性质的;
        安全性:它不允许程序访问本地的硬盘资源,不能将数据存入到服务器上,不允许对网络文档进行修改和删除;
        动态性:事件驱动方式进行交互;
        跨平台性:只依赖于浏览器;
      JavaScript程序不能独立运行,必须依赖于HTML文件。通常将其放在<script></script>标记中
    <script type="text/javascript" [src="外部js文件"]>  
    //type表明文本类型,此处为使用JavaScript编写的程序是文本文件。src是可选属性,一旦设置,将忽略标记内的所有语句
    js语句 </script>

    2.JavaScript放置位置

    1.head标记中的脚本

      JavaScript代码必须定义成函数形式,并在主体body标记内调用或通过事件触发。放在此处的脚本在页面装载时同时载入,这样在主体body标记内可直接执行,提高了脚本的执行速度。

    function functionname(参数1, ...){
      
    }

    2.body标记中的脚本

      放在主体body标记中,JavaScript代码可以定义成函数,也可以直接编写Script脚本语句,在页面装载时同时执行相关代码,这些代码执行结果直接构成网页的内容。

    3.外部js文件中的脚本

       
      <script type="text/javascript" src="外部js文件">

    4.事件处理中的脚本文件

        
    <input type="button" onclick="alter('直接在事件处理代码中加入JS')" value="直接调用JS">

    3.JavaScript程序


    1.消息对话框

        1.告警框  alter("message");  message是显示在弹出的对话窗口上的纯文本(非HTML文档)

        2.确认框  confirm("message"); 用户点击确定返回true,点取消返回false,在点击之前会阻止用户对浏览器的所有操作。

        3.提示框  prompt("提示信息", 默认值)  提示用户在进入页面前输入某个值。

      例子:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <script type="text/javascript">
                function disp_prompt(){
                    var name=prompt("input your name","Eason");
                    if (name != null && name != "")
                        document.write("你好" + name);
                }
            </script>
        </head>
        <body>
            <form action="" method="POST">
                <input type="button" onclick="disp_prompt()" value="提示">
            </form>
        </body>
    </html>

    效果: 

    结果:

    2.JS注释

        单行 // ,多行 /*  */

    3.数据类型

        1.String字符串型  需要用单引号‘’ 或双引号 “” 封装起来(二者效果一致),如果字符串中有单引号或者双引号时,例:" 你好,'JS'作家 "

        2.Number数值型:整型,浮点型,内部常量,特殊值

        3.Boolean布尔型

        4.NULL空类型

        5.Undefined  指变量创建后还未赋值之前所具有的值

        6.Object对象  

      4.变量  设置变量时,统一使用关键字var声明,JS会自动转型

        var 变量名[=初值],变量名[=初值],... 

    5.特殊运算符

        1.逗号运算符 ,  二元运算符,先计算第一个值,再计算第二个值,运算结果为第二个值。

          var rs = (3+5, 4+6);  //结果 rs=40

        2.新建对象运算符 new  var arry = new Array();

        3.删除对象符 delete   delete array[30];  //删除数组下标为30的元素

        4.类型运算符 typeof   返回一个表示操作数类型的字符串  typeof(300);

      其他规则和java语言一致

    6.常用的系统函数

        decodeURI()  解码某个编码的URI

        decodeURIComponent()  解码一个编码的URI组件

        encodeURI()   把字符串编码为URI

        encodeURIComponent()  把字符串编码为一个URI组件

        eval(string)  计算JS字符串,并把它当成脚本代码执行,并返回执行结果

         eval("x=10;document.write(x++)");
         docunment.write("2+2="+eval("2+2"));

        escape()  对字符串进行编码

        unescape()  对由escap()编码的字符串进行解码

        parseFloat(string)  解析一个字符串并返回一个浮点数,只有字符串的第一个数字会被返回,如果字符串的第一个字符不能被转换为数字,则返回NaN

        parseInt(string,radix)   解析一个字符串并返回一个整数,radix(范围2-36)用于指定数字的基数

    parseInt('30');    //默认十进制
    parseInt("30", 8);    //八进制

        getClass()    返回一个JavaObject的JavaClass

        isNaN()      检查某个值是否是非数  返回true或false

        isFinite()    检查某个值是否是有穷大的数

        Number()   把对象的值转换为数字 

          String()    把对象的值转换为字符串

    7.常用的对象函数

        toString(radix)  将Number类型转换为字符型

    var a = 12;
    a.toString(2);    结果为1100(二进制)
    a.toString();      结果为12,默认十进制

        toFixed(n)  将浮点数转换为固定小数点位数的数字。

        字符串的查找,提取和删除,方法和Java语言一致

    4.JavaScript对象

      JavaScript对象是拥有属性和方法的数据,可分为四类:

      (1)本地对象,独立于宿主环境,先定义对象,实例化后再通过对象名来使用。例如:Object、Array、Function、String、Boolean

      (2)内置对象,由ECMAScript提供,不依赖于宿主环境,在ECMAScript运行之前就已经创建好了。只定义了两个Global和Math对象。Global对象是全局对象,全局对象至少一个对象,不是一个类,既没有构造函数,也无法实例化。

      (3)宿主对象,ECMAScript实现的宿主环境提供的对象。所有的DOM和BOM对象都是宿主对象。

      (4)自定义对象

    var person = new Object();
    person.name = "Eason";
    person.age = 6;
    
    // 另一种方法
    var person = {name:"Eason", age:6};

    1.Array

        数组元素类型可不一致

    var a1 = new Array();
    var a2 = new Array(size);  //指定大小
    var a3 = new Array(element1,...,elementn);
    var a4 = ["a", "b". "c"];    //注意括号

    如果数组下标超过了数组的边界,则返回undefined。

      var len = a1.length;

      join("分隔符")  将数组的所有元素放入字符串,并通过指定的分隔符分隔

      pop()       删除并返回数组的最后一个元素

      push(element1,element2,...)  向数组末尾添加一个或更多元素,并返回新的长度

      shift()      删除并返回数组的第一个元素

      unshift(e1,...,en)  向数组开头添加一个或更多元素,并返回新的长度

      sort()     排序

      reverse()   颠倒顺序

      splice()      删除元素并向数组添加新元素

      slice()     从已有的数组返回选定的元素

      toString()    将数组转换成字符串,并返回结果

      toLocaleString()  转换为本地数组,并返回结果

      concat()   连接两个或更多数组并返回结果

      

    2.Date

    var today =  new Date();   //自动使用当前日期时间    
    var today =  new Date(3000);  //毫秒数,1970.1.1.0时0分3秒    
    var today =  new Date("Apr 15, 2016 15:20:00");  //标准时间格式,2016.4.15 15时20分0秒    
    var today =  new Date(2016,4,15,15,20,0,0);    //年,月,日,时,分,秒,毫秒

      getDate()    返回天(1-31)

      getDay()     返回一周的天(0-6)

      getMonth()   返回月份(0-11)

      getFullYear()  返回4位数字的年份

      getHours()   返回小时数(0-23)

      getMinutes()   返回分钟数(0-59)

      getSeconds()    返回秒数(0-59)

      getMilliseconds()  返回毫秒数(0-999)

      getTime()     返回1970.1.1到今天的毫秒数

      toString()     转换成字符串

      toLocaleString()  根据本地时间格式,转换成字符串

      toLocaleTimeString()  根据本地时间格式,将时间部分转换成字符串

      toLocaleDateString()  根据本地时间格式,将日期部分转换成字符串

      

    3.Math

      属性:

        Math.E  e                Math.LN2  ln2                Math.LN10  ln10

        Math.LOG2E  log2e             Math.LOG10E  lge               Math.PI  π

        Math.SQRT1_2  1/√2             Math.SQRT2  √2

      方法:

        Math.ceil(x)    向上舍入,整数

        Math.floor(x)     向下舍入

        Math.round(x)   四舍五入

        Math.random()    返回0-1之间的随机数

        Math.max(x, y)    返回x, 和y的最大值

        Math.min(x, y)   最小值

        Math.sqrt(x)    平方根

        Math.exp(x)    e的指数

        Math.pow(x, y)    x的y次幂

        Math.log(x)    lnx

    4.Number

      

    5.String

        contact()  连接字符串并返回结果

        split("string s")  根据s来分隔源字符串,返回字符串数组

        toLowerCase()  转换成小写

        toUpperCase()  转换成大写

    6.Boolean

    7.DOM  document对象

      DOM节点树:DOM将HTML文档表达为树结构,

      DOM节点:                   节点类型    nodeType值

        整个文档是一个文档节点           Document      9

        每个HTML标记是一个元素节点         Element       1

        包含在HTML元素中的文本是文本节点      Text           3

        每一个HTML属性是一个属性节点        Attr          2    

        注释属于注释节点              Comment        8

      getElementByID("id")  通过id获取节点

      getElementByName("name")  通过name获取节点,返回数组

      getElementByTagName("tagname")  通过标记名称来获取节点,返回数组

      

    var myform = document.forms;    //获取form表单,返回数组
    var myform = document.formname;    //formname为form名称
    var password = document.formname.password;    //访问password属性

    8.BOM  浏览器模型(Browser Object Model)

       BOM定义了浏览器对象的组成和相互关系,描述了浏览器对象的层次结构,是Web页面中内置对象的组织形式。

    1.Window对象

      window对象位于BOM的顶层,是其他对象document,navigator...的父类,。在实际应用中,只要打开浏览器,无论是否存在页面,window对象都将被创建。由于window对象是所有对象的顶层对象,所以按照对象层次访问某一个对象时不必显式地注明window对象。下面列出最常用的window对象的 方法:

    方法名
    说明
    alert('message')
     显示带有一段消息和一个确认按钮的告警框
    confirm('question')
    显示带有一段消息及确认和取消按钮的对话框
    prompt("提示信息",默认值)
    显示可提示用户输入的对话框 
    open(url, name, features, replace)
    打开一个新的浏览器窗口或查找一个已命名的窗口 
    blur()
    把键盘焦点从顶层窗口移开 
    close()
    关闭浏览器窗口 
    focus()
    把焦点予以一个窗口 
    setInterval(code, interval)
    按指定的周期(以毫秒计)来调用函数或计算表达式 
    setTimeout(code, delay) 
    在指定的毫秒数后调用函数或计算表达式 
    clearInterval(intervalID)
    取消由setInterval()设置的timeout 
    clearTimeout(timeoutID)
    取消由 setTimeout()设置的timeout

    2.Navigator对象

       navigator用于获取用户浏览器的相关信息。

    3.Screen对象

       screen对象用于获取用户屏幕设置的相关属性,主要包括显示尺寸和可用颜色的数量信息。

    4.History对象

       history对象表示窗口的浏览历史,并由window对象的history属性引用该窗口的history对象。history对象是一个数组,其中的元素存储了浏览器历史中的URL,用来维护在Web浏览器的当前会话内所曾经打开的历史文件列表。

    5.Location对象

       location对象用来表示浏览器窗口中加载的当前文档的URL,该对象的属性说明了URL中的各个部分

      ...

    5.JavaScript事件分析

    1.事件类型    

       事件句柄(又称事件处理函数)是指事件发生时要进行的操作。它的命名规则是在事件名称前加上前缀on。

       基本语法:

    <标记     事件句柄="JS代码函数名"> ... </标记>
    示例:
    <script type="text/javascript">
        function show(){
            document.write('Hellow World!');
        }
    </script>
    ...
    <input type="button" name=""  vlaue="显示" onclick="show();">

    2.事件处理

    1.静态指定

    静态指定方式,是在开始标记中设置相关事件句柄,并绑定事件处理程序即可。
    <
    标记 事件句柄="JS代码函数名"> ... </标记> 示例: <body onload="alert('页面装载成功!')">...</body>

    2.动态指定

       在此用法中,“事件处理程序"必须使用不带函数名的function(){}来定义

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script type="text/javascript">
                function clickHeadler(){
                    alert('代码触发事件,即将提交表单');
                    return true;
                }
            </script>
        </head>
        <body>
            <form name="form1" action="">
                <input type="button" id="button1" value="提交">
            </form>
            <script type="text/javascript">
            /*在装载页面的时候执行*/
    //向button动态分配onclick事件 document.getElementById('button1').onclick=function(){ return clickHeadler(); } /*form1.button1.onclick();//程序触发*/ </script> </body> </html>

    3.特定对象特定事件的指定

      在script标记中编写元素对象的事件处理程序代码。使用script标记的for属性指定事件源,并用event属性指定事件句柄名称。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <script type="text/javascript" for="window" event="onload">
                alert('网页读取完成!');
            </script>
        </body>
    </html>

    3.事件处理程序的返回值

    <标记     事件句柄="return 函数名()"> ... </标记>
    示例:
    <script type="text/javascript">
        function show(){
            document.write('Hellow World!');
            return true;  
         //这种情况下函数体的最后一句必须是带有返回值的return语句。
        }
    </script>
    ...
    <input type="button" name=""  vlaue="显示" onclick="return show();">
    如果返回fase,则阻止浏览器的下一步操作。
     
     
     
     
     
     
     
     
     
     
     
     
     
        
  • 相关阅读:
    函数7—递归
    函数6—内置函数
    PHP.6-PHP环境搭建(Windows环境下)-LAMP
    PHP.5-DIV+CSS布局网站首页实例
    PHP.4-DIV+CSS标准网页布局准备工作(下)
    PHP.3-DIV+CSS标准网页布局准备工作(上)
    PHP.2-LAMP平台介绍及网站的工作原理
    小白日记36:kali渗透测试之Web渗透-手动漏洞挖掘(二)-突破身份认证,操作系统任意命令执行漏洞
    PHP.1-网站开发概述
    小白日记35:kali渗透测试之Web渗透-手动漏洞挖掘(一)-默认安装引发的漏洞
  • 原文地址:https://www.cnblogs.com/astonc/p/11843332.html
Copyright © 2011-2022 走看看