JavaWeb基础知识：JavaScript快速入门

Posted 2022-12-10 万合天宜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaWeb基础知识：JavaScript快速入门相关的知识，希望对你有一定的参考价值。

javascript快速入门

1. js生成文本

<!--
    js一般是写在head标签里面
-->
<script>
    document.write("我是天才！！");
    document.write("我是废才!!");

</script>

2. js生成标签

<script>
    document.write("我是天才<br/>");
    document.write("我是废才<hr/>");
    document.write("我是鬼才&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
    document.write("我是人才");
</script>

3. js的书写位置和执行顺序

<!--
    1，书写位置：js是一种弱类型的语言，所以语法不是特别的严格，但是一般js代码是写在head标签里面
    2， 执行顺序：js的解释执行是从上往下进行的。
-->
<script>
    alert("哈哈");
    alert("哼哼");
    alert("嘎嘎");
</script>

4. 导入外部的js文件

<!--
    使用src属性导入外部的js文件
    引入js文件需要占用一个script标签，执行代码时需要另取一个script标签
-->
<script src="../js/mylove.js"></script>

<script>
    var sum = getSum(2, 3);
    alert(sum);
    alert("我是来自于内部的js");
</script>

mylove.js:
alert("我是来自于外部的js文件代码");

function getSum(a,b)
    return a + b;

5. js中的变量申明

<script>
    // 由于javascript是一种弱类型语言，所以定义变量都是使用一个关键字var
    // 定义一个数字类型
    var number = 10;

    // 定义一个字符串
    var str = "aaabbb";

    // 定义一个数组
    var arr = [1,2,3,"haha","yue"];
</script>

6. js中的判断语句if

<script>
   // 输入1-10之间的数字，如果大了则提示输入过大，如果小了则提示输入小了，在1-10之间则把输入的数字打印出来！

    var number= prompt("输入一个1-10之间的数字");
    if(number > 10)
        alert("你输入的数字大了！");
    else if(number < 1)
        alert("你输入的数字小了！");
    else
        alert("你输入的数字为：" + number);
    
</script>

7. js中的三种消息框

<script>
    // 1 警告框
    alert("我是天才");

    // 2 确认框,返回值为true则表示确认，false表示取消
    var result = confirm("欲练此功必须自宫，你还练吗？");
    if(result)
        alert("自宫成功！");
    else
        alert("怂了吧!~?");
    

    // 3 提示框输入框
    var name = prompt("请输入名字","王八");
    if(name!=""&& name!=null)
        alert("您输入的名字为：" + name);
    
</script>

8. js中的函数

<script>

    // 求和函数
    function getSum(a, b) 
        return a + b;
    
    var sum = getSum(3, 6);
    alert("和为：" + sum);


    // 定义重载函数
    function add()
        alert("我是无参函数！");
    

    function add(i,j)
        alert("我是有参函数!");
        var sum = i + j;
        alert("有参函数和为：" + sum);
    

    add();
    // 调用无参的函数时，结果却是弹出有参的提示
    // 这是因为js中的函数不能重载，只可以有一个同名函数，多了的会被最后的一个覆盖掉

    add(2,4); // 正常输出

    add(2,4,6); // 输出和仍为6，因为函数只有两个参数，多传入的值是无效的

</script>

9. js中的两种for循环

<script>
    // 使用for循环求1-100的和
    var sum = 0;
    for (var i = 1; i <= 100; i++) 
        sum += i;
    
    alert("1-100的和是：" + sum);



     // 使用for循环打印九九乘法表
    for (var i = 1; i <= 9; i++) 
        for (var j = 1; j <= i; j++) 
            document.write(j + "*" + i + "=" + j * i + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
        
        document.write("<br/>");
    

    // for循环打印标题
    for(var i = 1; i <=7;i ++)
        document.write("<h"+i+">" +"我是"+ i + "级标题"+"<h"+i+">");
    

    // for循环遍历月份

        document.write("<br>"+"<select>");
        for(var i = 1; i <=12;i ++)
            document.write("<option>");
            document.write(i);
            document.write("</option>");
        
        document.write("</select>");    


    // 高级for,x是角标
    var str = ["haha","hdhd",99,10,'ooo'];
    for(x in str)
        alert(str[x]);
    
</script>

10. js中的异常处理trycatch()

<script>
/**
 * js中处理异常有两种方式，第一种是用try catch()语句块处理
 * 还有就是你认为代码会出错时用throw关键字把错误跑出去，然后用catch里进行捕获
 */

    var count = 3 * 8;
    haha 让你输出不了;
    alert(count);


    function add(a, b) 
        try 
            hahahaha
            return a + b;
         catch (err) 
            alert("出错了吧");
        
    

    add(1,4);

    function value()
        var sum = prompt("输入1-100的数字：");
        if(sum == "" || sum==null)
            alert("输入为空啊");
            return;
        

        try
            if(sum > 100)
                throw "e1";
            else if( sum < 1)
                throw "e2";
            else
                alert("你输入的数字是：" + sum);
            
        catch(e)
            if(e == "e1")
                alert("输入过大了");
            else if(e == "e2")
                alert("输入过小了");
            
                       
    

    value();
</script>

11. js中的window对象

<script>
    /**
     * window对面表示打开的浏览器对象，主要包括了五个子对象
     * 1. Navigator    导航器对象
     * 2. History      浏览器历史纪录
     * 3. Screen       屏幕
     * 4. Document     文档
     * 5. Location     位置
     */
</script>

<script>

    function me_Navigator()
        document.write(navigator.appCodeName + "<br/>");
        document.write(navigator.appVersion + "<br/>");
        document.write(navigator.appName + "<br/>");
        document.write(navigator.geolocation + "<br/>");
    

    me_Navigator();

    // 上一步
    function clickme()
        history.back();
    

    // 跳转
    function tiancai()
        var result = confirm("要去百度官网吗？");
        if(result)
            location.href="index.html";
        
    
</script>

12. 定时器

<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <script>

            // 电子显示时钟

            function showTime()
                var date = new Date();
                var canvas = document.getElementById("showcanvas");

                var hours = date.getHours();
                var min = date.getMinutes();
                var sec = date.getSeconds();

                canvas.innerHTML = "<h3>" + hours + ":" + min + ":" + sec + "</h3>";
            

            setInterval("showTime()",1000);


            // 倒计时显示器
            var i = 0;
            var t = 0;
            function backTime()

                var date = new Date();
                var canvas = document.getElementById("showcanvas");

                var hours = date.getHours();
                var min = date.getMinutes();
                var sec = date.getSeconds();

                canvas.innerHTML = "<h3>" + hours + ":" + min + ":" + sec + "</h3>";

                i ++ ;
                if(i == 5)
                    clearInterval(t);
                
            

            t = setInterval("backTime()",1000);



        </script>

    </head>
    <body onload="backTime()">
        <div id="showcanvas"></div>
    </body>
</html>

13. 画鸭子

图片素材如下

代码如下

    <script>
         var i = 0;
         var t;
        function image()
            document.getElementById("img").src="../img/"+ i +".png";


            i ++;
            if(i == 7)
                clearInterval(t);
                alert("画完了，好玩吧！");
            

        

        t = setInterval("image()",1000);
    </script>

</head>
<body onload="image()">
<img id="img"/>
</body>

14. 字符串对象

<script>
    var str = "我就是天才啊，无人能挡，哈哈哈哈";
    document.write("我的长度是:" + str.length + "<br/>");
    document.write(str + "<br/>");
    document.write(str.big() + "<br/>");
    document.write(str.blink() + "<br/>");
    document.write(str.bold() + "<br/>")


    var str1 = "LSDVASLEOSVN";
    document.write(str1.toLocaleLowerCase() + "<br/>");

    var str2 = "sldvjlwelvdnlsh";
    document.write(str2.toLocaleUpperCase());

</script>

15. 时间和数组

<script>
     // 时间
    var date = new Date();
    document.write(date.getFullYear() + "年");
    document.write(date.getMonth() + 1 + "月");
    document.write(date.getDate() + "日&nbsp&nbsp&nbsp");
    document.write(date.getHours() + "时");
    document.write(date.getMinutes() + "分");
    document.write(date.getSeconds() + "秒<br>");
</script>

<script>
    // 数组
    var arr = [2,4,78,34,"haha"];
    for(x in arr)
        alert(arr[x]);
    

    alert("数组最开始的长度：" + arr.length);//5
    // 给第10个值赋值
    arr[10] = 0;
    alert("数组赋值后的长度：" + arr.length);//11


    // 数组排序
    arr1 = [1,7,6,3,9,2,4,8,5];

    // 自定义排序方式
    function byNumber(a,b)
        return a-b;
    

    document.write(arr1 + "<br>")
    document.write(arr1.sort(byNumber)+ "<br>");

    // 冒泡排序法
    arr3 = [1,7,6,3,9,2,4,8,5];
    for(var i = 0; i < arr3.length-1;i++)
        for(var j = i+1;j < arr3.length;j++)
            if(arr3[i] > arr3[j])
                var temp = arr3[i];
                arr3[i] = arr3[j];
                arr3[j] = temp;
            
        
    
    document.write("冒泡排序后的结果：" + "<br>")
    document.write(arr1 + "<br>")

</script>

16. dom入门

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function init()
                document.getElementById("name").value="请输入你的名字";

            


            function _focus()
                document.getElementById("name").value="";
            

            function _blur()
                var value = document.getElementById("name").value;
                if(value == "" || value==null)
                    document.getElementById("name").value="请输入你的名字";
                else
                    document.getElementById("name").style.color="aqua";
                
            

        </script>

    </head>
    <body onload="init()">

        <!--
            onfocus:聚焦
            onblur:失去焦点
        -->
    <input type="text" id="name" onfocus="_focus()" onblur="_blur()"/>
    </body>
</html>

17. 获取html标签的方式

<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <script>
                function init()
                    // 获取id
                    document.getElementById("text").value="我是天才";

                    // 获取name
                    document.getElementsByName("name")[1].value = "20岁";

                    // 获取标签
                    document.getElementsByTagName("input")[2].value="男";

                

        </script>

    </head>
    <body onload="init()">

        输入姓名：<input type="text" name="name" id="text"/><br>
        输入年龄：<input type="text" name="name" id="text"/><br>
        输入性别：<input type="text" name="name" id="text"/>

    </body>
</html>

18. Jquery之飘逸江湖

效果图如下
数据文件如下
juery类库可以去网上下载，data.txt数据如下：

[
“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food1.jpg“,
“desc”:”九毛九”
,
“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food2.jpg“,
“desc”:”真功夫”
,
“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food3.jpg“,
“desc”:”哥哥乐”
,
“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food4.jpg“,
“desc”:”必胜客”
,
“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food5.jpg“,
“desc”:”肯德基”
,
“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food6.jpg“,
“desc”:”永和大王”
,
“picpath”:”http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food7.jpg“,
“desc”:”红荔村”

]
图片素材如下

代码如下

<head>
    <meta charset="utf-8">
    <title></title>

    <!-- 
        引入jquery类库文件
    -->
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <script>
        // 发送一个请求给服务器，把服务器上的数据拿到
        $.get(".../data.txt",function(data)
            var jsonArr = eval(data);
            for(x in jsonArr)
                var picpath = jsonArr[x].picpath;
                var desc = jsonArr[x].desc;

                // 创建图片节点
                var imgNode = document.createElement("img");
                imgNode.src = picpath;
                imgNode.setAttribute("class","img_style");
                // 创建p节点
                var pNode = document.createElement("p");
                pNode.innerHTML = desc; 
                pNode.style.color = "red";
                pNode.align = "center";

                // 创建一个div节点
                var divNode = document.createElement("div");


                divNode.setAttribute("class","div_style");

                divNode.appendChild(imgNode);
                divNode.appendChild(pNode);

                document.getElementById("container").appendChild(divNode);  
            
        );
    </script>
    <style>
        .div_style
            position: relative;
            float: left;
            margin: 20px;
        

        .img_style
            width: 150px;
            height: 150px;
        
    </style>
</head>

<body>
    <div id="container"></div>
    <p align="center"></p>
</body>

以上是关于JavaWeb基础知识：JavaScript快速入门的主要内容，如果未能解决你的问题，请参考以下文章

JavaWeb（黑马程序员：HTML部分）

JavaWeb之Bootstrap

JavaWeb--快速入门JavaScript

二JavaWeb基础(BootStrap前端框架)

JavaWeb_JavaScript基础篇