JavaScript

js的三种引入方式

01    <!-- 1. 内部javascript引入 -->
      <script>
      alert('键盘敲烂，工资过万')
      </script>

02    <!--2. 外部javascript引入
      src中引入js文件的路径
      注意：外部引入js的方式，会忽略写在script标签中的内容-->
      <script src="./my.js"></script>

03    <!-- 3. 行内javascript引入(了解) -->
      <button onclick="alert('键盘敲烂，工资过万aaaaaa')">点我发送验证码</button>

js中的注释

// 单行注释 ctrl + /
/* 多行注释、块注释 ctrl + shift + a */

js结束符号

  // 语句结尾; 代表当前语句结束 可以省略

输入和输出语法

   // 1. 利用 document.write()在HTML文档中输出 '键盘敲烂，月薪过十万'
 document.write('键盘敲烂，月薪过十万')

  // 2. 利用 alert()警示框 输出 '键盘敲烂，月薪过十万'
 alert('键盘敲烂，月薪过十万')

  // 3. 利用 console.log() 控制台输出 '键盘敲烂，月薪过十万'   简写log
 console.log('键盘敲烂，月薪过十万')
 

  // 4. 利用 prompt() 弹出式输入框提示用户输入年龄
 prompt('键盘敲烂，月薪过十万')

变量

  // 1. 声明变量语法：let 自定义的变量名 
        let age
        age = 18
        document.write(age) 
        控制台输出 18
 
  // 2. 变量的 初始化  声明变量的时候直接赋值
        let age = 18
       document.write(age) 
       控制台输出 18
  
  // 3. 声明多个变量 用逗号分隔
        let a = 1, b = 2, c = 3
        document.write(a)
        document.write(b)
        document.write(c)
        控制台输出 123

用户输入姓名案例

   // 需求：浏览器中弹出对话框：请输入姓名
   // 然后在HTML文档中输出刚才用户输入的姓名
     步骤：
     1. 先声明一个变量存储用户输入的数据
     2. 利用输出语句在文档中输出已经存储了数据的变量
     let username = prompt('请输入姓名')
     document.write(username)
     控制台输出客户端输入的姓名

交换变量案例

    let num1 = '10'
    let num2 = '20'
    temp = num1
    num1 = num2
    num2 = temp
    console.log(num1,num2);
    控制台输出20 10

例如：输出用户信息：

// 需求：让用户输入自己的名字、年龄、性别，再输出到网页
 let userName = prompt('请输入您的姓名')
 let age = prompt('请输入您的年龄')
 let gendar = prompt('请输入您的性别')
 document.write(userName,age,gendar)

let和var的区别

  // let 的存在就是为了解决var的一些问题
  // 1. var 可以先使用 再声明
  // 2. var 可以重复声明  弊端：你设置了一个变量名为a，但是你同事并不知道你给a设置过变量名，也重新声明了一次，结果你的数据就被你同事的覆盖了)

数组的使用

  let arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日',]
  console.log(arr[arr.length-1]);
  console.log(arr[6]);

数字类型与字符类型

let num1=1e3    （把e当成0看）
let userName1 = `李狗蛋`
let userName2 = '李狗蛋"爱"张翠华'
console.log(userName1,userName2);
console.log(num1);
控制台输出 李狗蛋“爱”张翠华
控制台输出 1000

字符串拼接

// 利用 + 做拼接
let username = '李狗蛋'
let age = 18
console.log(`大家好，我叫${username},今年${age}岁了`);
控制台输出 大家好，我叫李狗蛋，今年18岁了

模板字符串

// 模板字符串  `字符串${变量}字符串`
let name = prompt('请输入您的姓名')
let age = prompt('请输入您的年龄')
document.write(`大家好，我叫${name},今年${age}岁了`)

布尔型undefined和null

// 1. 布尔型 true false 
// 李狗蛋问张翠花：你爱不爱我？ 两个回答：爱 或者 不爱
let islove = true
islove = false
console.log(islove);
控制台输出 false

// 2. undefined  只声明不赋值
let age
console.log(age);

// 3. null  空   为对象类型obj
let name = null
console.log(name);

检测数据类型

//的什么类型  string  number Boolean null
let num = 1000
console.log(typeof num + '200')
控制台输出number

数据类型转换

let num = prompt('请输入一个数字')
console.log(num, typeof num)
控制台输出  num string

显式类型转换

 // Number(数据)
console.log(Number(`123.66666asdf`));
控制台输出 NN
console.log((Number(`123456`)));
控制台输出 123456

// parseInt() 转换为数字型，只保留整数，没有四舍五入
console.log(parseInt(`456.123`));
控制台输出 456

// 转换为数字型，会保留小数
console.log((parseFloat(`123.6666666`)));
控制台输出 123.6666666

// 区别：
// 1.Number() 只能放数字类型的字符，不能放abc这样的
// 否则返回的是 NaN   not A number

// parseFloat 经常用于过滤px单位

转换为字符串

 let age = 10
// String(数据)
console.log(String(age));
控制台输出 10
console.log(age.toString());
控制台输出 10

简单加法器

let num1 = +prompt('请输入第一个数字')
let num2 = +prompt('请输入第二个数字')
document.write(num1 + num2)
控制台输出 输入的数字1+输入的数字2的和
例如输入1和2控制台输出3

变量数据类型

JavaScript