JS笔记2：JavaScript输出

2021-12-06 本文已影响0人 _百草_

1. JavaScript 简介

web的编程语言
1. 脚本语言、轻量级
2. 可插入HTML
3. 插入HTML后，可由浏览器执行
4. 易学
web开发人员必须学习3门语言之一
1. HTML定义网页的内容
2. CSS描述了网页的布局
3. JavaScript控制了网页的行为
前提：已了解HTML&CSS

2. JavaScript 用法

HTML中脚本必须位于<script>和</script> 标签之间
脚本可以放置在HTML页面的<body>和<head>部分中

通常函数放在<head>部分中，或者页面底部。同一位置，不干扰页面内容

JavaScript语句，会在页面加载时执行。如下：

<script>
    window.alter("测试中")
</script>

通常某事件发生时执行代码=>把JavaScript代码放入函数，在事件发生时调用函数

2.1 <head>/<body>中JavaScript函数

<script>
    function myAlter()
    {
        var ele = document.getElementById("bg");
        console.log(ele);
        ele.style.width="100px";
    }
</script>

<!--调用js函数-->
<div>
    <button type="button" onclick="myAlter()">点击图片变小</button>
</div>

2.2 外部的JavaScript

把脚本保存在外部文件中。外部文件通常被多个文件引用
外部JavaScript文件的文件扩展名是.js
使用时，添加src属性指定js文件的路径

<!-- django框架中使用；js文件路径：app/static/js/test.js -->
{% load static %}
<script src="{% static 'js/test.js'%}"></script>

注：历史版本中<script>中使用type="text/javascript";但是在现在浏览器及HTML5中默认脚本语言，不需要标注

3. JavaScript Chrome中运行

3.1 Console窗口

F12->打开开发者工具，选择Console
回车执行

Console

3.2 snippets

F12->打开开发者工具，选择Sources->选择Snippets

snippets

4. JavaScript 输出

window.alert()弹窗告警框
document.write()将内容写入HTML文档
innerHTML写入HTML元素
console.log()写入到浏览器的控制台

4.1 window.alert()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    function myAlert()
    {
        window.alert("123")
     }
    </script>
</head>
<body>
<button type="button" onclick="myAlert()"> 点击alter</button>
</body>
</html>

4.2 操作HTML元素&写到HTML文档

详见 JS笔记1：HTML DOM

4.3 写到控制台

console.log(text) 浏览器中显示JavaScript值

输出效果

注：调试，查找或减少bug的过程

参考：