javaScript笔记01

Posted 大佛拈花-GoSaint

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javaScript笔记01相关的知识,希望对你有一定的参考价值。

  所谓勇气就是明知前方的路途充满了荆棘险阻,但还是义无反顾的的走下去。

  1 Javasrcipt定义的三种方式

   ·1 head中的script脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js-01</title>
    <script type="text/javascript">
        alert(hello World!);
    </script>
</head>
<body>
    你好,body!
</body>
</html>

执行顺序是先会弹出“hello World!”,然后界面显示‘你好,body!’

   ·2 超链接中直接定义

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js-02</title>
</head>
<body>
    <a href="javascript:alert(0)">我是js</a>
</body>
</html>

这个点击超链接就会执行弹出框;

   ·3 外部引入js的方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js-03</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <div id="mydiv">this is div</div>
</body>
</html>

index.js文件很简单:

alert("你好,index.js");

但是此时会存在问题的,如果js对div标签存在一定的操作,那么会出现问题:

修改index.js文件:

alert("你好,index.js");
// 获取div的id
var id=document.getElementById("mydiv");
alert(id);

此时由于先执行Javascript脚本,但是js获取div的id时还没有执行到div的标签,那么获取的div的id就是null.此时我们可以将script定义在div的下面,或者使用window.onload()函数来解决,此函数的功能是等待页面加载完毕之后才执行js脚本:

// 等待页面加载完毕执行js脚本
window.onload=function(){
    alert("你好,index.js");
    // 获取div的id
    var id=document.getElementById("mydiv");
    alert(id);
}

 

以上是关于javaScript笔记01的主要内容,如果未能解决你的问题,请参考以下文章

学习笔记:python3,代码片段(2017)

Node.js JavaScript 片段中的跳过代码

Xitrum学习笔记08 - JavaScript and JSON

JS笔记—01

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象