JavaScript1 简介与JavaScript出现的位置

1 简介JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易学习。

2 JavaScript出现的位置

2.1 内联式

在body里用<script>标签对来表示一个代码区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
    function myFunction(){
        document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
    }
</script>
</body>
</html>

2.2 嵌入式

在头部用<script>标签对来表示一个代码区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function myFunction(){
            document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
        }
    </script>
</head>
<body>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

2.3 外部式

在外部js文件里写js代码(注意千万不要加<script>标签)同时在html文件里有一个指向外部文件的链接,这个链接文件的位置可以是body中或者head中

    <script type="text/javascript" src="test.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="test.js">
    </script>
</head>
<body>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>

</body>
</html>

3 常见的输出方式

3.1 弹出消息框输出

1.alert(输出内容);
2.实例:输出helloworld
在这里插入图片描述

<body>
<script>
    alert("hello world")
</script>
</body>

3.2 在网页内容中输出

3.2.1 在当前位置输出消息

1.document.write()
2.如果页面已经加载完成了调用,会覆盖这个页面的内容,如果是在页面加载时调用,则会在当前位置输出值。
下面是一种在页面加载时调用

<body>
<p>这是一个段落</p>
<script>
    document.write(Date());
</script>
</body>

3.2.2 修改某个标签的值

  1. document.getElementById(“id名称”).innerHTML = 修改内容";
    2.实例
    在这里插入图片描述
<body>
<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
    document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>

3.3 在控制台输出

浏览器按F12,选择进入控制台。
1.console.log(输出内容)
2.实例
在这里插入图片描述

<body>
<script>
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
</script>
</body>

猜你喜欢

转载自blog.csdn.net/weixin_44055272/article/details/89105214
今日推荐