JS学习week01-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .pink {
      background-color: pink;
    }
  </style>
</head>
<body>
  <button class="pink">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    let bts = document.querySelectorAll('button')
    for (let i = 0; i < bts.length; i++){
      bts[i].addEventListener('click', function() {
        document.querySelector('.pink').className = ''
        this.className = 'pink'
      })
    }
  </script>
</body>
</html>

1.2 JS书写位置

1.2.1 内部JavaScript

直接写在html文件里，用script标签包住
理论上<script></script>写在哪里都可以，但规范写在<body></body>中

<body>
  <script>
    //页面弹出警示框
    alert("内部js")
  </script>
</body>

注意：我们将script放在html文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载html，如果先加载的JavaScript期望修改其下方的html，那么它可能由于html尚未被加载而失效。即：将JavaScript放在所有html的下方。

1.2.2 外部JavaScript

代码写在以.js结尾的文件里。通过script标签，引入到html页面中。

1.2.3 内联JavaScript

代码写在标签内部（目前不要求掌握，以后学习vue的时候才会相对常用）

<body>
  <button onclick="alert('内联js')">点击我了解更多</button>
</body>

注意：在JavaScript编写中，可以省略结束语;（英文的分号）。所有代码要么全部有;，要么全都没有，不然会报错。

1.3 JavaScript输入输出语法

输入和输出也可以理解为人与计算机的交互。用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这就是一次输入和输出的过程。

1.3.1 输出语法①：

// 1.文档输出内容
    document.write('我是标签')

作用：向body内输出内容

注意：如果输出的内容写的是标签，则其会被解析成网页元素，例：

document.write('<h1>我是标题</h1>')

1.3.2 输出语法②

// 2.页面弹出警示框
    alert('输入内容')

作用：页面弹出警示框（前面举例过，此处不再给结果图片）

1.3.3 输出语法③

// 3.控制台打印 输出 给程序员
    console.log('日志')

作用：控制台输出语法，一般是程序员调试时使用

1.3.4 输入语法①

// 1.对话框输入
    prompt('请输入您的姓名：')

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

注意JavaScript代码执行顺序：

1.按照HTML文档流顺序执行JavaScript代码；

2.alert和prompt会跳过页面渲染先被执行（目前只需了解）

1.4 字面量

1.4.1 什么是字面量？

在计算机科学中，字面量（literal）是在计算机中描述事/物,例如：

工资1000————1000就是数字字面量；
‘js牛逼’————是字符串字面量；
[]数组字面量、{}对象字面量...

二、JS变量

2.1 变量是什么？

变量是计算机存储数据的“容器”。

注意：变量不是数据本身，它仅仅是一个用于存储数据的容器。

2.2 变量的基本使用

1.声明变量：

想要使用变量，首先需要创建变量（声明变量或者定义变量）—— let 变量名

声明变量有两部分组成：声明关键字、变量名；
let即为关键字，所谓关键字是系统提供的专门用来声明/定义变量的词语

2.变量赋值：

定义了一个变量之后，我们就能给他赋值。即在变量名后跟上一个"="，以及数值。

注意：我们是通过变量名获取数据。

<script>
    // 1.声明变量
    let age;
    // 2.赋值
    age = 18;
    // 3.获取据变量数据
    alert(age);
  </script>

3.声明的同时直接赋值（变量的初始化）

let age = 18;
    alert(age);

4.更新变量：

变量赋值后，还可以通过简单地给他一个不同的值来更新。

let age = 18;
age = 19;

let 不允许多次声明一个变量，即不能 let age = 19;

5.声明多个变量(不推荐)

let age = 18, name = 'ming';
console.log(age,name);

2.3 变量命名规则与规范

不能使用关键字或者JavaScript内一些有特殊含义的英语词汇；
只能用下划线、字母、数字、$组成且数字不能开头；
字母严格区分大小写，如Age和age是不同的变量；
起名最好有意义方便后续查看；
遵守小驼峰命名法，userName。

三、数组

有些内容与其他语言类似，就不过多解释。

<script>
    let arr = ['西游记','三国演义','红楼梦','水浒传'];
    console.log(arr);
    document.write(arr[1]);
    console.log(arr.length);
 </script>

