客户端网页编程06——JS

最新推荐文章于 2022-04-18 19:32:29 发布

WB1224678

最新推荐文章于 2022-04-18 19:32:29 发布

阅读量343

点赞数

客户端网页编程06——JS

JavaScript 函数

1.弹出框

confirm :弹出一个选择框。是和否的选择。返回一个boolean类型。
eg：

 var  boo = confirm("你是不是很帅？");
if(boo){
    alert("你很聪明");
}else{
    alert("你不诚实哈！");
}

prompt：弹出一个输入框，类似Java的scanner。返回一个字符串
eg：

var str  = prompt("输入一个数");
console.info(str);

2.open函数，以及一些window相关函数

window.open 打开一个新的窗口。
用法：

 var wi = window.open("newhtml.html","我的串口","width = 400 , height = 400 , top =0 ,left =100")
    function co(){
        /*通过窗体对象调用close方法*/
        wi.close(); //关闭窗体
    }

window.location.href = “xxx”：通过js对象控制跳转。
eg：

 function ck(){
         //当触发事件，调用此方法就会发生跳转。
        window.location.href="newhtml.html";
    }

window.history.forward(); 前进到下一级目录。
用法：

function fowd(){
    //使用forward前提是使用了back或者go。
        window.history.forward();
    }

window.history.back();返回上一级目录。
back 默认返回上一级（-1可以不写。）

 window.history.back(-1);

history.Go(-1); 也是返回上一级目录。 go可以返回多级目录。通过传入的参数进行确定。-1表示前一级。

3.延时函数，定时函数。

延时函数：setTimeout(x1 , x2);
x1传入需要执行的函数，x2传入需要延时的时间。
eg：

    function add(){
        console.info("执行");
    }
    /*两秒中后再执行函数，add称为回调函数。命名回调，add加（）就表示立即执行了，时间是毫秒*/
    setTimeout(add, 2000);

延时函数中还有匿名回调类型的（感觉类似java 匿名内部类）：

    /*匿名回调*/
    setTimeout(function(){console.info(123)},3000);

简单的语句可以放在字符串里面，到时间后可以自动转换为js代码

     var time = setTimeout("alert()",4000);

消除延时操作：

    /*消除延时执行,要清除哪一个，就需要加一个标志给定时器，setTimeout 会默认返回一个数字标志*/
    clearTimeout(time);

定时函数：setInterval(x1,x2);
x1传入需要执行的函数，x2传入需要延时的时间。

   /*定时执行某一段代码*/
    function ko(){
        console.info("执行这段代码")
    }
   setInterval(ko,2000);

    var numb = setInterval(function(){
       console.info("1")
    },100);
    /*关闭定时的代码*/
    clearInterval(numb);

4.navigator 对象

navigator是一个独立的对象，使用他提供浏览器获取操作系统的一些信息。

 /*获取浏览器使用的语言*/
 document.writeln(window.navigator.language);
 /*浏览器是否处在在线模式*/
 document.writeln(window.navigator.onLine);
 /*浏览器正式的名字*/
 document.writeln(window.navigator.appName);
 /*浏览器版本*/
 document.writeln(window.navigator.appVersion);

5.screen对象

    document.write(window.screen.height);
    document.write(window.screen.width);

    /*获取可以使用的宽度，高度*/
    document.write(window.screen.availHeight);
    document.write(window.screen.availWidth);

    /*document 是文档对象 ， 是直接打印到网页上面。*/

事件

1.事件流

操作一个元素的时候,页面上不止一个事件在触发。就是事件流。
冒泡和捕获两个不同的实现方式，因为各个浏览器早期设计有差异。

ie 默认是冒泡，而且只支持冒泡。
标准的dom浏览器既支持冒泡也支持捕获。
冒泡：即事件触发后，从最低层执行到最外层。
捕获：与冒泡相反。

2.事件的添加方式

1.传统指派方法：找到某个元素，在绑定某个事件。
eg:

var b = document.getElementById("bt1");
    function back(){
        window.history.back();
    }
    b.onclick = back ;

注意：back 如果加上括号表示立即执行。

<body onclick="ck()" onkeypress="ck1(event)">

ck（）在元素上，是被看成了字符串，被点击过后才将字符串转换为js代码,所以是要加上括号的。

2.现代指派方法：调用addEventListener。

addEventListener 用于绑定事件，现代指派事件。第一个参数是事件的类型，第二个参数是事件执行的行为，第三个参数是指冒泡还是捕获（默认一般都是冒泡–false）

