JS基础知识总结 (一)

一、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'为number
    var 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指定break
        outer:
        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会结束指定循环

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值