JavaScript 基础

最新推荐文章于 2020-07-10 09:52:13 发布

苦涩2020

最新推荐文章于 2020-07-10 09:52:13 发布

阅读量185

点赞数

分类专栏： JavaScript 前端文章标签： javascript

本文链接：https://blog.csdn.net/UserPython/article/details/104707034

版权

前端同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

JavaScript

25 篇文章 0 订阅

订阅专栏

JS引入方式

内部引入：写在script标签中
外部引入：以外部文档的方式连接到当前HTML文档中
行内引入：直接放在HTML标签中，必须结合事件来使用，但是内部js和外部js可以不结合事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <!-- 1.内部引入 -->
    <script>
        alert("js内部引入")
    </script>

    <!-- 2.外部引入 -->
    <script src="JS_yinru.js"></script>
</head>
<body>
    <!-- 3.行内引入 -->
    <button onclick="alert('js行内引入')">按钮</button>
</body>
</html>

输入输出工具

显示可提示用户进行输入的对话框，简称：输入弹窗
语法：prompt(对话框中显示的纯文本，默认的输入文本);两个参数均为可选
弹出带有一条指定消息和一个确定按钮的警告框，简称：输出弹窗
语法：alert(对话框中显示的纯文本);
输出到页面，会以HTML的语法解析里面的内容
语法：document.write(参数1，参数2，参数3，…)参数将按顺序被追加到文档中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <script>
        // 输入弹窗
        // prompt();
        // prompt("请输入姓名");
        prompt("请输入姓名", "王大");

        // 输出弹窗
        alert("输出弹窗")

        // 输出到页面
        document.write("输出到页面", "内容1", "内容2");
        document.write("<span style='color:red;'>解析HTML内容</span>")

    </script>
</body>
</html>

控制台输出信息

在控制台上输出信息，浏览器按下F12打开控制台，Console即控制台
可以接受任何字符串、数字和js对象，可以看到清楚的对象属性结构，不会阻塞程序的执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script>
        console.log("控制台输出信息");

        var a = {name : "OliGit", sex : "man", age : "15"};
        console.log(a);
    </script>
</head>
<body>

</body>
</html>

引入区域和执行顺序

js可以引入文档中的任何区域，js都可以正确执行
js通常写在head区域或者body区域
js是按照语句出现的先后顺序执行，上一段代码执行完毕，才能执行下一段代码，和引入方式无关

分号的用法及资源共享

分号表示一段功能的结束
一段功能结束，有换行，可以不用分号

多个js区块可以看做一个整体，也就是说：无论是内部引入或外部引入，有多少个js区块，js区块之间可以共享资源，可以相互调用资源

JS对DOM树的阻塞

DOM：js操作页面的接口，全称为“文档对象模型”（Document Object Model）。可以简单理解成页面中的元素
DOM树：元素和元素之间的关系，可以简单理解成页面的结构
js的执行会阻塞页面结构的加载，此时DOM树是不完整的，这样在调用一些js代码时就可能报错
防止阻塞的两种方法：
a、把所有js代码放在body区域的最后
b、添加window.onload事件，表示网页加载完毕后（包括图片、css文件等等）执行的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script>
        // js对DOM树的阻塞
        // alert("123");
        
        // var abc = document.getElementById("a");
        // abc.style.color = "red";

        // 防止阻塞的两种方法
        // 方法二
        window.onload = function(){
            var abc = document.getElementById("a");
            abc.style.color = "red";
        }
    </script>
</head>
<body>
    <div id="a">js对DOM树的阻塞</div>

    <!-- 方法一 -->
    <!-- <script>
        var abc = document.getElementById("a");
        abc.style.color = "red";
    </script> -->
</body>
</html>

JS发生错误时的调试

根据js执行顺序，如果一段代码出现错误，那么这段代码之后的代码都不能执行
根据浏览器控制台错误提示对错误进行调试
根据alert()的阻塞特征，可以对错误进行调试

苦涩2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 基础

JavaScript 基础Hello JavaScript嵌入JavaScript代码的三种方式注意事项Hello JavaScript嵌入JavaScript代码的三种方式写在script标签中直接放在HTML标签中以外部文档的方式连接到当前HTML文档中<!DOCTYPE html><html lang="en"><head> &...
复制链接

扫一扫