ie下面的现代指派是用的是attachEvent（）；
eg:

 odiv.addEventListener("click", function(){
        alert('div');
    },true);

3.event对象。

只要有事件触发，都会产生event对象，当事件结束，event对象消失。
event代表当前事件的状态。
获取event对象有三种方式。
1.直接跟随事件传入。
eg：

<div  id = "div1" onclick="ck(event)"></div>
<script>
function ck(e){
        console.info(e);
    }
 </script>

2.在IE中，event是一个全局变量。
可以使用window.event获得。
eg：

   function ck1(){
        var e1= window.event;
        console.info(e1.type);
    }

3.在firefox等浏览器中，事件会作为第一个参数传入。 Firefox只支持事件对象作为句柄第一个参数传入
实现方式：

 function ck1(){
        var e1=arguments[0];
        console.info(e1.type);
    }

Arguments是一个类似数组但不是数组的对象，说它类似数组是因为其具有数组一样的访问性质及方式，可以由arguments[n]来访问对应的单个参数的值，并拥有数组长度属性length。还有就是arguments对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表，而且不能显式创建 arguments对象。arguments对象只有函数开始时才可用。event则是他的第一个参数。

4.鼠标事件。

<div id="div1" onclick="ck(event)" 
        ondblclick="ck(event)"
        onmouseover="ck(event)"
        onmouseout="ck(event)"
        onmousedown="ck(event)"
        onmouseup="ck(event)"
        >
        </div>
   <script>
       function ck(e){
           console.info(e.type)
       }
   </script>

鼠标事件也很简单。几乎都可以见明知义。
onmouseover表示鼠标移进。
onmouseout表示鼠标移出去。

5.键盘事件

 <textarea name="" id="t1" cols="30" rows="10" 
         onkeydown="ck(event)" 
         onkeyup="ck(event)"  
         onkeypress="ck(event)">
</textarea>
<script>
    /*onkeydown 键盘按下去， onkeyup 键盘弹上来， onkeypress 按压键盘*/
    function ck(e){
        console.info(e.type);
        /*获取到键盘码*/
        console.info(e.keyCode);
    }
</script>

6.html事件

获取到光标：onfocus
失去光标：onblur
示范代码：

<select name="" id="sel">
    <option value="China">中国</option>
    <option value="USA">美国</option>
</select>
<input type="text" id="inp"/>

<script>
    var osel = document.getElementById("sel");
    osel.onchange = function(){
        console.info(osel.value);
    }

    /*获取到光标，触发事件*/
    var oinp = document.getElementById("inp");
    oinp.onfocus = function(){
        this.style.backgroundColor= "blue";
    }
    /*失去光标*/
    oinp.onblur = function(){
        if(this.value==""){
            alert("验证失败！")
        }else{
            alert("验证成功");
        }
    }

</script>

表单提交事件

<form action="demo%2001.html" onsubmit="return sub()" onreset="re()" onkeypress="ck(event)">
    <input type="text" id="inp"/>
    <input type="reset"/>
    <input type="submit"/>
</form>

<script>
    /*事件的返回值，返回false 就阻止提交，true就提交类容*/
    var oinp = document.getElementById("inp");
    function sub(){
        if(oinp.value == "" || oinp == null){
            alert("输入框不能为空");
            return false;
        }else{
            return true;
        }

    }
    function re(){
        oinp.value="";
    }
    function ck(e){
        if(e.keyCode==13){
            sub();
        }
    }
</script>

注意return一定要写。

Java script 数据类型：

基本类型：number、boolean、string、undefined、null

引用类型：原生对象、内置对象、宿主对象

事件流：操作一个元素的时候页面上不止一个事件触发

冒泡和捕获：两种不同的实现方式，因为早期各个浏览器设计有差异（IE默认冒泡，只支持冒泡）

标准的dom浏览器既支持冒泡又支持捕获

addEventlistener用于绑定事件，现在指派事件，第一个参数事件的类型，第二个参数事件执行的行为，第三个参数控制冒泡还是排序

现在指派方法和传统指派方法区别：

WB1224678

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
客户端网页编程06——JS

客户端网页编程06——JSJavaScript 函数1.弹出框confirm :弹出一个选择框。是和否的选择。返回一个boolean类型。 eg： var boo = confirm("你是不是很帅？");if(boo){ alert("你很聪明");}else{ alert("你不诚实哈！");}prompt：弹出
复制链接

扫一扫