JS基础语法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gu_wen_jie/article/details/71552662

这是以前学习的内容。接下来会陆陆续续整理出来和大家分享一下。

#JS基本语法
----
js的名称:

js的全名叫做JavaScript.

java和JavaScript的关系?

    老婆和老婆饼的关系
    ....

    所以并没有什么直接的关系。

JavaScript的语言特点

    1.JavaScript也是一门弱类型语言。不用限定数据类型。
    2.JavaScript是一门脚本语言可以和php、html、css进行混编
    3.JavaScript是一门跨平台的语言。因为浏览器在哪个平台都有。
    4.JavaScript是一门解释类型语言。
    5.javascript是一门基于对象的语言。


javascript的发展历史

     网景浏览器推出了浏览器的脚本语言JavaScript。
     微软公司推出了Jscript脚本语言。
     W3C出面定制了JavaScript的语法标准->ECMA标准,仅仅制定了语法规则,没有规定输入和输出

     基于ECMA标准制作的语言统称为ECMAScript。

    网景->JavaScript、IE的Jscript、adobe的flash都是ECMAscript的一种实现。


JavaScript的语法和使用

    1.在页面中使用<script>标签写入JS代码。(CSS的嵌入式)
    2.在页面中使用script标签引入JS文件        (CSS的外链式)
    3.在标签中直接书写js代码,一般配合事件    (CSS的内联式)

script标签的属性

charset属性

    用于设置引入文件的字符集类型。页面文件和JS文件即使字符集不一样也可以混用。

language属性

    用于设置脚本的语言类型(已经废弃)

src 属性 

    用于引入外部的脚本文件,脚本文件不一定非得是.js结尾。

defer 属性

    延迟加载属性。可以使得外部脚本在HTML页面加载完毕的情况下执行。(引入外部文件才可以)

async 属性

    异步加载属性。不需要等到其他文件加载完毕就可以加载当前文件。


----
JS脚本使用的位置很多:

    1.可以在head头中使用
    2.可以在body体中使用
    3.可以在html的任意位置使用。

哪一种更合理呢?

    看情况使用。
    如果是框架文件,提倡在head头中引入。
    如果是其他类型的JS代码,文件形式推荐head头中,嵌入式推荐在要操作的元素之后书写。

noscript标签的使用

    作用:在浏览器不支持JS的情况下会执行noscript标签中的代码。

注意:noscript标签不支持JS,所以不允许在其中书写任何JS代码


##JS语法阶段

###变量的声明

    1.声明变量同时赋值

        var 变量名 = 值

    2.声明变量不赋值

        var 变量名;

    3.不使用var声明变量同时赋值(不推荐)

        变量名=值

###变量的命名规范:

    1.声明变量必须使用var关键字
    2.不可以使用中文,可以使用英文
    3.可以使用数字,但是不能数字开头
    4.不可以使用特殊字符,除了_和$
    5.变量严格区分大小写
    6.变量命名要有意义。
    7.JS声明变量不可以和保留关键字冲突。

###如何避免和保留关键字冲突:

    1.大小写 变化
    2.驼峰命名法
    3.使用_或者$字符
    4.记住所有保留关键字


###变量的数据类型

1.一种数据类型

    因为JS是基于对象的语言,所有内容都是有对象创建的,所以一种类型就是对象。

2.两种数据类型

    简单数据类型和引用数据类型

    简单数据类型就是值类型  (默认赋值)

    引用数据类型就是对象类型。(默认引用)

