JavaScript的入门学习

最新推荐文章于 2024-07-21 23:55:11 发布

梦雨Chili

最新推荐文章于 2024-07-21 23:55:11 发布

阅读量292

点赞数 1

文章标签：学习

本文链接：https://blog.csdn.net/qq_17434759/article/details/132389832

版权

参考：JavaScript 教程 | 菜鸟教程

前言：本文目的为总结以及学习记录

一、为什么要学JavaScript

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

二、JS的用法

需放在<script>标签中，此标签可以放在头部，也可放在body部分

例如：

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML =
          "我的第一个 JavaScript 函数";
      }
    </script>
  </head>
  <body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">尝试一下</button>
  </body>
</html>

这是放在head位置

<!DOCTYPE html>
<html>
  <body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">尝试一下</button>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML =
          "我的第一个 JavaScript 函数";
      }
    </script>
  </body>
</html>

这是放在body位置

效果图：

三、JS的输入与输出语法

常用的几种输入输出方式如下：

输出1：

document.write("直接输出到页面的内容");

注意：

向body内输出内容
如果输出的内容写的是标签，也会被解析成网页元素

输出2：

alert("页面弹窗内容输出");

页面弹出警告对话框

输出3：

console.log("浏览器控制台输出");

控制台输出语法，程序员调试使用

输入1：

prompt("请输入您的名字：");

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字，获取的输入内容是字符串

四、变量的使用

同Java，变量的使用必须先声明变量

let age;

接下来才能使用age变量

赋值之后也可以使用给予不同的值进行变量更新

  //声明了一个age变量，赋值为18
      let age = 18;
    //   变量age的值改为19
      age = 19;
    //   页面输出为19
      document.write(age);

五、数据类型

数据类型分为两种：

基本数据类型
引用数据类型

六、实战

接收班长口袋里的钱数？

若大于等于2000，请大家吃西餐。

若小于2000，大于等于1500，请大家吃快餐。

若小于1500，大于等于1000，请大家喝饮料。

若小于1000，大于等于500，请大家吃棒棒糖。

否则提醒班长下次把钱带够

//定义一个变量，同时赋值接收班长带的钱数
      let money = prompt("请输入班长带的钱数：");
      //将字符串转换为数字  因为prompt接收到的是字符串类型
      money = parseFloat(money);
      // 定义一个变量，用来存储班长的结果
      let str = "";
      // 判断班长带的钱数
      if (money >= 2000) {
        str = "请大家吃西餐";
      } else if (money >= 1500) {
        str = "请大家吃快餐";
      } else if (money >= 1000) {
        str = "请大家喝饮料";
      } else if (money >= 500) {
        str = "请大家吃棒棒糖";
      } else {
        str = "下次把钱带够";
      }
      // 输出结果
      document.write(str);