Javascript基础知识（一）

拼搏现实的明天。 2022-06-01 06:17 367阅读 0赞

由于之前学过Java，因此Javascript中和Java相同的特性及用法在此我会略过。

#### 一、Javascript输出 ####

![这里写图片描述][SouthEast]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js输出</title>
    </head>
    <body>
        <p id="one"></p>
        <script type="text/javascript">
            /**
            window.alert() 警告框
            document.write() 写到 HTML 文档中
            innerHTML 写到 HTML 元素
            console.log() 写到浏览器的控制台
            **/
    
            alert('helloworld');//弹出警告框，显示内容为helloworld，点击确定后才会执行下面的代码
            //将内容直接写到整个HTML文档
            document.write('helloworld');
            //改变p元素内容
            document.getElementById('one').innerHTML = "this is p";
            //在控制台输出内容
            console.log(123)
        </script>
    </body>
    </html>

#### 二、Javascript数据类型 ####

![这里写图片描述][SouthEast 1]  
注意，var可以代表上面任意数据类型。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js数据类型</title>
    </head>
    <body>
        <script type="text/javascript">
            /**
             * 字符串 (String)
             * 数字 (Number)
             * 布尔 (Boolean)
             * 数组 (Array)
             * 对象 (Object)
             * 空 (Null)
             * 未定义 (Undefined)
             */
    
            // var可以声明各种类型
            var x;               // x 为 undefined
            var y = 5;           // y 为数字
            var z = "John";      // z 为字符串
    
            // 字符串
            var carname="Volvo XC60";
            var carname='Volvo XC60';
    
            // 数字
            var x1=34.00;      //使用小数点来写
            var x2=34;         //不使用小数点来写
    
            // 布尔
            var x=true;
            var y=false;
    
            // 数组
            var cars=new Array();
            cars[0]="Saab";
            cars[1]="Volvo";
    
            var cars=new Array("Saab","Volvo","BMW");
    
            var cars=["Saab","Volvo","BMW"];
    
            // JavaScript 对象   键值对
            var person={
                firstname:"John", 
                lastname:"Doe", 
                id:5566
            };
            console.log(person.firstname)
            console.log(person["firstname"])
            // Undefined 和 Null
            // Undefined 这个值表示变量不含有值。
            // 可以通过将变量的值设置为 null 来清空变量
            var persons;
            var car="Volvo";
            car=null
        </script>
    </body>
    </html>

#### 三、Javascript函数 ####

![这里写图片描述][SouthEast 2]

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>js函数</title>
        </head>
        <body>
            <script>
                /**
                 • 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
                 • function a( 参数 ){} 声明会前置
                 • var a = function( 参数 ){} 匿名函数
                 • 函数中的 return
                 */
    
                //无参函数a的声明和调用
                function a()
                {
         
                    console.log(1111);
                    console.log(2222);
                    console.log(3333);
                    console.log(4444);
                    console.log(5555);
                    console.log(6666);
                }
                a();
                //带参函数b的声明和调用
                function b(cs1,cs2)
                {
         
                    console.log(cs1+cs2);
                }
                b("Hello,","world");
                //匿名函数的声明和调用
                var c=function (cs1,cs2,cs3)
                {
         
                    console.log(cs1+""+cs2+""+cs3);
                };
                c(1,2,3);
                //函数的return
                function d()
                {
         
                    return "This is return function";
                }
                var d1=d();
                console.log(d1);
            </script>
        </body>
    </html>

#### 四、Javascript比较和逻辑运算符 ####

基本和Java中的一致，JS特有的比较符是===和!==，前者是严格相等（即值和数据类型均相等），后者是完全不相等。例如var c = 5 ; var b = ‘5’；若用==判断则结果为true，若用===判断结果为false，因为数据类型一个为number一个为String

#### 五、Javascript中的switch ####

与Java不同的是，JS中的swith是可以和字符串匹配的，这点需要注意，例如下面代码中，从prompt输入的number均为字符串类型，因此在switch中是case “1”到case “3”。

<!DOCTYPE html>
    <html>
        <head lang="en">
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <script>
                var number=prompt("请输入您要查询的业务编号");
                switch (number)
                {
                    case "1":
                    {
                        document.write("账户余额为:。。。。。。")
                        break;
                    }
                    case "2":
                    {
                        document.write("转账余额为:。。。。。。")
                        break;
                    }
                    case "3":
                    {
                        document.write("信用额度为:。。。。。。")
                        break;
                    }
                    default:console.log("退出银行系统");
                }
            </script>
        </body>
    </html>