3.六种数据类型

    根据typeof运算符检测的结果。

    1.undefined类型  

        undefined类型只有一个值 就是undefined。

        获取undefined值有两种方式:赋值为undefined或者声明但不赋值

    2.string类型

        使用引号(单双引号)声明的值都是字符串。
        声明方式有单引号和双引号两种,本质上没有区别,都可以解析转义字符,都不能解析变量。

        推荐使用单引号:因为HTML使用双引号。

    3.number类型

        分为整型、浮点型、NaN类型

        整型:

            var intVal = 10;        10进制
            var intVal = 077;        8进制
            var intVal = 0XFF;        16进制

        浮点型:

            var floatVal = 1.1;        小数
            var floatVal = 3.14e-5; 科学计数法
            var floatVal = .5;        简写
            var floatVal = 2.;        简写
        NaN类型

            NaN Not a Number 不是一个数字。


            得到NaN的方法
            1.一个数字和一个非数字运算就会得到NaN.
            2.直接赋值为NaN
            3.和NaN进行运算结果永远是NaN

            NaN的特征:
            1.NaN具有传染性,任何数值和NaN发生运算结果都是NaN.
            2.NaN不等于任何值,包括NaN本身.
            3.检测NaN的唯一办法使用isNaN()函数

注意:不要尝试以任何的方式获取NaN,因为他是个错误!~


    4.boolean类型

        布尔值表示真假,只有true和false两个值。必须小写。

    5.function类型

        //声明函数
        function demo(){
            alert('张丽娟同志欠我们5块钱');
        }

        //匿名函数/表达式函数
        var demo = function(){
                alert('匿名函数');
        };


    6.object类型

        数据和功能的集合就是对象。

        实例化的对象或者null值都是对象类型。

**注意**:null表示一个指向对象的空指针。

        undefined和null是有区别的。 值相同,类型不同,null的未来要存储一个对象。undefined和null就类似于无业游民和待业青年的区别。

4.N种数据类型(上面已经划分完毕)

###注释

单行注释

    // 单行注释

多行注释

    /*多行注释*/

命令执行符

    ; 就是命令执行符号。在不书写分号的情况下代码也不会出错。这是JS的容错性特征,但是请你自己写上分号。

    不写分号的问题:
    1.程序效率会降低,需要判断分号的位置
    2.无法压缩JS代码。


##数据类型的转换

    数据类型转换分为2种情况:自动数据类型转换(隐式转换)和强制类型转换。(显式转换)


###自动类型转换

    自动类型转换发生在运算和判断过程当中,而且不需要人工干预。自动类型转换会朝着更加精确的方向进行。

###强制类型转换

parseInt() 将字符串转换为整型

    1.如果是纯数字字符串,转换时只改变类型,值不变
    2.如果是以数字开头的字符串,转换时保留前面的数字,第一个非数字之后的所有字符舍去
    3.如果不是一数字开头的字符串,结果就是NaN

parseFloat() 将字符串转换为浮点型

    1.如果是纯数字字符串,转换时只改变类型,值不变
    2.如果是以数字开头的字符串,转换时保留前面的数字,第一个非数字之后的所有字符舍去
    3.如果不是一数字开头的字符串,结果就是NaN


**注意**:parseInt和parseFloat函数都是讲字符串进行强制转换操作,不可以用于其他类型


Number() 将任意类型转换为数字类型

    1.字符串类型转换时,除了纯数值字符串保持值不变,其余都是NaN。
    2.数值类型无需转换
    3.undefined转换为NaN
    4.布尔值 true转换为1  false转换为0
    5.函数转换为NaN
    6.对象转换为NaN,除了null之外,null转换为0


Boolean() 强制将其他类型转换为布尔值

    转换为false的情况

    1.number类型  整型0 浮点型0.0和NaN
    2.string类型  空字符串
    3.undefined类型  undefined值
    4.boolean类型  false
    5.function类型  都是true
    6.object类型  null转化为false,其余都是true

String() 将其他数据类型转换为字符串值

    1.number类型转换字符串数字(解析之后的值),NaN 变为字符串NaN
    2.string类型 不需要转换
    3.undefined类型  undefined字符串
    4.boolean类型  转化为true和false的字符串
    5.function类型  转换为函数结构的字符串
    6.object类型  转换为[object Object]结构,null转换之后还是null字符串

    可以使用字符串变量.toString()的方式进行转换,除了undefined和null

##运算和运算符

什么是运算?

    由一个或者多个数值进行变化得到新值得过程就是运算。

