HTML之JavaScript基础知识_基本 html javascript-优快云博客

本文链接：https://blog.youkuaiyun.com/woainijinying/article/details/52781466

本文介绍了JavaScript的基础知识，包括其作为事件驱动和基于对象的语言特性，以及如何通过BOM和DOM进行网页操作。此外，还提供了丰富的示例代码，涵盖了表单验证、页面动态效果、动态内容更改等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript基础知识：

基于事件驱动

基于对象

-BOM（window href location document）

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

基于对象AJAX

JS框架： -Jquery -Ext

JavaScript的优势：

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

页面动态效果

动态改变页面内容

脚本的基本结构

Script属性: 
charsets defer src
type

先声明变量再赋值

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

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

数据类型 ：Undefined
Null Boolean
String 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>