JS中的复合类型和事件处理机制

最新推荐文章于 2022-09-10 02:24:43 发布

小马的二驴

最新推荐文章于 2022-09-10 02:24:43 发布

阅读量219

点赞数

文章标签： js

本文链接：https://blog.csdn.net/lvhezhong123/article/details/115383769

版权

复合类型

复合类型是指由多个基本数据类型或者复合类型构成的数据体。

js中的复合类型有对象Object、数组Array和Function函数三大类

对象

对象是一系列命名变量和函数的集合，对象中的命名变量称为属性,对象中的函数称为方法。对象中访问属性和函数的方法都是通过. 点运算符实现的。例如获取浏览器的版本navigator.appVersion

js是基于对象的脚本语言，所以提供了大量的内置对象供开发者使用

Array数组类
Date日期类
Math数学类
Object对象类
String字符串类
… …
还有一组的DOM对象，例如document.write()；一组BOM对象，例如window.alert()

数组

什么是数组

数组就是一组数据的集合，其表现形式就是内存中的一段连续的内存地址
数组名称其实就是连续内存地址的首地址

数组特点

数组定义时无需指定数据类型，数组定义时可以无需指定数组长度
数组可以存储任何数据类型的数据（比如一个元素保存整型，一个元素保存字符串型，这个在JS中是可以的）

<script>
        // var arr=[];//定义数组
        var arr = new Array();
        arr[0] = 123;
        arr[1] = "abcd";
        arr[5] = true;
        alert(arr.length); //6
        for (var k = 0; k < arr.length; k++) {
            console.log(arr[k]);  //没有赋值的元素为undefined
        }
        console.log(arr[100]);  //不会越界异常
    </script>

数组的基本操作

js为数组提供了一个length属性可以获取数组的长度，实际上js的数组长度可以任意变化

数组长度可变，索引值从0开始
同一个数组中的元素类型可以互不相同
访问数组元素时不会产生越界问题，访问并未赋值的数组元素时返回undefined

多维数组

<script>
        //定义数组方法1：  多维数组其实就是数组的元素还是数组
        var a = new Array();
        for (var i = 0; i < 3; i++) {        //一维长度为3
            a[i] = new Array();
            for (var j = 0; j < 5; j++) {    //二维长度为5
                a[i][j] = i + j;  //访问数组中的指定元素
            }
        }
        //定义数组方法2：
        var a = [[1, 2, 3, 5, 6, 7], [2, 3, 4], [3, 9, 0, 10, 12]];
        document.write("<table border=1>");
        for (var i = 0; i < a.length; i++) {
            document.write("<tr>");
            for (var k = 0; k < a[i].length; k++) {
                document.write("<td>" + a[i][k] + "</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>

数组常见方法

 在java中使用List,String;
 list=Arrays.asList(arr);获取一个不可变的集合，
        存储的元素个数不能变化。试图修改结构则一定UnsupportedOperationException
        <hr />
        String ss="adslfkjasldkfjsalkdfjdsafkajsdflksadjflsakd";<br />
        String[] arr=ss.split("a");<br />
        for(String temp:arr)<br />
        System.out.println(temp+":"+temp.length());<br />
        String ss1=String.join("567", arr);<br />
        System.out.println(ss1);<br />

concat(arrayX,arrayX,…,arrayX)方法用于连接两个或多个数组，参数可以是具体的值，也可以是数组对象。可以是任意多个

join(separator)方法用于把数组中的所有元素放入一个字符串，separator可选。

指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符

可以用于模拟实现栈或者队列
pop() 方法用于删除并返回数组的最后一个元素
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值unshift(newelement1,newelement2,…,newelementX)方法可向数组的开头添加一个或更多元素，并返回新的长度

reverse() 方法用于颠倒数组中元素的顺序
slice(start,end)方法可从已有的数组中返回选定的元素
sort(sortby)方法用于对数组的元素进行排序。其中sortby为一个函数

function(a,b){ return a-b}
a-b输出从小到大排序，b-a输出从大到小排序

splice(index,howmany,item1,…,itemX)从数组中添加/删除项目，然后返回被删除的项目

index必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置
howmany必需。要删除的项目数量。如果设置为 0，则不会删除项目

函数

函数可以包含一段可执行的代码，可以接受调用者传入参数，可以返回处理结果。

函数参数列表可以不需要数据类型声明，函数的返回值也不需要数据类型声明。

语法格式:
function functionName(param1, params2,…){}

调用语法：
functionName(values,value2,…)

<button id="but1" onclick="ff('abc')">点我</button>
   <script>
      function ff(param1){
          alert(param1+"：Click me!");
      }
   </script>
       <script>
           document.getElementById("but1").onclick=function(){
             alert("DOM树");
         }
      </script>
      <script>
          ddd(); 
          function ddd(){
           alert("小张说：'我爱小王'");
       }            
      </script>
      <script>
         
   </script>

事件处理机制

1、发生一件事情即为事件，比如鼠标点击、双击、键盘按钮被按下。
事件句柄event handler如onclick、onload等

2、JavaScript事件注册，就是把控件的事件和处理事件的代码联系起来的方法

3、如何进行事件的注册

直接在控件标签中写代码

<input type="button" value="测试" onclick = "javascript:alert('你好！');"/>

默认utf-8编码显示，编码问题的处理办法

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

事件处理程序

编写一个事件处理程序（函数），在控件标签中将该函数指定给一个事件。

<script> 
        function show() { 
            alert("你好!"); 
        } 
    </script>    
    <input type="button" value="测试" onclick = "show()"/>
    <p>
        在页面加载事件onload中，为控件绑定一个函数。其中onload表示在页面加载完成后回调的处理函数
    </p>
    <body onload="abc()">
        <script>
        function abc() {
            document.getElementById("b").onclick = function(){  //匿名函数
                alert('你好');
            };  
        }
        </script>

另外一种页面加载事件的写法

 <script type="text/javascript">
            window.onload=function(){
                document.getElementsByTagName("input").item(2).onclick=function() {
                    alert('页面加载另一种写法')
                };
            }
            </script>
            
            <input type="button" value="确定"/>

事件对象的使用

在IE10或者chrome浏览器中是window.event，在其他浏览器中, 是事件处理函数的第一个参数

<button onclick="rr(event)">点击</button>
            <script>
                function rr(evt){
                    alert(evt.screenX+"："+evt.screenY);
                    //如果不传递event参数，也可以尝试使用window.event获取事件对象
                }
            </script>

小马的二驴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中的复合类型和事件处理机制

复合类型复合类型是指由多个基本数据类型或者复合类型构成的数据体。js中的复合类型有对象Object、数组Array和Function函数三大类对象对象是一系列命名变量和函数的集合，对象中的命名变量称为属性,对象中的函数称为方法。对象中访问属性和函数的方法都是通过. 点运算符实现的。例如获取浏览器的版本navigator.appVersionjs是基于对象的脚本语言，所以提供了大量的内置对象供开发者使用Array数组类Date日期类Math数学类Object对象类String字符串类…
复制链接

扫一扫