JavaScript基础(二)

来源：互联网发布：mac os stm8 编辑：程序博客网时间：2024/06/05 19:21

window.setInterval("alert('a')",2000);//每个2秒执行一次alertwindow.setTimeout("alert('a')",3000);//3秒后执行alertnavigator.appNamenavigator.appVersionnavigator.appMinorVersion

这里写图片描述

JS之标签位置

 <body>    <input type="text" name="username" value="默认" id="usernameId"> </body> <script>    var a = document.getElementById("usernameId").value;    document.write(a); </script></html>`

js的函数、绑定时间、document对象、表单提交和验证、解析json

函数

创建函数的3种方式

方法一：

function add1(a,b){    alert(a+b);}//调用函数add1(1,2);

function add1(a,b){    alert(a+b);}//调用函数add1(1,2);

方法二：匿名函数

var result = function(a,b){    alert(a+b);}//调用函数result(1,2);

var add2=function(a,b){    alert(a+b);}//调用函数add2(2,3);

方法三：Function构造函数

var params = "a,b";var method = "var sum; sum=a+b;return sum";var result = new Function(params,method);//调用函数result(1,2);

var params = "a,b";var method = "var sum;sum=a+b;return sum;";var result = new Function(params,method);//调用函数alert(result(1,3));

js中函数是没有重载的

验证js中函数是没有重载的

<script>    function add1(a,b){        alert(a+b);    }    function add1(a,b,c){        alert(a+b+c);    }    function add1(a,b,c,d){        alert(a+b+c+d);    }    add1(1,2);//Nan    add1(1,2,3);//Nan    add1(1,2,3,4);//10<script>

前2个值都是Nan,最后一个是10。

模拟java中函数的重载

js中调用函数，需要把参数传递过去，在函数中有一个数组arguments，是用来保存这些参数的，我们可以用arguments模拟重载的效果。

function add2(){    var sum=0;//sum必须初始化    for(var i=0;i<arguments.length;i++){        sum = sum+arguments[i];    }    alert(sum);}add2(1,2);add2(1,2,3);add2(1,2,3,4);

全局函数

var a="alert('Hello World')";eval(a);

var a=encodeURI("ABCD1234中华人民共和国");document.write(a);document.write(decodeURI(a));

这里写图片描述

var b = "3";var c = 3;var d = "abc";document.write(isNaN(b));//falsedocument.write(isNaN(c));//falsedocument.write(isNaN(d));//true

document.write(parseInt("3")+",");//3,,document.write(parseInt("3")+2+",");//5,document.write(parseInt("3")+2+"A");//5Adocument.write(parseInt("3")+"A"+2);3A2

js事件

HTML绑定js事件的3种方法

方法一：直接在ｈｔｍｌ中写ｏｎｃｌｉｃｋ

<input type="button" id="btn1" value="btn1" onclick="method1();"/><script>    function method1(){        alert("btn1");    }</script>

方法二： document.getElementById(“btn2”).事件属性=方法名称

<input type="text" id="btn2" value="text"/><script>    document.getElementById("btn2").onclick=method2;</script>

方法三：document.getElementById(“btn2”).事件属性=function(){ 方法体}

<input type="button" id="btn3" value="bnt3"><script>    document.getElementById("btn3").onclick=function(){        alert("btn3");    }</script>

js常用事件

常用事件:

onfocus onblur; onkeypress;onmouseover onmouseout;  onsubmit

<input type="text" id="id1" name="username" value="" onfocus="onfocus1();" onblur="onblur1();"/><input type="text" id="id2" name="username"  value="请单击键盘" onkeypress="keypress1(event);" /><input type="text" id="id3" name="username" onmouseover="mouseover1();" onmouseout="mouseout1()"><form onsubmit="submit1();">登录名：<input type="text" name="useername" value="" ><input type="submit"></form>

<script>    function onfocus1(){        document.getElementById("id1").value="";    }    function onblur1(){        document.getElementById("id1").value="focus";    }    //A65  a97 enter:13    function keypress1(obj){        alert(obj.keyCode);    }    function mouseover1(){        document.getElementById("id3").value="over";    }    function mouseout1(){        document.getElementById("id3").value="out"    }    function submit1(){        alert("submit");        //return false;    }</script>

document对象

document代表整个文档，所我们可以获取到里面的任何对象。
常用的4个方法：

write();getElementById();//没加sgetElementsByName();//结果是数组，所以是加了sgetElementsByTagName();//结果是数组，所以是加了s

<html> </body>    <input type="text" id="id1" name="username" value="value1"/><br/> <br/>    <input type="text" name="username" value="value2"/><br/> <br/>    <input type="text" name="username" value="value3"/><br/> <br/>    <input type="button" value="getElementByName" onclick="method1();">    <input type="button" value="getElementByTagName" onclick="method2();"> </body>    <script>        function method1(){            var names=document.getElementsByName("username");            alert(names.length);            for(var i=0;i<names.length;i++){                alert(names[i].value);            }        }        function method2(){            var names=document.getElementsByTagName("input");            alert(names.length);            for(var i=0;i<names.length;i++){                alert(names[i].value);            }        }    </script></html>

innerHTML

innerHTML有2个作用：
1. 获取标签里的内容
2. 给标签设置内容

<body>    <div id="div1" style="width:300px;height:200px; border:solid red 2px;">你好，中国。</div>    <br/>    <input type="button" value="innerHTML插入值" onclick="insert();">    <br/>    <input type="button" value="innerHTML取值" onclick="get();"></body>

<script>    function insert(){        // "<table border='3'><tr><td>a</td><td>b</td></tr></table>"   "Hello World"        document.getElementById("div1").innerHTML="Hello World";    }    function get(){        var a = document.getElementById("div1").innerHTML;        alert(a);    }</script>

表格

<body>    行：<input type="text" id="tr"/>列：<input type="text" id="td"/>    <br/>    <input type="button" value="动态生成表格" onclick="generate();">    </body><div id="div"/>

<script type="text/javascript">   //注意：<div></div>,标签的/放在前面，不是<div/>,下面放在<div/>会导致列之间有空格    function generate(){        var tr=document.getElementById("tr").value;        var td=document.getElementById("td").value;        var table="<table border='1'>";        for(var i=0;i<tr;i++ ){            table=table+"<tr>";            for(var j=0;j<td;j++){                //table=table+"<td>"+"a"+"<td/>";                table=table+"<td>a</td>";            }            table=table+"</tr>";        }        table=table+"</table>";        var div = document.getElementById("div");        div.innerHTML=table;    }</script>

这里写图片描述

form

这里写图片描述

表单的3种提交方式

form自带的type=”submit”
超链接提交
button提交

form自带的type=”submit”

<form id="form1" action="hello.html">    用户名：<input type="text" name="username">    密码：<input type="password" name="password">      <input type="submit" value="提交"></form>

超链接提交

<form id="form1" action="hello.html">    用户名：<input type="text" name="username">    <input type="button" name="btn" value="提交" onclick="submit();"/>    <!--超链接-->    <a href="hello.html">超链接提交</a></form>

button提交

在button的函数中，获取form标签，然后调用submit();

<form id="form1" action="hello.html">    用户名：<input type="text" name="username">    密码：<input type="password" name="password">    <input type="button" name="btn" value="提交" onclick="submit();"/></form>

<script>    function submit(){        var form1=document.getElementById("form1");        form1.submit();    }</script>

BOM

BOM: Browsse Object Model,浏览器对象模型。
- Window
- Windwo Screen
- Window Location
- Window History
- Navigator
- 弹窗
- 计时事件
- Cookie

Window

获取width height
width:

var width1 = window.innerWidth;var width2 = document.body.clientWidth;var width2 = document.documentElement.clientWidth;

height:

var height1 = window.innerHeight;var height2 = document.body.clientHeight;var height3 = document.documentElement.clientHeight;

其它方法：

window.open();window.close();window.moveTo(100,200);window.resizeTo();

Screen

获取屏幕的宽高

window.screen.availWidthwindow.screen.availHeight

Location

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

一些实例:

location.hostname 返回 web 主机的域名location.pathname 返回当前页面的路径和文件名location.port 返回 web 主机的端口 （80 或 443）location.protocol 返回所使用的 web 协议（http:// 或 https://）

History

window.history.back();window.history.go()

Navigator

这里写图片描述

<body>    <div id="example"></div>    <script>        text = "<p>浏览器代号"+navigator.appCodeName+"</p>";        text+="<p>浏览器名称"+navigator.appName+"</p>";        text+="<p>浏览器版本"+navigator.appVersion+"</p>";        text+="<p>启用cookies"+navigator.cookieEnabled+"</p>";        text+="<p>硬件平台"+navigator.platform+"</p>";        text+="<p>用户代理"+navigator.userAgent+"</p>";        text+="<p>用户代理语言"+navigator.systemLanguage+"</p>";        document.getElementById("example").innerHTML = text;    </script></body>

弹窗

JS中有3种弹窗：警告框、确认框、提示框。
这里写图片描述

<body>    <input type="button" onclick="myFunction1()" value="警告框" />    <input type="button" onclick="myFunction2()" value="确认框" />    <button onclick="myFunction3()">提示框</button>    <p id="btn2"></p>    <p id="btn3"></p>    <script>        function myFunction1() {            alert("警告框");        }        function myFunction2() {            var a = confirm("确认框");            var x;            if(a) {                x = "你按下了确认键";            } else {                x = "你按下了取消键";            }            document.getElementById("btn2").innerHTML = x;        }        function myFunction3(){            var a = prompt("请输入你的名字","");            if(a!=null & a!=""){                document.getElementById("btn3").innerHTML="hello,"+a;            }        }    </script></body>

这里写图片描述

计时事件

var a = window.setInterval(function() {myTimer()}, 1000);window.clearInterval(a);

点击第一个按钮，每隔3秒弹窗就会出现。
点击第二个按钮，取消时钟。
这里写图片描述

<body>    <button onclick="myFunction1()">每隔3秒，弹出警告框</button>    <button onclick="myFunction2()">取消时钟</button>    <p id="p1"></p>    <script>        function myFunction1() {            window.setInterval(function() {                alert("3s")            }, 3000);        }        var a = window.setInterval(function() {myTimer()}, 1000);        function myTimer() {            var a = new Date();            var b = a.toLocaleTimeString();            document.getElementById("p1").innerHTML = b;        }        function myFunction2() {            window.clearInterval(a);        }    </script></body>

0 0

JavaScript基础(二)

函数

创建函数的3种方式

方法一：

方法二：匿名函数

方法三：Function构造函数

js中函数是没有重载的

验证js中函数是没有重载的

模拟java中函数的重载

全局函数

js事件

HTML绑定js事件的3种方法

方法一： 直接在ｈｔｍｌ中写ｏｎｃｌｉｃｋ

方法二： document.getElementById(“btn2”).事件属性=方法名称

方法三：document.getElementById(“btn2”).事件属性=function(){ 方法体}

js常用事件

document对象

innerHTML

表格

form

表单的3种提交方式

form自带的type=”submit”

超链接提交

button提交

BOM

Window

Screen

Location

History

Navigator

弹窗

计时事件

方法一：直接在ｈｔｍｌ中写ｏｎｃｌｉｃｋ