JS笔记2：JavaScript输出

作者: _百草_ | 来源:发表于2021-12-06 15:59 被阅读0次

JS笔记2：JavaScript输出
JavaScript ☞ day1
6. js 数据类型运算符 Math
JavaScript
JavaScript学习笔记之数组（二）
2018-11-27
javascript语法
Vue.js进阶
JavaScript入门
JavaScript入门（一）

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>