JavaScript基本语法(一)

1.浏览器上输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.html</title>
    <script>
        // // 浏览器上输出
        document.write("js输出:hello world")
</head>
<body>
</body>
</html>

结果
浏览输出结果


2.弹出消息框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.html</title>
    <script>
        // 弹出消息框
        window.alert("弹出消息框")
    </script>
</head>
<body>
</body>
</html>

结果
浏览器输出结果
3.外部加载js,并解决相关js与页面加载先后的问题
由于网页页面是从上往下加载的,因此当js文件或代码需要操作html的boy中的html标签,且js代码或文件比这些标签先出现(即位于这些标签代码的上面),就会报空对象(null)错误,如下:
html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.html</title>
    <!-- 加载外部脚本文件 -->
    <!-- <script src="js/hello.js"></script> -->
</head>
<body>
    <div id="div1"></div>
</body>
</html>

外部js文件hello.js:(也可以是内部或嵌入式的js)

// 编写脚本程序
 //第一步:找到id为div1的标签
 //let 定义一个变量
 let div1 = document.querySelector("#div1");
 //第二步:设置标签包裹的数据
 //设置id为div1的标签的内容
 div1.innerHTML = "hello world";
// 控制台输出
console.log(div1)

报错
在这里插入图片描述
解决方法一: 将js文件或js代码写在所操作html标签的后面,因为js代码可以出现在html页面的任何地方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.html</title>
</head>
<body>
    <div id="div1"></div>
</body>
</html>
<!-- 加载外部脚本文件 -->
<script src="js/hello.js"></script>

结果正确:
在这里插入图片描述
在这里插入图片描述
解决方法二:
可以先等页面加载后再执行js文件,页面加载完毕会触发load事件,load事件只能注册一个,如果有多个,执行最后一个。
外部js文件hello.js:

window.addEventListener('load',function(){
   // 或简写成window.onload = function(){}
    let div1 = document.querySelector("#div1");
    div1.innerHTML = "hello world";
})

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.html</title>
    <!-- 加载外部脚本文件 -->
    <script src="js/hello.js"></script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

运行结果正确:
在这里插入图片描述
在这里插入图片描述