JS基本语法

作者: L_半 | 来源:发表于2019-08-26 15:12 被阅读0次

[TOC]

JS基本语法

01入门

编辑器：
sublime
H5build
Atom
运行环境：
主流的浏览器
1、IE
2、火狐
3、谷歌
4、safari

JS组成部分：
1、ECMAScript
2、BOM 整个浏览器
3、DOM docment 文档整个文档从<html>开始到<html>结束

02 JS 结构

1、type="text/javascript" 说明当前的文本类型
2、所有的js代码都必须写在script标签里
3、为了语法规范，script标签写在head标签中。
4、可以引入多个script标签，多个script标签之间，顺序执行。
5、js代码可以外部引入 <script type="text/javascript" src=js/demo.js>
6、如果当前script标签作用引入外部文件，这个script标签中，就不能写代码了。

alert("Hello World!");//在页面弹出警告框
//[注]每一条js语句后面都必须加分号,语法规范
document.write("Hello world");//在当前文本上输入内容

03 输出script标签

//&lt 是<  &gt是>
            
            
            //单行注释 快捷键ctrl+/
            /*
            多行注释 ctrl+shift+/
            */

04 变量

! +tab键生成html模板

常量/字面量确定的值叫做常量
100 3.14
【注】 JS中的数据类型分为两大类
1、基本数据量类型
<1>数据 number 100 3.14
<2>字符串string 所有带双引号/单引号 "hello" 'hello'
<3>布尔值 boolean true false
<4>特殊数据类型 null 空 undefind 未声明
2、复合数据类型
【注】变量，值可以改变的叫做变量
1、声明变量通过关键字（系统定义的有特殊功能的单词）var
<1>声明变量的时候，同时给变量赋值，叫做初始化。
2、变量赋值
3、可以同时定义多个变量变量之间是使用逗号隔开。

var age=18;
age=20;
alert(age);

var name="" ,age=18 ,sex="男";
alert(sex);
标识符：用户自定义的所有名字叫做标识符。变量名规律：
1、标识符必须由数字、字母、下划线和美元符号$组成。
2、不能以数字开头
3、标识符区分大小写，age 和Age 这是两个变量
4、标识符必须见名思意。

输入变量/常量的数据类型
【格式】 typeof 变量/常量
【注】JS是弱类型引用语言，变量被赋值成什么类型就是什么类型,不要在后续代码里改变变量的数据类型，很容易引起代码歧义

var age=18;
var Age=20;
alert(age);
alert(Age);
             
// var name="xxx";
// alert(typeof name);
var age=18;
alert(typeof age);//number
age="hello";
alert(typeof age);//string

05 运算符

算数运算符:
关系运算符
逻辑运算
赋值运算符
自增、自减运算符

06 自动数据类型转换

查看JS语法错误：
1、火狐 fireBug --打开菜单--安装插件
2、谷歌 chome 控制台

       1、任何类型的数据和字符串类型数据做相加操作的时候。其它数据类型会自动转换成为字符串类型，字符串拼接。此时的相加操作不再是数学意义上加法，而是表示拼接的意思。
        如果其中一个操作数是字符串的时候，+号叫做字符串拼接符
        2、任何数据除了和字符串做相加运算外，先要将字符串转成数字再进行运算。
        <1>与NaN做算数运算的结果始终都是NaN,包括NaN做运算结果也为NaN.
        <2>字符串如果是纯数字字符串转成数字，否则转换成NaN
       
       */
      // var tmp="您"+"好";
      // var tmp="1"+1;
      // var tmp="h"+true;
      // var tmp="h"+undefined;
      // alert(tmp);//tmp is not defined 变量没有声明
      // var tmp=1-"2"; //-1 字符串"2" 转成了数字2
      var tmp=1-"2a"; //NaN not a number
      alert(tmp);

总结：任何其它数据类型除了和字符串做相加操作外，与数字类型做算数运算的时候，其它数据类型都会自动转换成数字。

         布尔值：
         true=>1
         false=>0
         
         特殊数据类型中：
         null => 0
         undefined => NaN
         */
        //var tmp=1 * "1"; //1  
        //var tmp= 1/"1"; //1 number
        //var tmp=1 + true; //2
        // var tmp=1+false; //1
        // var tmp=1 +null; //1
        var tmp=1+ undefined; //NaN
        alert( tmp);

08 强制数据类型转换

【注】通过方法Boolean()进行强制数据类型转换。
【作用】将别的数据类型强制转换成布尔值。

        结论：
        1、数字0转换成布尔值为false.所有非0的数字转换成布尔值都为true
        2、空字符串转成布尔值为false,所有非空字符串转成布尔值为true
        3、null 和undefined 转成布尔值都是false
     */
    // var tmp=Boolean(1);  //true
    // var tmp=Boolean(0); //false
    // var tmp=Boolean(-1); //true
    
    // var tmp=Boolean(""); //false
    // var tmp=Boolean("hello"); //true
    // var tmp=Boolean(null); //false
    var tmp=Boolean(undefined); //false
    alert(tmp);