四、常量

概念：使用const声明的变量称为常量。
使用场景：当某个变量永远不会改变的时候，就可以用const声明而不是let；
命名规范：与变量一致。

<script>
    const pai = 3.1415926;
    console.log(pai);
  </script>

注意：常量不允许重新赋值，且声明的时候必须赋值。

五、数据类型

JS数据类型整体分为两大类：基本数据类型、引用数据类型

基本数据类型
number	数字型
string	字符串型
boolean	布尔型
undefined	未定义型
null	空类型

引用数据类型
object	对象

JS是一门弱数据类型的语言（Java是强数据类型），命名变量：let num ；我们无法判断num是什么数据类型，因为我们只是给他一个名字并没有特定的类型。而在Java中，int num；我们可以轻松的知道这是一个整数型变量。

5.1 字符串类型

通过单引号（''）、双引号（""）和反引号（``）包括的都是字符串类型的。

let uname = prompt('请输入你的姓名');
let age = prompt('请输入你的年龄');
// 方法一
document.write('大家好，我叫' + uname + ',今年' + age + '岁了');
// 方法二
document.write(`大家好，我叫${uname},今年${age}岁了`)

注意：模板字符串必须用反引号``括起来

5.2 未定义类型

未定义是比较特殊的类型，只有一个值undefined。

1. 在只声明变量，不赋值的情况下，变量默认的值为undefined，一般很少直接为某个变量赋值为undefined。

2. 此外，我们在开发中经常声明一个变量，等待传输过来的数据。如果我们不知道这个数据是否传递过来，此时我们也可以通过监测这个变量是不是undefined来判断用户是否有数据传递过来。

5.3 空类型

JS中的null仅代表一个“空”、“无”或“值未知”的特殊值。

null与undefined的区别：

①undefined表示没有赋值；

②null表示赋值了，但是内容为空。

5.4 检测数据类型

通过typeof关键字检测数据类型，它支持两种语法形式：

①作为运算符：typeof x

②函数形式：typeof(x)

5.5 类型转换

5.5.1 隐式转换（不明确，需要靠经验总结）

+号两边只要有一个是字符串，都会把另一个转换成字符串。
除了+号以外的字符串，例如 - 、 * 、 / 等都会把数据转成数字类型
任何数据和字符串相加结果都是字符串
+号座位正号解析可以转换成数字型console.log(+'123')，此时输出是数字型的123

5.5.2 显示转换

Number（数据）

转换成数字类型。

如果字符串中有非数字，转换失败时结果为NaN（Not a Number）。

NaN也是number类型的数据，表示非数字

parseInt（数据）

只取前面开头的整数部分。如果有其他类型的数据则那部分会被忽略

console.log('12px') ------ 12

console.log('12.64px') ------ 12

console.log('abc12px') ------ NaN

parseFloat（数据）

可以保留小数。其他规则与parseInt类似

六、实战案例

需求：用户输入商品价格、商品数量和收获地址，页面自动打印订单信息。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
    }
    
    table {
      /* 合并香菱边框 */
      border-collapse: collapse;
      height: 80px;
      margin: 0 auto;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

    table,
    th,
    td {
      border: 1px solid #000;
    }

  </style>
</head>
<body>
  <!-- table>tr>th*5 -->
  <!-- 通过以上快捷方法可以快速得到 -->
   

  <script>
    // let num1 = +prompt('请输入第一个数：');
    // let num2 = +prompt('请输入第二个数：');
    // alert(`他们相加为${num1 + num2}`)

    let proPrice_single = +prompt('请输入商品价格：');
    let proNumber = +prompt('请输入商品数量：');
    let proPrice_totle = proNumber * proPrice_single;
    let addr = prompt('请输入收货地址：');

    // 页面渲染
    document.write(`
      <h2>订单确认</h2>
      <table>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>总价</th>
          <th>收货地址</th>
        </tr>
        <tr>
          <td>小米手机青春PLUS</td>
          <td>${proPrice_single}元</td>
          <td>${proNumber}</td>
          <td>${proPrice_totle}元</td>
          <td>${addr}</td>
        </tr>
      </table>
    
    
    `);
  </script>
</body>
</html>