夜光带你走进JavaScript（四）擅长的领域

最新推荐文章于 2019-11-14 08:42:58 发布

GeniusTeam-夜光

最新推荐文章于 2019-11-14 08:42:58 发布

阅读量133

点赞数

分类专栏： Genius-JavaScript

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102547018

版权

Genius-JavaScript 专栏收录该内容

59 篇文章 2 订阅

订阅专栏

夜光序言：

古韵幽香，书卷涵芳。桃花落，闲池阁，菊花香，涵芳系。

正文：

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

您无需理解上面的代码。只需明白，浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码

以前的例子

可能会在 <script> 标签中使用 type="text/javascript"。

现在已经不必这样做了。

JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body> 中的 JavaScript

嗯唔，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<p>
    JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落</p>");
</script>
<p>
    我们只能在 HTML 输出流中使用 <strong>document.write</strong>。
    文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

嗯唔：使用 window.alert()

你可以弹出警告框来显示数据：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<h1>嗯唔，页面</h1>
<p>段落</p>
<script>
    window.alert(5 + 6);
</script>

</body>
</html>

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<h1>嗯唔~~ Web 页面</h1>
<p id="demo">第一个段落</p>
<script>
    document.getElementById("demo").innerHTML="段落已修改";
</script>

</body>
</html>

以上 JavaScript 语句（在 <script> 标签中）可以在 web 浏览器中执行：

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。

innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

【第一个段落 → 被修改成了 段落已修改】

嗯唔：写到 HTML 文档

出于测试目的，我们将JavaScript直接写在HTML 文档中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<h1>第一个 Web 页面</h1>
<p>第一个段落</p>
<script>
    document.write(Date());
</script>

</body>
</html>

使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

点击一下按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<h1>第一个 Web 页面</h1>
<p>第一个段落</p>
<button onclick="myFunction()">点我</button>
<script>
    function myFunction()
    {
        document.write(Date());
    }
</script>

</body>
</html>

嗯唔~~写到控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式，在调试窗口中点击 "Console" 菜单。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<h1>第一个 Web 页面</h1>
<p>
    浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
    a = 1100;
    b = 11;
    c = a + b;
    console.log(c);
</script>

</body>
</html>

window.alert(5+6) 与 window.alert("5+6") 输出的值是不一样的。

window.alert(5+6) 会输出 11，而window.alert("5+6") 会输出 5+6。

这是因为当用引号时会认为引号中是字符串，从而直接将引号中的内容打印出来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<h1>第一个 Web 页面</h1>
<p>
    浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
    a = 1100;
    b = 11;
    c = a + b;
    console.log(c);
</script>

</body>
</html>

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进JavaScript（四）擅长的领域

夜光序言：古韵幽香，书卷涵芳。桃花落，闲池阁，菊花香，涵芳系。正文：JavaScript 用法HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。<script> 标签如需在 HTML 页...
复制链接

扫一扫

专栏目录