09 强制数据类型转换

        Number() 将别的数据类型转成数字
            1、布尔值 true=> 1 false=> 0
            2、字符串 纯数字的字符串 =>对应的数字，否则NaN
            3、特殊数据类型null=> 0undefined=>NaN
            
         parseInt() 兼容Number 的功能，取整
         parseFloat() 取浮点 带小数的数字 可以将的数据类型转换成数字
         */
        
        //var tmp = Number(true); //1
        //var tmp = Number(false); //0
        //var tmp = Number("20"); //数字 20
        //var tmp = Number(null); //0
        //var tmp = Number(undefined); //NaN
        var tmp = Number("20a"); //NaN
        var tmp = parseInt("20a"); //20
        var tmp = parseInt(3.13) //3
        var tmp = parseFloat(3.24); // number
        alert(tmp);

10补充

// var tmp = 1 / 0 ; //Infinity 无穷大
        // var tmp = -1 / 0 ; //Infinity 无穷小
        alert(tmp);
        /* 
            代码规范：
            1、注意层级缩进 tab = 四个空格
            2、; ,后面都跟一个空格 运算符 = + 后面都应该空空格
            3、每一条语句后面都必须添加 ; 分号
            

         */

11 表达式

/* 
        【概念】运算符和操作数组成的式子，叫做表达式
            看表达式：
                1、功能
                2、表达式值
     */ 
    /* 
        运算符的不同进行细分
     
     */

12 赋值运算符

        赋值运算符
        【注】 = 将等号右边的值赋值给等号左边的变量
        
        复合赋值运算符：
        += *= /= %=
     
     
     */ 
    /*
    var tmp = 2 + 3;
    alert(tmp);
    */
   /* var tmp = 5;
   tmp +=10; //tmp = tmp + 10;
   alert(tmp); */
   
   var tmp = 5;
   tmp *= 2;    //tmp = tmp * 2;
   alert(tmp); //10

13 一元运算

/*
【注】只能操作一个值的运算符，叫做一元运算符。
a++; 表达式值： ++后置，先取a的值，然后再进行+1操作。

        ++a;表达式值：  ++前置，先进行+1操作，然后再a取值
        【注】上述的两个表达式都是进行+1操作。
        
        a--;
        --a;
     
     */ 
    /* var a =5;
    alert(a++); //5
    alert(a); //6 */
    
    /* alert(++a);  //6
    alert(a);   //6 */
    
    var a = 5;
    /* alert(a--); //5
    alert(a); //4 */
    
    alert(--a); //4
    alert(a); //4

14运算符

/*
【注】关系运算符中操作数为非数字的时候要遵循从以下规律：
1、如果两个操作数都是数值，则数值比较。
2、两个操作数都是字符串，则比较两个字符串对应的字符编码值。
ASCII码表值。
逐位进行比较，直到比较出大小，终止比较。
3、两个操作数有一个是数值，则将另一个转换成数值。

        字符存储在计算机上 以二进制方式去进行存储
        ASCII码表 二进制码个字符对应密码表
            
     */
    // alert(5 > 3); //true
    // alert("a" > "b"); //false
    // alert("abc" > "abd"); //false
    alert(2 > true); //true => 1  true

15 运算符进阶

关系运算符：
            在等于和不等于的比较上，如果操作数为非数值，则遵循以下规律：
            1、一个操作数为布尔值，则比较之前将其转换成数值，false转成0，true转成1
            2、 一个操作数为字符串，则比较之前将其转成数值再进行比较。
            3、一个操作数为NaN,则== 返回false，!= 返回true ,并且NaN和NaN 自身不等。
            4、在全等和全不等。如果值和类false型都相等，才返回true,否则返回false
            === !==
            
         */
        // alert(1 == true); //true
        // alert(0 == false); //true
        // alert(20 == "20"); //true
        alert(1 != NaN); //true
        alert(NaN != NaN); //true
        alert(20 ==="20"); //false
        alert(20 === Number("20")); //true

16 逻辑运算符

逻辑运算有3种：
1、与
表达式1 && 表达式2
【注】只有当两个表达式的结果都为真的时候，与运算的结果才是true
【短路操作】当第一个表达式1为false的时候，第二个表达式2就不去执行，直接判断整个运算为false
2、或
表达式1 || 表达式2
【注】只有当两个表达式都为假的时候，或运算的结果才为真
【短路操作】表达式1为true 的时候，表达式2就不去执行了，判断整个表达式为true
3、非
!表达式
// alert(5 < 3 && alert(a)); //true
alert(5 > 3 || alert(a)); //true

17逻辑非运算

        逻辑非运算遵从下述规律。
        1、如果操作数是一个空字符串，返回true.
        2、操作数是非空字符串，返回false.
        3、操作数是0.返回false
        4、操作数是任意非0的数值(包括Infinity)，false
        5、操作数是NaN,返回true
        6、操作数是undefined,返回true

    
    // alert(!""); //true
    // alert(!"ss"); //false
    // alert(!0); //true
    alert(!Infinity); //false
    alert(!NaN); //true
    alert(!undefined); //true

JS基本语法

JS基本语法

01入门

02 JS 结构

03 输出script标签

04 变量

05 运算符

06 自动数据类型转换

08 强制数据类型转换

09 强制数据类型转换

10补充

11 表达式

12 赋值运算符

13 一元运算

14运算符

15 运算符进阶

16 逻辑运算符

17逻辑非运算

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读