一、JS简介

 

JavaScript是一种运行在客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
浏览器就是一种运行JavaScript脚本语言的客户端，JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分。

二、JS的基础知识

1、JS的编写位置

(1) 将JS写到外部文件

可以将js写到外部文件，然后通过script标签引入

注：script 一旦引入外部标签就不能在内部写

        如果需要则创建一个新的script标签

(2) 将js写到script标签中

<script type="text/javascript">alert("在script标签中");
</script>

(3) 将js代码编写到onclick属性中

 可以将js代码编写到onclick属性中

 当我们点击按钮时，js代码执行

 注：虽然可以写到属性中，但是他们属于结构与行为耦合，不方便维护

<button onclick="alert('讨厌，点我干嘛')">点我一下</button>

特别

    <!-- 可以将js代码写在超链接的href属性中，这样当点击超链接时会执行js代码 --><a href="javascript:alert('让你点你就点！');">也点我一下</a>

2、JS基本知识

 JS的基本语法

        /*多行注释*/// 单行注释/** 1、在js中严格执行大小写* 2、js中每一条语句以分号结尾*    如果不写分号浏览器自己添加，会消耗资源系统，也可能会加错使出错* 3、js中会忽略多个空格和换行，可利用空格或换行进行代码格式化*/

字面量、变量以及标识符

字面量 ：是不可改变的值  比如：1、2、3、字面量可以直接使用，但是一般不直接使用

变量 ：变量可以用来保存字面量，而且字面量可以任意改变，变量更加方便使用，开发中用变量保存字面量，很少直接使用字面量

        // 声明变量// 在js中使用var关键字声明变量var a;// 为变量赋值a = 123;// 声明赋值同时进行var b=789;

标识符

         js中所有由我们自主命名的都可以叫标识符

         例如：变量名、函数名、属性名等

         命名一个标识符遵守以下规则

1.  标识符中可以有字母数学下划线$符
2. 标识符不能以数字开头
3. 标识符不能是ES中的关键字和保留字
4. 标识符一般采用驼峰命名法

          首字母小写，每个字母开头字母大写

          例：helloWorld

          js底层保存标识符是实际上都是采用Unicode编码

          理论上所有utf-8都可以作为标识符

JS中的数据类型 

数据类型就是字面量类型，在js中有6中数据类型

     String 字符串

     Number 数值

     Null 空值

     Boolean 布尔值

     Undefined 未定义

     Object 对象

     注：Object 引用数据类型

            其中String Number Null Boolean Undefined 属于基本数据类型

1、String字符串

        /** String字符串* 在js中字符串需要使用引号* 单引号双引号都可以，但是不要混用* 引号不能嵌套，双引号不能嵌套双引号，单引号同理*/var str = "hello";

注：在字符串中我们可以用\作为转义字符， 当表示一些特殊符号可以用\转义

•    \" 表示 "
•    \' 表示 '
•    \n 表示换行
•    \t 制表符
•    \\ 表示 \

 2、Number 数值

在js中所有数值都是number，包括整数和浮点数

js中表示数字最大值  Number.MAX_VALUE，如果number表示的数字超过了最大值则返回无穷Infinity正无穷    -Infinity负无穷     Number.MIN_VALUE 为 理论最小值 5e-324，NaN是一个特殊的字符 表示Not a Number

注：js中整数运算基本可以保证，但 js中进行小数运算可能得到一个不准确的结果

小知识：可以使用一个运算符typeof来检查变量类型

语法   typeof 变量

          检查字符串返回string

          检查数字返回number

          使用typeof返回NaN为number

 3、 Boolean 布尔值

   <script>/** 布尔值* 布尔值只有两个* ture 表示逻辑真* false 表示逻辑假* 使用typeof返回是为Boolean*/var bool = ture ;console.log(typeof bool);console.log(bool);</script>

4、 Null和Undefined

  <script>/** null类型的值只有一个，就是null* null这个值专门用来表示一个为空的值* 若typeof null为 object* * undefined类型只有一个，就是undefined* 若typeof undefined 为 undefined*/var a=null;var b=undefined;console.log(typeof b);console.log(b);</script>

注：基本数据类型的强制转换见该博客 https://blog.csdn.net/weixin_61466362/article/details/124675991?spm=1001.2014.3001.5502https://blog.csdn.net/weixin_61466362/article/details/124675991?spm=1001.2014.3001.5502

JS中的运算符

 1、算术运算符

    + 

    任何值和字符串相加都会先转换为字符串后相加

    * 我们可以利用这一特性，来将任意的数据类型转换为String

    * 我们只需要为任意的数据类型+一个"" 即可将其转换为string

    * 这是一种隐式类型转换，由浏览器自动完成，其实也是调用toString（）函数

    -     *     /

    任何值做- * / 都会转换为number

    *   我们可以利用这一特点做隐式类型转换

    *   通过 -0 *1 /1 来转换为number

    *   原理和number函数一样

 2、一元运算符

