JS常用的数据类型.变量与常量的声明与赋值!

js引入方式

1. 直接写到html的事件属性中

事件属性: on + 事件名称, 点击事件: onclick

<button onclick="show(this)">Click me</button>

<script>
 function show(ele) {
 console.log(ele.innerHTML);
 ele.style.background = 'yellow';
}
</script>

2. 外部脚本,将js保存为一个单独的js文件,再通过script标签引入到当前html文档中

<button>Click me</button>

<script src="script.js"></script>

外部JS文件代码

const btn = document.querySelector('button');
btn.addEventListener('click', show);  
function show(ev) {
console.log(ev.target.innerHTML);
ev.target.style.background = 'lightgreen';
}

3.只在当前html文档中使用

<button>Click me</button>

<script>
    const btn = document.querySelector('button');
    btn.addEventListener('click', show);
    function show(ev) {
        console.log(ev.target.innerHTML);
        ev.target.style.background = 'lightskyblue';
     }
</script>

变量与常量的声明与赋值

1. 变量

<script>
        // 声明
        let username;
        // 默认值: undefined
        console.log(username);
        // 初始化: 第一次赋值
        username = '小明';
        console.log(username);
        // 更新: 第二次以上的赋值
        username = '小红';
        console.log(username);
        // let 禁止重复声明
        // 将声明与初始化同步完成
        // 变量是可以将声明与初始化分成二步完成
        let email = 'email@qq.com';
</script>

2. 常量

常量是特殊的变量: 只读变量
常量声明后即不能删除,也不能更新
常量的声明与初始化必须同步完成

<script>
const APP = '用户管理系统';
</script>

常量,变量,函数名…都叫js标识符

1. 只能 字母 数字 下划线 $ 且第一个不能是数字

2. 标识符是严格区分大小写的

3. 命名规范

1. 蛇形,下划线
   let user_name = ‘小刚’;
2. 驼峰式:
   let userName = ‘小吴’;
3. 大驼峰,帕斯卡
   let UserName = ‘小妹’;
4. 匈牙利式
   let oBody = document.body;
   oBody.style.background = ‘lightgreen’;

实际工作中,尽可能首选const常量使用,其次才考虑let

JaveScript常用的数据类型

1.原始类型

原始类型：值传递、数值、字符串、布尔、undefind、null、symbol

数值: 整数和小数

    let age = 38;
    // console.log(age, typeof age);

字符串

    let email = 'tp@php.cn';
    // console.log(email, typeof email);
    // email = '邮箱:' + email;
    // console.log(email);

布尔

    let isMarried = true;
    // console.log(isMarried, typeof isMarried);

undefined，未初始化变量的默认值

    let gender;
    // console.log(gender, typeof gender);

null,空对象

    let obj = null;
    // console.log(obj, typeof null);

符号, 创建对象属性的唯一标识

    // let s = Symbol('custom symbol');
    // console.log(s, typeof s);
    // 原始类型都是值传递的
    let a = 100;
    // 将变量的a的值,传递到了b中
    // let b = a;
    // console.log(b);
    // a = 200;
    // console.log(b);
    // a的更新, 不会影响到b的值
`

2.引用类型

引用类型：引用传递、对象、数组、函数

对象

<script>
  let user = {
      id: 1,
      name: '张三',
      'my email': 'mail@email.com',
      getName: function () {
          return '我的名字：' + this.name;
      }
  }
  console.log(user.id, user.name, user['my email']);
  console.log(user.getName());
  </script>

数组

let course = [1, 'js', 88];
// 正常情况下,检查数组返回对象
console.log(Array.isArray(88));
// 数组中的元素索引是从0开始,按索引来访问元素
console.log(course[1]);

函数

  <script>
  function hello() {
      console.log(test);
  }
  console.log(hello, typeof hello);
</script>