Js基础01

基础

js输入与输出语句

输入

1.alert(): 弹出一个提示框

alert('这是一个简单的提示框');

2.document.write(): 给页面输出内容

 document.write('<h1>前端小白，不请自来</h1>');

输出

1.prompt():弹出一个输入框，用户可以输入数据

prompt('请输入你的年龄?');

2.confirm(): 弹出一个确认框,用户可以 确定/取消

confirm('你确定要删除吗?');

js代码执行原理

    1.将代码从硬盘中读取到内存中
    2.编译器开始从上往下解析代码
    3.解析好的二进制交给cpu处理  (存储 + 计算)
    4.CPU将产生的数据存入 内存中

---

数据类型

js有7种数据类型 ： 分为两大类
简单数据类型(值类型) ：5种
1.字符串类型 string : 一切使用单引号 或 双引号引起来的数据
作用 ： 用于展示文本
2.数字类型 number : 一切数学中的数字
作用 ： 用于数学计算
3.布尔类型 boolean : 只有两个值 true(真) / false(假)
作用： 事物的对立面 true 成立 / false 不成立

复杂数据类型(引用类型) ： 2种
1.object 对象
2. array 数组

typeof 关键字检测数据类型
typeof关键字 ：
作用： 检测一个数据 所属的类型。
关键字 ： 拥有特殊含义的英语单词
语法： typeof 数据 typeof (数据)

• 得到该数据所属类型的字符串

---

变量

• 作用：储存数据
• 语法

1 变量声明： 在内存中开辟一块空间
语法： let 变量名;
2 变量赋值 ： 右边的数据存入左边的变量
语法： 变量名 = 值;
3 变量取值： 取出变量中存储的数据
语法： 变量名

• 注意点：变量的命名规则和规范

1 规则： 必须要遵守，不遵守程序会报错。
a. 必须以 字母、下划线_ 、 $开头，后面可以是字母、下划线_ 、 $、数字
b. 不能以关键字作为变量名，最好也不要是保留字。
2 规范 ： 大家都养成的一种习惯，不遵守不会报错。
a. 变量取名要有意义，最好是英语名词
b. 使用驼峰命名法 : 第一个单词首字母小写，后面单词首字母大写

---

运算符与表达式

1.字符串连接符 ： +
前提条件: +号两边至少有一边是字符串类型

console.log( '大家好，我的名字叫' + name );

模板字符串： 使用反引号包起来 ``
作用：可以在字符串中取变量的值
语法： ${变量名}

  console.log( `大家好，我的名字叫${name}`);

2.数学加法 ： +
前提条件 ： +号两边都要是数字

    1.算术运算符 ： 数学算术运算
        + ： 加法
        - ： 减法
        * :  乘法
        / :  除法
        % :  求模(取余数)
    
    2.算术表达式： 由算术运算符组成的式子。  1 + 1
        * 运算符单独使用无意义，需要和运算的数字在一起组成一个式子

    3.重点： 表达式一定有运算结果,要么打印，要么存入变量中
        语句 ： 通常由关键字和语法组成的代码，用于表达某个功能。
        表达式： 通常由运算符组成的式子，用于运算。（一定会产生结果）

  4.算术运算其他写法
        4.1 复合算术运算符：  += -=  *= /= %=
            * num += 10;//相当于num = num + 10
        4.2 自增自减运算符 : ++  --
            * 变量自身+1  ：  num++
            * 变量自身-1 ：   num--
   */ 
  
   let num = 10;
   num++;     //num += 1; //num = num + 1;
   console.log( num );//11

   let num1 = 20;
   num1--;// num1 = num1 - 1
   console.log( num1 );//19

    /* 除法
    1.数学中0不可以作为除数，js中也是。如果一个数字除以0，则会得到无穷大。
    2.如果除法得到一个无限循环小数，则js只会保留小数点后面大概15位，不影响开发
    */
   console.log( 10/0 );//Infinity
   console.log( 10/3 );//3.3333333333333335

   //了解： 小数点精度丢失
   console.log( 0.1 + 0.2 );//0.30000000000000004

   /* 求模：取余数 */

   console.log( 10 % 3 )

---

关系运算符

    1.关系(比较)运算符 ： 比较两个数据的关系，判断某个条件是否成立
        > >=
        < <=
        == (相等)  !=(不等)
        ===(全等)  !==(全不等)

    2.关系表达式：  由关系运算符组成的式子   99 > 60

    3.重点： 关系表达式结果一定是布尔类型。（true:条件成立， false:条件不成立）
    */    

    console.log( 99 > 60 );//true

    /* 
    = : 赋值运算符， 右边的数据存入左边的变量
    == : 相等运算，  只比较数据的值，不比较数据类型
    === : 全等运算， 先比较类型，后比较值
    */
   console.log( 1 == '1' );//true
   console.log( 1 === '1' );//false

逻辑运算符

       0.关系运算符 ： 比较数据关系，判断某个条件是否成立。

        1.逻辑运算符 ： 计算多个条件的关系。
            && ： 逻辑与，读作并且
                * 一假则假
            || : 逻辑或，读作或者
                * 一真则真
            ! : 逻辑非，读作取反
                * true变false,false变true
        
        2.逻辑表达式 ：由逻辑运算符组成的式子  99 > 98 &&  30 > 18
        */    


        //1.逻辑与表达式运算规则 ： 一假则假

        // 左边式子      &&      右边式子         结果
        //    真                   真             真
        //    真                   假             假
        //    假                   真             假
        //    假                   假             假
        console.log( 1 > 10 && 1 > 10);

        //举例 ： 某些地方丈母娘找女婿     有房 有车 还要有存款。     三个条件必须全部满足。


        //2.逻辑或表达式运算规则 ： 一真则真

        // 左边式子      ||      右边式子         结果
        //    真                   真            真         
        //    真                   假            真       
        //    假                   真            真           
        //    假                   假            假         
        console.log( 1 > 10 || 1 > 10);

        //举例： 我的丈母娘   要么有房   有么有车  要么有存款     三个条件只需要满足任意一个即可


        //3.逻辑非 ： 取反
        //取反：  true变false  false变true
        console.log(  !true );//false
        console.log(  !false );//true

        //举例： 个别丈母娘  只要不是女的就行（ 女取反就是男 ）

Math高级数学计算

       Math数学对象 ： 负责高级数学计算
       不需要刻意记忆，忘记了随时查阅文档
       */     

       //1.圆周率 ：  PI
       console.log( Math.PI );//3.141592653589793
       

       //2.绝对值 : abs()
       console.log( Math.abs(-2) );//2
       

       //3.向上取整 ,返回右边整数: ceil()
        console.log( Math.ceil(2.1) );//3
        
       //4.向下取整,返回左边整数： floor()
       console.log( Math.floor(2.9) );//2

       //5.四舍五入 : round()
       console.log( Math.round(3.4) );//3
       console.log( Math.round(3.5) );//4
       
       //6.求一组数字最大值  max()
       console.log( Math.max(88,100,60,90,50) );//100
       
       //7.求一组数字最小值  min()
       console.log( Math.min(88,100,60,90,50) );//50

       //8.幂运算  pow(x,y)  求x的y次方
       console.log( Math.pow(2,3) );//2*2*2 = 8
       

       //9.随机数0-1 随机小数  random()
       console.log( Math.random() );

       //练习： 1-100 随机整数
       console.log( Math.random()*100 );//0-100的随机小数

       let num =  Math.ceil( Math.random()*100  );
       console.log( num );