什么是运算符?

    用于运算的符号就是运算符。

运算的分类

1. 算数运算
2. 赋值运算
3. 比较运算
4. 字符串运算
5. 逻辑运算
6. 位运算
7. 其他运算


### 算数运算

    \+  加法运算
    -    减法运算
    *    乘法运算
    \\    除法运算
    %    取余运算
    ++    自增运算
    --    自减运算

###赋值运算

    =  变量赋值
    += 加法赋值
    -= 减法赋值
    *= 乘法赋值
    /= 除法赋值
    %= 取余赋值

    += 字符串连接赋值

###比较运算


    >  大于
    <  小于
    >= 大于等于
    <= 小于等于
    == 等于
    != 不等于
    === 全等于
    !== 非全等于 

###字符串运算符

字符串运算符在JS中就是有+符号担任的,同时可以进行加法运算和字符串连接运算。

**注意**:
    +号既可以进行算术运算也可以进行字符串连接运算,取决于+号两边的数据类型。

    字符串+字符串      ->字符串连接
    数值+数值        ->加法运算
    字符串+数值        ->字符串连接

###逻辑运算符

    && 逻辑与运算 (有假则假)


    || 逻辑或运算 (有真则真)


    ! 逻辑非运算 (真变假,假变真)

###按位运算符

    &      按位与运算

    |    按位或运算

    ~    按位非运算

    ^   按位抑或运算

    >>  右移运算 相当于除以2,向下取整

    <<  左移运算 相当于乘以2 


###其他运算符

    ?:  三目运算符

    ,  逗号运算符

        主要用于同时声明多个变量使用。

    new 运算符

        实例化对象的运算符

    delete 运算符

        1.可以删除对象的成员
        2.可以删除数组元素的值,无法删除键

    typeof 运算符

        检测数据类型的运算符

    instanceof运算

        检测一个对象实例是否是另外一个对象圆形实例化而来。



##流程控制

流程控制的分类:顺序结构,分支/选择结构,循环结构

###顺序结构

顺序结构是程序自上而下的执行过程,不需要认为干预。

###分支结构

####单项分支

    格式1: if(条件表达式) 

                一条js语句;

    格式2: if(条件表达式){
                一条js语句;
                一条js语句;
                ....
            }

####双项分支

    格式1: if(条件表达式) 
                一条js语句;
            else
                一条js语句;

    格式2: if(条件表达式) {
                一条js语句;
                一条js语句;
                ...
            }else{
                一条js语句;
                一条js语句;
                ...
            }


####多项分支

        格式1: if(条件表达式) {
                一条js语句;
                一条js语句;
                ...
            }else if(){
                一条js语句;
                一条js语句;
                ...
            }else if(){
                一条js语句;
                一条js语句;
                ...
            }...else{
                一条js语句;
                一条js语句;
                ...
            }

**注意**:在使用if...else if..else多项分支时 else if 必须分开书写。

        格式2:

            switch(变量){
                case 值:
                    JS代码;
                    [break;]
                case 值:
                    JS代码;
                    [break;]
                ...
                default:
                    JS代码;    
            }
####巢状分支

    if。。else单项、双项、多项分支的嵌套结构就是巢状分支。

###循环结构

循环结构分为四种:while循环、do..while循环、for循环、for..in循环

while循环

    格式:while(条件表达式){
            循环体内容;
            [自增自减条件]
        }

do..while循环

    格式:do{
            循环体内容;
            [自增自减条件]
        }while(条件表达式);

for循环

    格式:for(var 变量=初始值;判断条件;自增自减条件){
            循环体内容;
        }

for...in循环

    格式:for(var 变量 in 对象){
            循环体内容;
        }

**注意**:直接访问对象成员 使用 对象.成员名,如果成员名称是变量,则需要使用对象[变量名]的方式进行访问。


continue语句

    跳过本次循环,开启下次循环

break

    跳出循环结构或者跳出分支结构

展开阅读全文

没有更多推荐了,返回首页