JS初体验

1.1 JS书写位置

  • 内部JS：在HTML文件中，使用<script>标签将JS代码包裹起来，放在<body>标签中，这样就可以在页面加载时执行JS代码了。

  • 外部JS：在HTML文件中，使用<script>标签的src属性，将外部JS文件链接到HTML文件中，这样就可以在页面加载时执行外部JS文件中的代码了。

1.2 JS写法

  • JS代码中的注释和C语言一样，有单行注释和多行注释。"//和/**/"

  • JS代码中的语句以分号;结尾，也可以不写，我选择不加

输入输出语法

  • document.write('output')：在页面中输出内容，可以输出HTML标签，但是会覆盖原有的页面内容。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<body>
<script>
  //1. 文档输出内容
  document.write("Hello World!");
  //2. 控制台打印输出
  console.log("Hello World!");

  //4. 输入框输入
  prompt("请输入你的名字：");
</script>
</body>

1.3 JS变量

  • JS变量的命名规则和C语言一样，但是JS变量的声明不需要指定类型，可以直接赋值。

  • let和var的区别：let是ES6中新增的关键字，用于声明变量，var是ES5中声明变量的关键字，let声明的变量只在当前代码块中有效，var声明的变量在全局范围内都有效。

1
2
3
4
5
6
7
8

<body>
  <script>
    //1. 声明一个年龄变量
    let age = 18;
    //2. 赋值一个年龄变量
    age = 20;
</script>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<body>
  <script>
    // 1.声明变量
    // 2.变量赋值(更改age的值)
    let age2 = 18; uname = 'lotus'; 
    age2 = 19;
    console.log(age2, uname);
    //打印出来的结果是19 lotus
</script>
</body>

输入输出案例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<body>
  <script>
    //输入输出用户名案例
    // 1.用户输入
    prompt("请输入你的名字：");
    // 2.内部保存数据
    let uname = prompt("请输入你的名字：");
    // 3.打印输出
    document.write(uname);
  </script>
</body>