#### 六、Javascript中的循环 ####

唯一与Java不同的是JS中有一个特殊的循环for/in，它可以循环遍历对象  
![这里写图片描述][SouthEast 3]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js中for循环与while循环</title>
    </head>
    <body>
        <script type="text/javascript">
            /**
             *
             *  for - 循环代码块一定的次数
                for/in - 循环遍历对象
                while - 当指定的条件为 true 时循环指定的代码块
             */
    
            for( var i = 0; i < 10 ; i++ ){
                console.log('i:'+ i);
            }
            //声明并给对象赋值
            var person = {
                name : 'json',
                age : 25,
                sg: 170
            }
            //循环输出对象person内的键值对的值
            for( key in person ){
                console.log(person[key])
            }
    
            var count = 1;
            while( count < 10 ){
                count++ ;
                console.log('执行while循环');
            }
        </script>
    </body>
    </html>

#### 七、DOM ####

（1）、DOM树模型  
![这里写图片描述][SouthEast 4]  
![这里写图片描述][SouthEast 5]

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="intro">HelloWorld</div>
    
            <div id="main">
                <p>The Dom is useful.</p>
            </div>
    
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
            <div class="content">4</div>
    
            <script>
                //通过js获取html标签
                var intro=document.getElementById("intro");//通过id找html元素，id是唯一的
    
                //通过元素名找到元素
                var main=document.getElementById("main");//先找到p元素的父元素
                var p=main.getElementsByTagName("p")[0];//利用父元素和标签名找到p元素，但注意这里找到的p元素的数组，因为一个父元素下可能有很多p标签
    
                //通过class名找到元素
                var content = document.getElementsByClassName("content")[0];//由于一个可以有很懂相同class名的元素，因此返回的也是一个数组
    
            </script>
        </body>
    </html>

（2）、DOM HTML

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <a id="goURL" href="">百度</a>
            <img src="1.jpg" id="image">
            
            <div id="main" data="你好">123</div>
            <script>
                var main = document.getElementById("main");
                main.innerHTML = "HelloWorld";
    
                //alert(main.getAttribute("data"));//获取元素属性的值
                main.setAttribute("data","你也好");//修改元素自定义data属性
                main.setAttribute("dd","dada");//为元素增加元素
    
                var image = document.getElementById("image");
                //修改img标签的图片
                image.src = "2.jpg";
                //修改a标签的href属性的两种方法
                var guURL = document.getElementById("goURL");
                goURL.setAttribute("href","http://www.baidu.com");
                goURL.href = "http://www.baidu.com";
            </script>
        </body>
    </html>

（3）、DOM CSS

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="main">Hello,World</div>
            <script>
                var main = document.getElementById("main");
                //通过js修改元素的CSS样式
                main.style.color = "blue";//修改main元素内部字体颜色
                main.style.fontSize = "100px";//修改main元素内部字体大小
            </script>
        </body>
    </html>

（4）、DOM 事件  
和Android的监听器非常类似。  
![这里写图片描述][SouthEast 6]

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            
            
            <div onclick="alert('Hello World')">按钮</div>
    
            <div id="main">我是main</div>
            <div id="btn">我是btn</div>
            <script>
                var main = document.getElementById("main");
                /*第二种事件添加方式*/
                main.onclick = function()
                {
         
                    alert("main被触发了~");
                };
    
                var btn = document.getElementById("btn");
                /*第三种事件添加方式，也是最推荐的方式*/
                btn.addEventListener("click",function ()
                {
         
                    alert("btn被触发了~");
                });
            </script>
        </body>
    </html>

（5）、DOM 节点  
![这里写图片描述][SouthEast 7]

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="div1">
                <p id="p1">我是第一个p</p>
                <p id="p2">我是第二个p</p>
            </div>
            <script>
                var p = document.createElement("p");//创建标签<p></p>
                var word = document.createTextNode("我是新增的p标签");//创建的p标签的内容
                p.appendChild(word);//<p>我是新增的p标签</p>
                /*将新建的p标签放入div1中*/
                var div1 = document.getElementById("div1");
                div1.appendChild(p);
                /*删除div1中的p1节点*/
                var p1 = document.getElementById("p1");
                div1.removeChild(p1);
            </script>
        </body>
    </html>

#### 八、JS中的window对象 ####

