Blogger Information
Blog 19
fans 0
comment 1
visits 14046
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js的常用类型 和变量与常量
Original
1089 people have browsed it

js 是什么?

  1. js: JavaScript的简称
    1.1 js的版本:ES5,ECAA2015,也就是大家常说的ES6
    1.2 ECMA2016,ECMA2017,….ECMA2020
    1.3 ES6+,ES6是一个大的概念

  2. JS:是异步的单线程的脚本语言
    2.1 脚本:边解释边执行,控制台是一个浏览器内置的JS代码的解释执行程序
    2.2 脚本语言(php,python..),动态解释并直接执行
    2.3 编译语言(c/c++/java…),静态编译的语言

  3. 单线程:就是同一个时间执行一个任务(不能并发),一旦遇到非常耗时的任务,就会阻塞。

  4. 异步:js是基于时间驱动的语言,通过事件循环来完成
    4.1 事件回调方法并不会马上执行,他依赖于某个时间的到来 这些事件
    4.2 的回调方法在“任务队列”中等着

    setTimeout(); 定时器
    console.log(); 可以在浏览器查看打印结果

主线程中的程序:

  1. console.log(1);
  2. console.log(3);
  3. console.log(5)

回调中又

  1. setTimeout(()=>console.log(2));
  2. setTimeout(()=>console.log(4));

这样会慢半拍,原因是内容输出是在主线程上执行

  1. <input tyoe="text" onkeydown="console.log(this.value)">

此时,将内容输出到控制台的代码不在主线程执行,而是在任务队列中

  1. <input type="text" onkeydown="setTimeout(()=>console.log(this.value))>

Js 引入方式

  1. 直接写到html的事件属性中
    1.1 事件属性:针对事件定义它的回调方法,它的值是Js代码
    1.2 事件睡醒:on+事件名称,点击事件:onclick
  1. <buttononclick="console.log(this.innerHTML);this.style.background='red></buttton>
  • 通常会要求:将html,css,js 三者分离
  1. 脚本,将js保存为一个单独的js文件,再通过script标签引入到当前html文档中
    1.1 引入外部: 首选
  1. <script src="地址"></script>
  1. 如果说这个js脚本只在当前html文档中使用
  1. <button>点我</button>
  2. <script>
  3. //仅在当前html文档中使用js代码
  4. const btn = document.querySelector('button');
  5. btn addEventListener('click',show);
  6. function show(ev){
  7. console.log(ev.target.innerHTML);
  8. ev.target.style.background = "linghtsky';
  9. }

变量和常量

  • 变量
  1. // 声明
  2. let username;
  3. // 认值: undefined
  4. console.log(username);
  5. // 初始化:第一次赋值
  6. usernmae = "张三";
  7. console.log(usernmae);
  8. // 更新,第二次以上的赋值
  9. username = "李四”;
  10. console.log(username);
  11. // let 禁止重复声明
  12. // 将变量与初始化同步完成
  13. // 变量是可以将声明与初始化分成两步完成
  14. let emali="20000@qq.com"
  • 常量
  1. 常量是特殊的变量:只读变量
    1.1 常量声明后既不能删除也不能更新
    1.2 常量的声明与初始化必须同步完成
  1. const APP="管理系统”;
  1. 常量,变量,函数名…都叫js标识符
    2.1 只能字母,数字,下划线,$,且第一个不能是数字
    2.2 标识符是严格区分大小写的
    2.3 命名规范
    2.4 首选const常量,其次考虑let
  1. // 蛇形
  2. let user_name="zhangsan";
  3. // 驼峰式
  4. let userName="lisi;
  5. // 大驼峰,帕斯卡
  6. let UserName="xiaoming";
  7. // 匈牙利
  8. let oBody = document.body;
  9. oBody.style.background ="red";

数据类型

  1. 两种类型:原始类型,引用类型

原始类型: 都是值传递

  1. // 数值: 整数和小数
  2. let age = 38;
  3. console.log(age,typeof age);
  4. // 字符串
  5. let emali = "2000@qq.com";
  6. console.log(emali,typeof email);
  7. // 布尔
  8. let isMarried = true;
  9. console.log(isMarried,typeof isMarried);
  10. // undefined 未初始化变量的类型
  11. let gender;
  12. console.log(gender,typeof gender);
  13. // null, 空对象
  14. let obj = null;
  15. console.log(obj,typeof null);
  16. // 符号,创建对象属性的唯一标识
  17. let s Symbol('custom symbol');
  18. console.log(s,typeof s);
  19. // 原始类型都是值传递的
  20. let a = 100;
  21. // 将变量的a的值,传递到了b;
  22. let b = a;
  23. console.log(b);
  24. let a = 200;\
  25. console.log(b);
  26. // a的更新不会影响到b

类型,对象,数组,函数

1.1 他们都是引用传递
1.2 对象字面量

对象字面量

  1. let user = {
  2. // 属性,相当于变量
  3. id:1,
  4. name:'lisi',
  5. 'my email':'ty@qq.con',
  6. // 方法:函数
  7. getName:function(){
  8. //this表示当前的上下文,当前对象
  9. return '我的名字:'+ this.name;
  10. }
  11. }
  12. console.log(user.id,user.name);
  13. console.log(user['my email']);
  14. console.log(user.getName());

数组

  1. let course = [1,'js',88];
  2. console.log(conrse,typeof couyse);
  3. // 正常情况下,检查数组返回对象
  4. console.log(course instanceof Array);
  5. console.log(course instanceof object);
  6. //不用上面的 instanceof ,以后可以使用isAarray
  7. console.log(Array.isArray(conuse));
  8. // 数组中的元素索引是从0 开始,按索引来访问元素
  9. console.log(course[1]);

函数

  1. function hello(){}
  2. console.log(hello,typeof hello);
  3. console.log(hello,instanceof Object);
  4. // 对象是属性的无序集合,对象可以添加属性
  5. hello.email = '2000@qq.cn';
  6. console.log(hello.email);
  7. //
Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!