JavaScript基础

介绍

1.简称js，是一个运行在【浏览器端】的【解释型】【弱类型】【面向对象】脚本语言

• 浏览器端：环境：

  • 自带JavaScript解释器 - 打开浏览器就可以自动运行
  • 独立安装一个的js解释器 - 学习Node.js的时候

• 解释型、编译型：

  • 解释型：在程序执行之前，不需要检查语法是否正确，直接运行，碰到错误就停止 - 自由：比如：js、php...
  • 编译型：在程序执行之前，需要先检查语法是否正确，如果不正确，直接不运行 - 严格：比如：Java、C#...

• 弱类型、强类型：

  • 弱类型：变量保存的数据是可以随意的，数据类型由数据来决定 - 比如：JavaScript - 自由

    1	~	number（数字
    "1"	~	string（字符串）
    

  • 强类型：变量保存的数据，是由数据的类型来决定的 - 比如：Java - 严的

• 面向对象 - 很难

  • 以后我们可能会经常见到这种写法：

  对象名.属性名;
  对象名.方法名();
  

• 特点：

  • 可以使用一切编辑工具编写js代码
  • 解释型
  • 弱类型
  • 面向对象
  • 可以做一切css完成不了的效果（轮播、选项卡、购物车、验证...）

2.如何使用js：

• 使用方式：2种

  • 在HTML页面上书写一个script标签，再在里面书写js代码

  <script>
          //js代码
  </script>
  

  • 创建一个xx.js的文件，再在HTML进行引入 - 正式开发

  <script src="js路径">
          //千万不要在这里再写js代码
  </script>
  

• 输出的方式/打桩输出 - 帮助我们以后检查错误：3种

  • 在控制台输出日志：console.log(想要输出的东西);//console - 控制台 log - 日志，推荐：不会影响到页面
  • 在页面上输出日志：document.write(想要输出的东西);//document - 文档 write - 写，还支持标签的写法，但是是个垃圾，比如：如果搭配点击事件，会把页面上原有的东西全部替换掉
  • 在弹出框输出日志：alert(想要输出的东西);//警告框，一般般：有时候会卡住整个页面，导致用户只能看到一个白板

• 变量：创建后，可以再次修改

  • 何时使用：以后反复使用到的数据，都要提前把他保存在一个变量之中，以后使用变量名，相当于就是在使用变量的值

  • 语法：var 变量名=值;

  • 特殊：

    • 变量名其实不是随意的

    1、不能以数字开头
    2、建议驼峰命名法或下划线命名法
    3、命名要尽量的见名知意
        name,age,hobby,height,weight - 推荐：英文不好，就多学
        xingming,nianling,aihao,shengao - 不推荐，逼格低
        绝对不要：aa,ab,ac,ad,ae,af - 此变量名没有任何意义
    

    • 如果你的变量名是name，不管你保存的数据类型是什么，都会悄悄的给你转为一个字符串
    • 变量名不能是关键字
    • 变量可以只创建，不赋值，默认值为undefined，但是从今天开始我们要牢记undefined是一个垃圾，拿来做什么都要不得
    • 如果多个变量连续创建，简写：var 变量名=值,变量名=值,变量名=值,变量名=值,变量名=值;

• 常量：创建后，不允许修改了

  • 语法：const 常量名=值;
  • 其余特殊点和变量一模一样

• 了解 - 数据类型有哪些？分为两大类

  • 查看数据类型：typeof(变量);

  • 1、原始/基本/值类型：5个

    • 扩展：用户输入框：var 变量=prompt("提示文字");
    • number - 数字：取值有无数个，而且数字就是直接写，不用加任何东西（颜色是蓝色）
    • string - 字符串：取值有无数个，但是必须加上："" 或 ''（颜色是黑色）
    • boolean - 布尔：取值只有2个，分别叫true（真|对） 或 false（假|错）- 一般用于当作条件判断（颜色是蓝色）
    • null - 空，取值只有1个，就是null，唯一的作用就是用于释放变量释放内存的，节约内存空间，提升网页的性能，以后会有更好的方式（颜色是灰色）
    • undefined - 取值只有1个，就是undefined，从今天开始我们要牢记undefined是一个垃圾，拿来做什么都要不得，undefined是祖师爷犯的一个错，但是他自己不承认（颜色是灰色）

  • 引用/对象类型：有11个，可以暂时理解为有11个对象（属性和方法）等待我们学习

• 运算符：

  • 算术运算符：+ - * / %

  • 特殊：

    • %：取余，俗称模，两个数相除，不取商，而是取除不尽的余数

      作用：
         1、*任意数%2 - 判断奇偶数
         2、取出某个数字的后n位
              1234%10  ->  4
              1234%100 -> 34
      

    • 带有隐式转换：悄悄地会将数据类型转换，发生变化，默认：都是左右两边转为数字再运算

      true->1
      false->0
      undefined->NaN
      null->0
      "1000"->1000
      "1000px"->NaN - 暂时解决不了，只有等待以后学习了强制（显示）类型转换才能解决
      
          NaN：:Not A Number：不是一个数字，但是他确实是数字类型，不是一个有效数字，没有优点，但是有两个缺点：
                1、参与任何的算术运算结果仍为NaN
                2、参与任何的比较运算结果都是false
      

    • +运算特殊：如果碰上一个字符串，左右两边都会悄悄的转为字符串，+运算不再是+运算，而是拼接操作

  • 比较/关系运算符：> < >= <= == != === !==

    • 结果：一定是一个布尔值

    • 带有隐式转换：默认左右两边都会悄悄转为数字再比较大小

    • 特殊：

      1、如果参与比较的左右两边都是一个字符串，则会按位PK每个字符的十六进制的unicode号（十进制ASCII码）;
              数字0-9<大写A-Z<小写a-z<汉字
              常识：汉字的第一个字：是 一  unicode号是 4e00 ascii是19968
                   汉字的最后一个字：是 龥  unicode号是 9fa5 ascii是40869
      2、NaN参与任何的比较运算结果都是false，带来了一个问题：如何判断x是不是NaN，我们不能使用普通的比较运算去判断
              !isNaN(x)
              结果是一个布尔值：true->说明是有效数字   false->说明是NaN
      3、undefined==null//true
              解决：全等：不带隐式转换的等值比较===，要求值相同并且数据类型也要相同
              !==：不带隐式转换的不等比较
      
      

  • 赋值运算符：= += -= *= /= %=

    • =：赋值：将=右边的东西，保存到=左边的变量名之中 -后面5个可以理解为是一种升级写法，运算后再保存回变量本身，举例：i=i+1 ==> i+=1;

  • 逻辑运算符：综合比较 - 用于写条件

    • &&：与（并且）

      全部条件都满足，结果才为true
      只要一个不满足，结果就为false
      

    • ||：或者

      全部条件都不满足，结果才为false
      只要一个满足，结果就为true	
      

    • !：颠倒布尔值

  • 自增自减运算符：++ --

    • 自增：固定的每次只能+1

    • 累加：+=每次加几由程序员自己决定

    • 前++ 和 后++的区别？

      如果单独使用，前++和后++，没有任何区别。
      但是如果参与了其他表达式，变量始终都会+1，但是前++和后++的【返回结果】不同
              前++，返回的是加了过后的新值
              后++，返回的是加了之前的旧值
      

  • 位运算：(底数只能是2)

    • 左移：m<<n，读作m左移了n位，翻译：m*2的n次方
    • 右移：m>>n，读作m右移了n位，翻译：m/2的n次方