一元运算符 只需要一个操作数

          + 正号 不会对数字产生影响

          - 负号 会对数字进行取反

         对于非number的值它会先转换为number在取反

         可以对其他的数据类型使用 + 来使其转换为number

         它的原理和Number函数一样

// '2'前第一个加号为正号转换'2'为numbervar result=1+ +'2'+3;

 3、自增和自减

    自增  ++

    通过自增可以使变量在自身的基础上增加1

    对一个变量自增后会自己增加1

    自增分为两种后++（a++）和前++（++a）

    无论是前++还是后++ 都会使变量立即加1

         不同的是 a++和++a的值不同

         a++表示原变量的值 ++a是加1后的值

    自减 --

    通过自增可以使变量在自身的基础上减1

    对一个变量自增后会自己减1

    自增分为两种后--（a--）和前--（--a）

    无论是前-- 还是后-- 都会使变量立即加1

         不同的是 a--和--a的值不同

         a--表示原变量的值 --a是加1后的值

4、逻辑运算符

 js为我们提供三种逻辑运算符

          ！ 非

           对一个值进行非运算

          非运算就是对一个布尔值取反的操作

          true变false false变true

          若对一个值进行两次取反则不变

          若对非布尔值进行非运算、则会将其先转换为布尔值再运算

          可以利用该特性对非布尔值转换为布尔值

          即：可以为任意类型进行两次非运算

     

         && 与

         可以对符号两侧的值进行与运算并返回结果

         只要有一个false返回 false

         js中的与属于短路的与，如果第一个值为false则不会看第二个值

     

       || 或

       可以对符号两侧的值进行或运算并返回结果

       只要有一个true就返回true

       js中的与属于短路的或，如果第一个值为true则不会看第二个值

  

注：  && || 非布尔值情况

     对于非布尔值对于与/或运算会将其转换为布尔值 然后运算，并且返回原值

     与运算

     如果第一个值为true则返回后面的

     如果第一个值false则返回false

     或运算

     如果第一个值为true返回第一个值

     如果第一个值为false，则直接返回第二个值

 5、相等运算符

* 相等运算符比较两个数是否相等

     * 如果相等会返回true

     * 否则返回false

     *

     * 使用 == 来做相等运算

     * 当使用==来比较两个值将自动进行类型转换为相等的类型后进行比较

     *

     *

     * 不相等 !=

     * 如果不相等会返回true

     * 否则返回false

     * 当使用!=来比较两个值将自动进行类型转换为相等的类型后进行比较

     *

     *

     * ===全等

     * 用来判断两个值是否全等，他和相等类似，不同的是他不会自动类型转换

     * 如果两个值类型不同，直接返回false

     *

     *

     * ！==不全等

     * 用来判断两个值是否不全等，和不等类似，不同的是他不会自动转换类型

     * 如果两个值类型不同，直接返回true

6、条件运算符

* 条件运算符也叫三元运算符

     * 语法  

     *     条件表达式？语句1：语句2;

     *  执行流程

     *  条件运算符在执行时，首先对条件表达式进行求值

     *   如果该值为true，则执行语句1，并返回执行结果

     *   如果该值为false，则执行语句2，并返回执行结果

     *

     * 如果条件语句是非布尔值先转换为布尔值后运算

 

代码块及部分知识 

1、代码块

  我们的程序是由一条条语句构成 ，并且语句是自上而下执行

  在js中可以用{}来为语句进行分组，同一个{ }里的语句称为一组语句

  他们要么一起执行，要么一起不执行

   一个{ } 的语句也称为代码块

        在代码块的后面就不用再编写  ;

        js中的代码块只具有分组作用

2、prompt( )

 prompt()可以弹出一个提示框，该提示框中会带有一个文本框

    * 用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数

    * 该字符串会作为提示框的提示文字

    * 用户的输入内容会作为函数的返回值，可以定义一个变量来接受该内容

var score = prompt("请输入小明的期末成绩：");

 

3、break continue

(1)  计时器

  console.time("计时器的名字")可以用来开启一个计时器

  它需要字符串作为参数，这个字符串将是计时器的标识

  终止计时器console.timeEnd()

  它需要字符串作为参数，这个字符串将是计时器的标识

注：可以通过Math.sqrt()对数字进行开方

（2）break

        break退出switch循环语句

        不能在if语句中使用break和continue

        break会立即终止离他最近的循环

        可以为循环语句创建一个label，来标识当前的循环

        label：循环语句

        这样在break后跟一个label

        这样break会结束指定循环

        //label指定breakouter:for(var i=0;i<5;i++){console.log(i);for(var j=0;j<5;j++){break outer;console.log(j);}

 （3）continue

  continue可以用来跳过当次循环

  同样continue也是默认只对它最近的循环起作用

  可以为循环语句创建一个label，来标识当前的循环

  label：循环语句

  这样在continue后跟一个label

  这样continue会结束指定循环