JavaScript 用法及定义变量

缺乏、安全感 2022-12-31 11:17 225阅读 0赞

# 1、JavaScript 用法 #

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

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

--------------------

##    1.1、<script> 标签 ##

*  如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
 *  <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
 *  <script> 和 </script> 之间的代码行包含了 JavaScript:

## **1.2、在 <head> 或者 <body> 的JavaScript** ##

1.  可以在 HTML 文档中放入不限数量的脚本。
2.  脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
3.  为了语言规范通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

--------------------

## 1.3、外部引用 ##

1.  通过script标签的src属性，引入外部的js文件。
2.  外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码。

--------------------

# 2、JavaScript 变量 #

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

*  变量必须以字母开头
 *  变量也能以 $ 和 \_ 符号开头（不过我们不推荐这么做）
 *  变量名称对大小写敏感（y 和 Y 是不同的变量）

### 声明（创建） JavaScript 变量 ###

1.  在 JavaScript 中创建变量通常称为"声明"变量。
2.  我们使用 var 关键词来声明变量：
3.  var carname;
4.  变量声明之后，该变量是空的（它没有值）。
5.  如需向变量赋值，使用等号：
6.  例如：定义变量x，把1赋值给x
7.  一条语句，多个变量，可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可： var user, admin;
8.   也可以之直接定义赋值：var age=20,year=2020;

**变量赋值后，也可以重新赋值，新的值会占据变量空间。**

--------------------

## 一个现实生活的类比 ##

如果将变量想象成一个“数据”的盒子，盒子上有一个唯一的标注盒子名字的贴纸。这样我们能更轻松地掌握“变量”的概念。

例如，变量 `message` 可以被想象成一个标有 `"message"` 的盒子，在盒子里面，有一个值为 `"Hello!"`。

![20201229191126461.png][]

我们可以在盒子内放入任何值。

同样，我们也可以改变它。值可以根据需要多次改变。

let message;
    
    message = 'Hello!';
    
    message = 'World!'; // 值改变了
    
    alert(message);

当值改变的时候，先前的数据就从变量中删除了。

![20201229191217922.png][]

let hello = 'Hello world!';
    
    let message;
    
    // 将字符串 'Hello world' 从变量 hello 拷贝进 message
    message = hello;
    
    // 现在两个变量保存着相同的数据
    alert(hello); // Hello world!
    alert(message); // Hello world!

--------------------

### 3、JavaScript 输出 ###

JavaScript 可以通过不同的方式来输出数据：

*  使用 **alert()** 弹出警告框。
 *      <script>
        
                var x;
        
                x = 1;
        
                alert(x);
        
            </script>
    
    ![20201229165749327.png][]
 *  使用 **document.write()** 方法将内容写到 HTML 文档中。

![20201229183712495.png][]

使用 **innerHTML** 写入到 HTML 元素。

使用 **console.log()** 写入到浏览器的控制台。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][]

--------------------

[20201229191126461.png]: /images/20221120/e5dcd87b0a854debbc31e9b5fb746468.png
[20201229191217922.png]: /images/20221120/8438719edf604924a273881c7a0a8725.png
[20201229165749327.png]: /images/20221120/19f2cb63913a4b0fa5cba23280eae30a.png
[20201229183712495.png]: /images/20221120/42d6e13b497943f087b28b92523accae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221120/eb89a2b9c45a44f399ee31dfbb318d24.png