JavaScript 教程
web.png
JavaScript主要三部分组成：

  • 核心（ECMAScript）
  • 文档对象模型（DOM）

  • 浏览器对象模型（BOM）

    核心（ECMAScript）

    《ECMAScript 6 入门教程》

    规定了这门语言的基本组成部分，主要以下几个部分组成

  • 语法

  • 类型
  • 语句
  • 关键字
  • 保留字
  • 操作符

  • 对象

    文档对象模型（DOM）

    DOM的功能简答说就是可以获取到我们写的所有的html标签，并给标签添加或删除样式，事件等
    这些功能事件基于下面的几种接口

  • DOM遍历和范围：可以找到页面中所有的标签。

  • DOM事件：添加事件等。

  • DOM样式：更改页面中所有元素的样式。

    浏览器对象模型（BOM）

    BOM只会处理跟浏览器相关的东西，比如 ：

  • 弹出新窗口

  • 移动，缩放，关闭浏览器窗口
  • 给用户提供显示器分辨率的功能
  • 提供浏览器信息

    JavaScript书写位置

    内部或外部，跟css类似
  1. // script标签嵌入JavaScript代码
  2. <script>
  3.     // JavaScript代码
  4.     let name = "Bob";
  5.     function(){
  6.         console.log("我的名字叫："+name);
  7.     }
  8. </script>

外部引入

  1. <script src="index.js"><script>

注意，写在body内，而且是末尾

js入门

模板字符串

一般字符串拼接用+，比较繁琐

  1. let firstName = '胡';
  2. let lastName = '雪岩';
  3. let say = '大家好，我姓' + firstName + '，名' + lastName;
  4. console.log(say);

模板字符串可以简化书写，核心是用反引号 ( )和占位符 ${ expression }，反引号的作用是将字符串和变量包起来，占位符就是插入变量，for example

  1. let firstName = '胡';
  2. let lastName = '雪岩';
  3. let say = `大家好，我姓${firstName}，名${lastName}`;
  4. console.log(say);

模板字符串还可以使用表达式：

  1. let number1 = 20;
  2. let number2 = 10;
  3. console.log(`两个数的和是：${number1 + number2} 
  4. 两个数的差是：${number1 - number2} 。`);

使用三元表达式

  1. let str = `这里是${false ? '浙江' : '江苏'}`;
  2. console.log(str); // 江苏
  4. let str = `这里是${false ? '浙江' : `江苏-${true ? '南京' : '常州'}`}`;
  5. console.log(str); // 这里是江苏-南京
  7. let str = `这里是${
  8.   true ? `浙江--${true ? '杭州' : '丽水'}` : `江苏-${true ? '南京' : '常州'}`
  9. }`;
  11. console.log(str); // 这里是浙江--杭州

使用场景一

根据屏幕宽度来动态改变样式

  1. // 定义屏幕的宽度，当然这个宽度是根据window的api去获取的
  2. let screen = 760;
  3. // 判断屏幕是大屏还是小屏，这里我们认为大于760px的就是大屏
  4. function isLargeScreen() {
  5.   return screen > 800;
  6. }
  7. // 定义元素的排列方式，大屏row排列，小屏column排列
  8. // 具体什么排列方式，是根据屏幕大小决定的
  9. let item = {
  10.   isCollapsed: screen > 800
  11. };
  12. // 这里我们就要根据上面的信息来动态的获取类名（多个）
  13. const classes = `header ${
  14.   isLargeScreen() ? '' : `icon-${item.isColumn ? 'column' : 'row'}`
  15. }`;
  16. console.log(classes);

使用场景二

利用js 组装HTML代码

  1. let htmlCode = `
  2.     <img src='' />
  3.     ${
  4.       true
  5.         ? `<img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg' />`
  6.         : `<img src='' />`
  7.     }
  8. `;
  9. console.log(htmlCode);
  10. // <img src='' />
  11. //    <img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg' />