HTML之JavaScript基础知识

来源：互联网发布：excel窗体录入数据编辑：程序博客网时间：2024/05/29 16:58

JavaScript基础知识：

基于事件驱动

基于对象

-BOM（window href location document）

-DOM（HTML文档所有内容）操作属性/css样式、方法

基于对象AJAX

JS框架：-Jquery-Ext

JavaScript的优势：

表单验证——减轻服务器端压力

页面动态效果

动态改变页面内容

脚本的基本结构

Script属性: charsets defer srctype

先声明变量再赋值

var width var 用于声明关键字 不写var 是全局变量

同时声明和赋值变量 var go=10;

数据类型 ：UndefinedNull BooleanString Number 整形跟浮点型Object

break跳出当前循环

continue:跳出本次循环

变量不能以数字开头

下面是一段练习代码：

输入用户名、密码点击测试按钮： 弹出对话框，对话框显示

点击JSON按钮：输出JSON数据

点击获取日期：获取当前日期

点击新窗口：打开新窗口

点击增加行：点击增加一行

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/OutSideJs.js"></script>    <style>        .myStyle{            background-color: #80C8FE;            width: 500px;            height: 500px;            border: 1px red;        }    </style>    <script>        var height = 200;        function test() {            alert(width);        }        function test1() {            alert(height);        }        function load(count,str) {            for(var i=0;i<count;i++){                document.write("<h1>"+str+"</h1>");            }            var s = prompt("提示信息","输入框的默认信息");            document.write("<h2>"+s+"</h2>");        }        function cleanValue(obj) {            obj.value = "";        }        function getValue(obj) {            var s = obj.value;            if(s!=""){                //alert(s.length);                //alert(s.substring(0,2));                try{                }catch (e){                }finally {                }                var strs = s.split(",");                for(var i=0;i<strs.length;i++){                    alert(strs[i]);                }            }        }        function checkUser() {            var name =document.getElementById("name");            var pwd  =document.getElementById("pwd");            alert("用户名:"+name.value+" 密码:"+pwd.value);        }        var text = '{"employees":[' +                '{"firstName":"John","lastName":"Doe" },' +                '{"firstName":"Anna","lastName":"Smith" },' +                '{"firstName":"Peter","lastName":"Jones" }]}';        function getJson() {            var obj= JSON.parse(text);            alert(obj.employees[0].firstName+"-"+obj.employees[0].lastName);        }        function getDate() {            var date = new Date();            alert(date);        }        function del() {            var s = confirm("您确定要删除吗？");            if(s){                alert("删除成功");            }else{                alert("已取消");            }        }        //       var id = window.setInterval(function () {        //           var obj = document.getElementById("time")        //           obj.value =new Date().getMinutes()+":"+new Date().getSeconds();        //       },1000);        //       window.setTimeout(function () {        //          window.clearInterval(id);        //       },5000);        function openWin() {            window.open("http://www.baidu.com","我的百度",400,500,400,500,true);        }        function closeWin() {            window.close();        }        function getWinH() {            alert(screen.availHeight);            alert(screen.height);            alert(screen.availWidth);            alert(screen.width);        }        function setCookie(){            var d = new Date();            document.cookie = "张三丰"+":"+d.getDay();        }        function getCookie() {            var str = document.cookie;            alert(str);        }        function changeColor() {            var div1 = document.getElementById("div1");            // div1.style.backgroundColor = "#FFEFDB";            // div1.innerText="adsfasdfadsfadsfdasf";            div1.innerHTML="<h1>插入html</h1>";        }        function addRow() {            var tab1 = document.getElementById("tb1");            var row = tab1.insertRow();            var c1 = row.insertCell(0);            var c2 = row.insertCell(1);            var c3 = row.insertCell(2);            c1.innerText="a";            c2.innerText="b";            c3.innerText="c";        }        function  getXy(event) {            alert( event.clientX+":"+event.clientY);        }        function delElement() {            var tab1 = document.getElementById("tb1");            document.body.removeChild(tab1);        }        var index = 1;        function show(idx) {            var img = document.getElementById("img1");            switch (idx){                case 1:                    img.src = "../image/2d77071d07b24c80ba9f5b8db7a364fb.jpg";                    break;                case 2:                    img.src = "../image/3ebdd05a07d54730ace086c613a66f6a.jpg";                    break;                case 3:                    img.src = "../image/3be1508a17d042e8913d43233abe5d52.jpg";                    break;                case 4:                    img.src = "../image/9a9eb11e281d48498bee9fc8e1b21359.jpg";                    break;            }        }        var imgs = ['打的费','辅导费','多发点'];        function imgGo() {            setInterval(function () {                index++;                if(index>4){                    index = 1;                }                show(index);            },3000);        }        function getItem(obj) {            alert(obj);        }        function getXy1(event) {            var flow = document.getElementById("flow");            flow.style.left = event.clientX  + 5 +"px";            flow.style.top  = event.clientY  + 5 + "px";            flow.innerHTML="<h6>"+event.clientX+":"+event.clientY+"</h6>";        }    </script></head><body onmousemove="getXy1(event)" ><div id="flow" style="width: 80px;height: 50px;position:absolute"></div><h1 ondblclick="load(10,'我是h1标签')">点击我</h1><input type="text" id="time" onfocus="cleanValue(this)"       onblur="getValue(this)" value="我是输入框">用户名:<input type="text" id="name"/>密  码:<input type="password" id="pwd"/><input type="button" value="测试" onclick="checkUser()"><input type="button" value="Json" onclick="getJson()"><input type="button" value="获取日期" onclick="getDate()"><input type="button" value="删除" onclick="del()"><input type="button" value="打开新窗口" onclick="openWin()"><input type="button" value="关闭窗口" onclick="closeWin()"><input type="button" value="窗口高度" onclick="getWinH()"><input type="button" value="设置cookie" onclick="setCookie()"><input type="button" value="读取cookie" onclick="getCookie()"><input type="button" value="改变DIV背景色" onclick="changeColor()"><input type="button" value="增加行" onclick="addRow()"><input type="button" value="删除table" onclick="delElement()"><div id="div1" style="width: 200px;height: 200px;background-color: #80C8FE" onclick="getXy(event)"></div><table id="tb1" style="border:1px solid red;width: 300px">    <tr style="border: 1px solid black">        <td width="100px">1</td>        <td width="100px">2</td>        <td width="100px">3</td>    </tr>    <tr>        <td width="100px">1</td>        <td width="100px">2</td>        <td width="100px">3</td>    </tr>    <tr>        <td width="100px">1</td>        <td width="100px">2</td>        <td width="100px">3</td>    </tr></table><div style="position:absolute;width: 500px;" >    <div style="width: 500px;height: auto">        <IMG src="../image/2d77071d07b24c80ba9f5b8db7a364fb.jpg" id="img1" border="0">    </div>    <div  style="position:absolute;left:0px;bottom:5px;">        <a href="javascript:show(1)">1</a>         <a href="javascript:show(2)">2</a>         <a href="javascript:show(3)">3</a>         <a href="javascript:show(4)">4</a>    </div></div><div>    <select style="width: 100px;height: auto" onchange="getItem(this)">        <option value="0">-请选择-</option>        <option value="1">山东省</option>        <option value="2">江苏省</option>        <option value="3">浙江省</option>    </select></div></body></html>

0 0