（1）、window概念  
![这里写图片描述][SouthEast 8]

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <script>
                /**
                 • window.open() - 打开新窗口
                 • window.close() - 关闭当前窗口
                 • window.moveTo() - 移动当前窗口
                 • window.resizeTo() - 调整当前窗口的尺寸
                 */
                //根据window的概念，变量a和函数b都会成为window对象的成员
                var a = 1;
                function b()
                {
         
    
                }
                //输出window对象的属性a和方法b
                alert(window.a);
                window.b();
    
                var w;
                //创建一个大小为300x300的新窗口，第一个参数是默认访问的网址，第二个参数是名字
                function openWindow()
                {
         
                    w = window.open('', '', 'width=300,height=300');
                }
                //调整窗口大小为500x500
                function myFunction()
                {
         
                    w.resizeTo(500,500);//调整窗口大小
                    w.focus();//聚焦
                }
                //移动窗口到(x,y)为(700,500)的位置
                function moveFunction()
                {
         
                    w.moveTo(700,500);
                    w.focus();
                }
                //关闭窗口
                function closeFunction()
                {
         
                    w.close(700,500);
                    w.focus();
                }
            </script>
            <button onclick="openWindow()">创建窗口</button>
            <button onclick="myFunction()">调整窗口</button>
            <button onclick="moveFunction()">移动窗口</button>
            <button onclick="closeFunction()">关闭窗口</button>
        </body>
    </html>

（2）、window-screen  
![这里写图片描述][SouthEast 9]

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <script>
                /**
                 * screen.availWidth - 获取可用的浏览器宽度
                 * screen.availHeight - 获取可用的浏览器高度
                 */
                //显示整个浏览器的长和宽，宽（横向）和屏幕相等，但是长度（纵向）由于浏览器不包括最底部的那一栏，因此和屏幕的长度不相等。
                alert(screen.availWidth+" × "+screen.availHeight);
            </script>
        </body>
    </html>

（3）、window-location  
![这里写图片描述][SouthEast 10]  
假设我们当前页面为[http://www.imooc.com/a/b][http_www.imooc.com_a_b]  
进入浏览器控制台，在控制台中输入location.hostname，回车，会发现控制台输出了当前网址的域名：[http://www.imooc.com][http_www.imooc.com]；输入location.pathname，控制台会输出/a/b；输入location.protocol会输出http；输入location.href会输出[http://www.imooc.com/a/b][http_www.imooc.com_a_b]

（4）、window-history  
history对象用来记录当前标签访问过的页面。  
![这里写图片描述][SouthEast 11]  
例如我首先访问百度，再访问谷歌，最后访问搜狐。那么这时在浏览器控制台执行window.history，会出现history的属性，其中有一条Length属性为3，这就是当前页面访问过的页面数；这时我再执行history.back()就会返回上一页即谷歌，接着执行history.forward()就会前进到下一页即搜狐，那么如果我想从搜狐直接返回百度的话就执行history.go(-2)即可，它表示回退两个页面，同理，从百度直接访问搜狐就执行history.go(2)，它表示前进两个页面。

[SouthEast]: /images/20220601/dbb4c64d4291441bb33b1899b6914b9e.png
[SouthEast 1]: /images/20220601/a445a1b7b82945b6921cd56bef32891d.png
[SouthEast 2]: /images/20220601/1d822bdefb3d4bc39c93b7baaf687554.png
[SouthEast 3]: /images/20220601/e88a9c9d5bc1453d8c50ee8ff96b8c6b.png
[SouthEast 4]: /images/20220601/57c1823faf14497fb78ac71aab771cab.png
[SouthEast 5]: /images/20220601/6f098acef4ba4d81a228ed237b3e21c2.png
[SouthEast 6]: /images/20220601/3aa6e1e65b37449a8d265c51c3153a39.png
[SouthEast 7]: /images/20220601/09a5a20badcf4a678d7919632b89c9ae.png
[SouthEast 8]: /images/20220601/8f9a68e0ac154a71a2db999a821fe761.png
[SouthEast 9]: /images/20220601/af6206ccca14466da9d494ea83851306.png
[SouthEast 10]: /images/20220601/35d678f7f6894f0cbf181b0aa93eef04.png
[http_www.imooc.com_a_b]: http://www.imooc.com/a/b
[http_www.imooc.com]: http://www.imooc.com
[SouthEast 11]: /images/20220601/654741b6da414cd38c68b042583652a5.png