资讯专栏INFORMATION COLUMN

javascript基础

XFLY / 2805人阅读

摘要:一弹窗和输出执行顺序是从上到下执行控制浏览器弹出一个警告框让计算机在页面中输出一个内容在中写一个内容写可以向中输出一个内容看我出不出来向控制台输出一个内容作用是向控制台输出一个内容你猜我在哪出来二编写位置可以将代码编写到外部文件中,然后通过

一.弹窗和输出

  **javascript执行顺序是从上到下执行**

1.控制浏览器弹出一个警告框

alert("HelloWord");

2.让计算机在页面中输出一个内容在 document中写一个内容 (write写)

 document.write();  可以向body中输出一个内容
 document.write("看我出不出来···");

3.向控制台输出一个内容

console.log();  作用是向控制台输出一个内容 
console.log("你猜我在哪出来");  

二 .js编写位置

1.可以将js代码编写到外部js文件中,然后通过script标签引入
写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制
推荐使用方法
2.script标签一旦用于引入外部文 件了,内部就不能再编写代码了,即使编写了
浏览器也会忽略
如果需要可以在创建一个新的script标签用于编写内部代码

  

   

3.可以将js代码编写到标签的onclick属性中
当我们点击按钮时,js代码才会执行
虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护

     

可以将js代码写在超链接的href属性中,这样当点击超链接时,会执行js代码

     你也点我一下
     
     你也点我一下

三.基本语法

1.js注释(/**/)
多行注释,注释中的内容不会被执行,但是可以在源代码中查看
要养成良好的编写注释的习惯,也可以通过注释来对代码进行一些简单的调试
2.单行注释(//)
3.JS中严格区分大小写
4.JS中每一条语句以分号(;)结尾
-如果不写分号,浏览器会自动添加,但是会消耗一些系统资源

    而且有点时候浏览器会加错分号

5.JS中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化

四.字面量和变量

1.字面量都是一些不可改变的值

   比如:1 2 3 4 5
   字面量都是可以的直接使用,但是我们一般都不会直接使用字面量

变量 变量可以用来保存字面量,而且我们一般都不会直接使用字面量

   变量更加方便我们使用,所以在开发中都是通过变量去保存一个字面量
   而很少直接使用字面量
   可以通过变量对字面量进行描述

   变量  字面量
     x  =  1

2.把声明变量和对该变量赋值一次完成:

var mood(心情) = "happy",age = "22";

3.变量名允许包含字母、数字、美元符号和下划线(但第一个字符不允许是数字)。为了让比较长的变量名更容易阅读,可以在变量名中的适当位置插入下划线,就像这面这样:

   var my_mood = "happy";  

五、标识符

-在js中所有的可以由我们自主命名的都可以称为标识符
-例如:变量名,函数名,属性名都属于标识符
-命名一个标识符时需要遵守如下的规则:

   1.标识符中可以含有字母、数字、_、$
   2.标识符不能以数字开头
   3.标识符不能是ES中的关键字或保留字
   4.标识符一般都采用驼峰命名法 
     通常驼峰法格式是函数名、方法名和对象属性名命名的首选格式
          -首字母小写,每个单词的开头字母大写,其余字母小写
           helloworld       驼峰命名法:helloWorld
           var myMood = "happy";
           
--注意:js底层保存标识符是实际上是采用的Unicode编码,
       所以理论上讲,所有的utf-8中含有的内容都可以作为标识符   


a标识符  自己起的名字
 var a = 1;
 
可以含有字母、数字、_、$ 
var a_1_$ = 123;
console.log(a_1_$);   //输出为123

标识符不能是ES中的关键字或保留字
    ES 
var var = 123;
console.log(var);    //会报错

注意:

var 锄禾日当午 = 789;       //千万不要这么用
console.log(锄禾日当午); 

六、字符串

1.数据类型指的就是字面量的类型

在js中一共有六中数据类型
  String      字符串    "123" 
  Number      数值      123
  Boolean     布尔值     true或是false   
  Null        空值    
  Undefined   未定义
  Object      对象 

其中String Number Boolean Null Undefined 属于基本数据类型
而Object 属于引用数据类型

2.String字符串

 1.-字符串由零个或多个字符构成,字符包括(但不限制)字母、数字、标点符号和空号
  -在js中字串符需要使用引号引起来
  -使用双引号或单引号都可以,但是不要混着用
  -引号不能嵌套,双引号不能放双引号,单引号不能放单引号,
                单引号里面可以放双引号,双引号里面可以放单引号


2.在字符串中我们可以使用作为转义字符,
    当表示一些特殊符号时可以使用进行转义
    "" 表示 "" 
    "" 表示 ""
    
  表示换行
    	  表示制表符(空格)
      表示

    str ="我说:"今天
天气真不错""; 
  
    str=""
 
   //输出字面量 字符串str     
    alert("str");
    //输出变量str  
    alert(str);
            

3.如果想在上面这条语句中使用单引号,就必须保证字母“n”和“t”之间的单引号能别当成这个字符串的一部分,这种情况下这个单引号需要被看做一个普通字符,而不是这个字符串的结束标志,这种情况我们需要对这个字符进行转义,在js里用反斜线对字符串进行转义:

  
  var mood = "don"t ask";
  

4.类似地,如果想用双引号来包住一个本身就包含双引号的字符串,就必须用反斜线对字符串中的双引号进行转义:

 
 var height = "about 5"10" tall";
 alert(height);

会弹出下面:

七、Number

1.在js中所有的数值都是Number类型
如果想给一个变量赋一个数值,不用限定它必须是一个整数,js允许使用带点小数点的数值,并且允许任意位小数,这样的数称为浮点数

var age = 33.25;

也可以使用负值,在有关数值的前面加上一个减号(-)表示它是一个负数:

var temperture = -20;

js也支持负数浮点数

var temperture = -20.690; 

包括整数和浮点数(小数)

//数字123
 var a = 123;
//字符串123
var a = "123";
console.log(typeof a);


   /*
    *  可以使用一个运算符typeof
    *        来检查一个变量的类型
    *  语法:typeof 变量
    * 检查数值时,会返回number
    *  检查字符串时,会返回string
   */  
   

2.js中可以表示的数字的最大值 (最大值:1.7976931348623157e+308)

 Number.MAX_VALUE 
     1.7976931348623157e+308
 Number.MIN_VALUE   大于0的最小值
     5e-324    (0.后面的三百位数)
     

   console.log(Number.MAX_VALUE); //会输1.7976931348623157e+308

   a = Number.MAX_VALUE*Number.MAX_VALUE;

   a = "abc" * "bcd"    //会输出NaN

   a = NaN;      //不加引号  输出number     加了会输出string
   
   a = Number.MIN_VALUE;   //会输出Infinity

   console.log(a);     
  
 

3.如果使用Number表示的数字超过了最大值,则会返回一个Infinity

Infinity  表示正无穷 
-Infinity  表示正无穷
使用typeof检查Infinity也会返回Number 

NaN 是一个特殊的数字,表示Not A Number

使用typeof检查NaN也会返回Number

 
  // 在js中整数的运算基本可以保证精确
  var c = 1+1;      
    //如果使用js进行浮点运算,可能得到一个不精确的结果
    //所以千万不要使用js进行对精确度要求比较高的运算
  var c = 0.1 + 0.2;
  console.log(c);  



八、布尔值

Boolaen 布尔值
布尔值只有俩个,主要用来做逻辑判断
true -表示真
false -表示假
使用typeof检查一个布尔值时,会返回boolean

var bool = true;
console.log(typeof true);


九、Null和Undefined

1.Null类型的值只有一个,就是 Null

 null这个值专门用来表示一个为空的对象
 使用typeof检查一个null时,会返回object
 

2.Undefined(未定义)类型的值只有一个,就undefined

 当声明一个变量,但是并不给变量赋值时,它的值就是undefined
 使用typeof检查一个undefined时也会返回undefined 
   
       var a = null;
       console.log(typeof a);       //会输出object
       
       var b;
       console.log(b);    //会输出undefined
 

十、强制类型转换-string

1.强制类型转换

 - 指将一个数据类型强制转换为其他的数据类型  
 - 类型转换主要指,将其他的数据类型,转换为 
         String   Number   Boolean 
         
               

将其他类型转换为String
方式一:

 - 调用被转换数据类型的toString()方法
 - 该方法不会影响到原变量,它会将转换的结果返回

    -但是要注意:null和 undefined这俩个值没有toString()方法
               如果调用他们的方法会报错     
                   
     var a = 123;
      //调用a的toString()方法
     //调用xxx的yyy()方法,就是xxx.yyy()
     var a = a.toString();
     console.log(a);
     
     var a = true;              //先写一个类型
     // var a = a.toString();      //在写a.toString()  可以转
     console.log(a);
     
     a = null;             //空值
     // a = a.toString();      //不能转  会报错
    console.log(a);
    
    a = undefined;
   // a = a.tostring();     //不能转    会报错
    console.log(a);

方式二:

 -调用 String()函数,并将转换的数据作为参数传递给函数
 -使用String()函数做强制类型转换时
       对于 Number 和 Boolean实际上调用的就是toString()方法 
       但是对于null 和 undefined就不会调用toString()方法 
             它会将(字面量)null直接转换为(字符串)"null"
             它会将(字面量)undefined直接转换为(字符串)"undefined"
             
            a = 123;
            //调用tostring()函数,来将a转换为字符串   (转谁就把谁写在括号里面)
           a = String(a);     //S一定要大写

           a = null;
           a = String(a);    //不会报错

           a =  undefined;
           a = String(a);    //不会报错
          console.log(typeof a);
          console.log(a); 



十一、强制类型转换-Number

1.将其他的数据转换为Number

 转换方法一:
        使用Number()函数
              -字符串-->(转换)数字
                  1.如果是纯数字的字符串,则直接将其转换为数字      
                  2.如果字符串中有非数字的内容,则转换为NaN
                  3.如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
              -布尔(boolean)-->(转换)数字
                   true 转换为1
                   false 转换为0  
                   -Null-->数字==0 
                   -undefined-->数字==NaN  
 //转换方式一: 
 var a = "123";   
 //调用Number()函数来将a转换为Number类型
 a = Number(a);     //括号里面要写数值

 a = true;           //true的类型是boolean
 a = Number(a);       //  输出为1

 a = false;          //false的类型是boolean 
 a = Number(a);       //  输出为0

 a = null;
 a = Number(a);       //  输出为0

 a = undefined;
 a = Number(a);       //  输出为NaN
    

转换方式二:

    -这种方式专门用来对付字符串
    -parseInt()把一个字符串转换为一个整数
    -parseFloat() 把一个字符串转换为一个浮点  
 
//转换方式二:
 a = "123px";
 //调用parseInt()函数将a转换为Number
 /*
    parseInt()可以将一个字符串中的有效的整数内容取出来,(px不是数字所以不读,就只剩下数字)
    然后转换为Number
    (如果第一个是英文字母 转换的就是NaN(包括点.也在内 .以后的东西也不读))
 */
 a = parseInt(a);

/*
parseFloat()作用和parseInt()类似,不同的是它可以获得有效的小数
*/
 a = "123.456px";
 a = parseFloat(a);      //输出123.456

/*
  如果对非String使用parseInt()或parseFloat()
  它会现将其转换为String然后再操作
*/
 a = true;
//  a = parseInt(a);        //  输出为NaN
a = parseFloat(a);

 console.log(typeof a);
 console.log(a); 

十二、其他进制的数字

1.在js当中,如果需要表示16进制的数字,则需要以0x开头

       如果需要表示8进制的数字,则需要以0开头
       如果需要表示2进制的数字,则需要以0b开头,但是不是所有的浏览器都支持
       
 //16进制数字
 a = 0xDD;    
 //8进制数字
 a = 056;
 //2进制数字
 a = 0b10;
 console.log(a);
 
 var height = "about 5"10" tall";
 alert(height);
 

十三、转换为boolean

将其数据类型转换为boolean

      一种方法:使用boolean()函数
                -数字--->布尔
                 除了0和NaN,其余的都是true

                -字符串--->布尔
                 除了空串,其余的都是true

                -null和undefined都会转换为false
                
                -对象也会转换为true
                
                
   var a =123;  //输出为true
   a = -123;  //输出为true
   a = 0;     //输出为fals
   a = Infinity;   //输出为true   Infinity无穷
   a = NaN;   //输出为true 

  //调用Boolean()函数来将a转换为布尔值
  a = Boolean(a);

  a = "hello";              //本身输出为string  
  a = boolean(a);           //加上boolean()以后输出为true

  a = "flase";
  a = boolean(a);            //输出为true

  a = "null";
  a = boolean(a);            //输出为flase
  
  console.log(typeof a);
  console.log(a);



十四、算数运算符

1.运算符也叫操作符

通过运算符可以对一个或多个值进行运算,并获取运算结果
比如:tupeof就是运算符,可以来获得一个值得类型
     它会将该值的类型以字符串的形式返回
   number string boolean underfined objuct

2.算数运算符

当对非Number类型的值进行运算时,会将这些值转换为Number然后在运算
    任何值和NaN做运算都得NaN
+
  +可以对两个值进行加法运算,并将结果返回
  如果对俩个字符串进行加法运算,则会做拼串
        会将俩个字符串拼接为一个字符串,并返回
  任何的值和字符串做加法运算,都会先转换为字符串,然后在和字符串做拼串的操作转成字符串
—
  可以对两个值进行减法运算,并将结果返回
  转成number
*
  可以进行乘法运算
/
  可以进行除法运算
%
  %取模运算(取余数)

//加法例子:
var a = 123;

var result = typeof a;
console.log(typeof result);      //输出为string

a + 1;            //输出为123
result = a + 1;   //输出为124
result = 35 + 35;   //输出为70  
result = true + 35;  //输出为36  
result = true + false;  //输出为1  true为1  false为0
result = 2 + null;  //输出为2  null为
result = 2 + NaN;  //输出为NaN 
result = "123" + "456";  //输出为123456    俩个字符串相加  数字连在一起
result = "锄禾日当午"       //如果想把诗写的工整就这样写   也可以这样写"锄禾日当午,汗滴禾下土,谁知盘中餐,粒粒皆辛苦"
            +"汗滴禾下土"+
            "谁知盘中餐"+
            "粒粒皆辛苦";
result = 123 + "hello";      //输出为123hello
//任何值和字符串相加都会转换为字符串,并做拼串操作

console.log(result);  

//number转换为string
/*
  我们可以利用这一点,来将一个任意的数据类型转换为string
  我们只需要为任意的数据类型加一个""即可将其转换为string
  这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用string()函数
*/
var c = 123;
c = c + "h";

console.log(typeof c); 
console.log(c);
console.log("c = " +c);      //输出为c=123h

//小练习
result = 1 + 2 + "3";   //输出为33  1+2=3   字符串相拼  33 
console.log("result="+result);      //输出为 result=33

result = "45" + 2 + 3;     //输出为4523
console.log(result);  


//减法例子: 
  result = 100 - 5;    //输出为result =95
  result = 100 - true;  //输出为99    true为1 
  result = 100 - "1";    //输出为99   把"1"转换为number 1    相当于100-1

  console.log("result = "+result);

//乘法例子
  result = 2 * 2;  //输出为result=4
  result = 2 * "8";  //输出为result=16
  result = 2 * undefined;  //输出为result=NaN
  result = 2 * null;  //输出为result=0       null=0  

  console.log("result = "+result);

 //除法例子
  result = 4 / 2;  //输出为result=2
  result = 3 / 2;  //输出为result=1.5

/*
  任何值做- * / 运算时都会自动转换为Number
    我们可以利用这一特点做隐式的类型转换
       可以通过为一个值 —0 *1 /1 来将其转换为Number
*/
  console.log("result = "+result);

  var d = "123";       
  d = d - 1;       //输出为122

  console.log(typeof d);
  console.log(d);

//%例子
result = 9 % 3;      //9除以3  等于3余0  相除取余数    输出为0
result = 9 % 4;      //9除以4  等于2余1  相除取余数    输出为1

console.log("result = "+result);

十五、一元运算符

  一元运算符,只需要一个操作数
  +  正号
      -正号不会对数字产生任何影响  
  —  负号      
      -负号可以对数字进行负号的取反

  —对于非number类型的值
     它会将先转换为number,然后再运算
     可以对一个其他的数据类型使用+,来将其转换为number
     它的原理和number()函数一样
     
     
  var a = 123;
  a = +a;         //输出为123
  a = -a;         //输出为-123

  console.log("a = "+a);

  a = true;    //   输出为boolean    a = -1
  a =  -a;     // 输出为number   a = -1

  a = "123";   // 输出为 a = 123  string
  a = +a;      // 输出为 a = 123  number

  console.log("a = "+a);
  console.log(typeof a);

  var result = 1 + +"2" + 3;    //输出为6   +"2"字符串2转换为number2   1+2+3=6

  console.log("result = "+result);



十六、自增和自减

自增++

 —通过自增可以使变量在自身的基础上增加1
 —对于一个变量自增以后,原变量的值会立即自增1
 —自增分为俩种:后++(a++),前++(++a)
    无论是a++ 还是++a,都会立即使原变量的值自增1
    不同的是a++ 和 ++a的值不同  
    a++的值等于原变量的值  (自增前的值)
    ++a的值等于新值  (自增后的值)

自增--

—通过自减可以使变量在自身的基础上减1
—自减分为俩种:后--(a--) 和 前--(--a) 
   无论是a--还是--a都会使原变量的值自减1 
   不同的是a-- 和 --a的值不同  
   a--的值等于原变量的值  (自增前的值)
   --a的值等于新值  (自增后的值) 

  
//自增例子
  var a = 1;
  //使a自增1
  a++;  //输出为a=2
  ++a;  //输出为a=2

  console.log("a = "+a); 

  var a = 1;
  console.log(a++);   //输出为1

  var a = 1;
  console.log(++a);   //输出为2

  var a = 1;
  console.log("++a = "+ ++a);  //输出为++a=2
  console.log("a++ = "+ a++);  //输出为++a=1
  console.log("a = "+a);   //输出为a=2

  var c = 10;
  //第一次c++ 是在10的基础上自增
  c++;
  //第二次c++ 是在11的基础上自增
  c++;
  console.log(c++);

  var d = 20;   
  console.log(++d);   //输出为21
  console.log(++d);   //输出为22



//d++先用后加 ++d先加后用
  //d++=20 ++d=22 d=22      
  var d = 20; 
  var result = d++ + ++d + d;
  console.log("result ="+result);  //输出为result =64

  var d = 30;
  var result = ++d + d++ + d;
              //31   32    31
  console.log("result ="+result);  //输出为result =94

  var d = 30;
  d = d++;
  /*
     相当于
     d=30
     var e = d++;
      d = e
  */
  console.log("d ="+d);  //输出为d =30


//自减例子
  var num = 10;
  num--;  //输出为num=9
  --num;   //输出为num=9
  console.log("num ="+num); 

  var num = 10;
  console.log(num--);   //输出为10
  console.log(--num);   //输出为9


  var d = 10;
  result = num-- + --num + d;
  console.log("result ="+result);  //输出为24

十七、自增练习

//d++先用后加 ++d先加后用

 var n1 = 10 , n2 = 20;

 var n = n1++; //n1 = 11 n1++ = 10
 console.log("n="+n);  //n=10
 console.log("n1="+n1);  //n1=11

 n = ++n1;   //n1=12 ++n1=12
 console.log("n="+n);  //n=12
 console.log("n1="+n1); //n1=12

 //d--先减后用  --d返回原值
 n = n2--;  //n2=19 n2--=20
 console.log("n="+n);  //n= 20
 console.log("n12="+n2); //n2=19

 n = --n2;  //n2=18 --n2=18
 console.log("n="+n);  //n=18
 console.log("n12="+n2); //n2=18

十八、逻辑运算符

JS中为我们提供了三种逻辑运算法

  ! 非
      — !可以用来对一个值进行非运算
      — 所谓非运算就是值对一个布尔值进行取反操作
         flas变etrue ,  true变flase
      — 如果对一个值进行俩次取反,它不会变化
      — 如果对非布尔值进行元素,则会将其转换为布尔值,然后在取反
          所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值
          可以为一个任意数据类型去俩次反,来将其转换为布尔值
          原理和boolean()函数一样

  $$ 与
      — &&可以对符号俩侧的值进行与运算并返回结果
      — 运算规则:
           — 俩个值中只要有一个值是flase就返回flase
             只有俩个值都是true时,才会返回true
           — js中的“与”属于短路的与
                如果第一个值为flase,则不会看第二个值

  || 或
        — ||可以对符号俩侧的值进行或运算并返回结果
        —  运算规则:
           — 俩个值中只有一个true,就返回true
               如果俩个值都是flase,才返回flase
           —js中的“或”属于短路的或
               如果对一个值为true,则不会检查第二个值

// !

var a = true;   
//对a进行非运算
!a;      //输出为true
a = !a;     //输出为flase   取反一次是flase
a = !!a;    //   取反二次是flase  

console.log("a ="+a);

var b = 10;  //输出为number  
b = !b;   //输出为boolean   b=false
b = !!b;   //输出为boolean   b=true

console.log("b ="+b);
console.log(typeof b);

//   &&

//如果俩个值都是true则返回true
var result = true && true;   // 输出为true
//只要有一个false就返回false
var result = true && false;   //输出为false
var result = false && true;   //输出为false
var result = false && false;   //输出为false

console.log("result ="+result);

//第一个值为true,会检查第二个值
// true && alert("看我出不出来!!");
//第一个值为false,不会检查第二个值
// false && alert("看我出不出来!!");


//    ||

 //如果俩个值都是false则返回false
 resule = false || false;  //输出为false
 //只要有一个true就返回true
 resule = true || false;   //输出为true
 resule = false || true;   //输出为true
 resule = true || true;   //输出为true
 
 console.log("resule ="+resule);    

 //第一个值为false,则会检查第二个值
 false || alert("123");  //会有弹窗
 //第一个值为true,则不会检查第二个值
 true || alert("123");  //不会有弹窗



十九、非布尔值的非与或运算

    && || 非布尔值的情况
       — 对于非布尔值进行与或运算时
           会向将其转换为布尔值,然后在运算,并且返回原值
    — 与运算&&       
       — 如果第一个值为true,则必然返回第二个值
       — 如果第一个值为false,则直接返回第一个值

    — 或运算 ||
       — 如果第一个值为true,则直接返回第一个值
       — 如果第一个值为false,则返回第二个值
       

 //  true && true
 // 与运算:如果俩个值都为true,则返回后边的值
 var  result = 1 && 2;  //输出为2

 //与运算:如果俩个值中有false,则返回靠前的false
 //false && true
 var result = 0 && 2;  //输出为0
 var result = 2 && 0;  //输出为0
 //false && false
 var result = NaN && 0;  //输出为NaN
 var result = 0 && NaN;   //输出为0


 // true || true
 //如果第一个值为true,则直接返回第一个值
 result = 1 || 2;  //输出为1
 result = 2 || 1;  //输出为2
 result = 2 || NaN;  //输出为2
 
 //如果第一个值为false,则直接返回第二个值
 result = NaN || 1;  //输出为1
 result = NaN || 0;  //输出为0
 result = ""  || "hello";  //输出为hello
 result = -1  || "你好";  //输出为-1

 console.log("result ="+result);      


二十、赋值运算符

=
可以将符号右侧的值赋值给符号左侧的变量

  var a = 123; 

+=

a += 5 等价于 a = a + 5

a -= 5 等价于 a = a - 5
*=
a = 5 等价于 a = a 5
/=
a /= 5 等价于 a = a / 5
%= (余数)
a %= 5 等价于 a = a % 5

 var a = 10;
 a = a + 5;  //15
 a += 5;  //输出为15   和a = a + 5;是一样的
 a -= 5; //输出为5  10-5=5
 a *= 5;//输出为50  5*10=50
 a %= 3; //输出为1  10除以3等于3余1


 console.log("10 ="+10);   
 
 

二十一、关系运算符

关系运算符
通过关系运算符可以比较俩个值之间的大小关系

   如果关系成立它会返回true,如果关系不成立则返回false 
大于号
   — 判断符号左侧的值是否大于右侧
   — 如果关系成立,返回 true,如果关系成立则返回 false
=  大于等于
   — 判断符号左侧的值是否大于或等于右侧的值

< 小于号

  — 判断符号左侧的值是否小于右侧
  — 如果关系成立,返回 true,如果关系成立则返回 false

<= 小于等于号

  — 判断符号左侧的值是否小于或等于右侧的值

非数值的情况

—对于非数值进行比较时,会将其转换为数字然后在比较 
— 特殊情况:
    如果符号俩侧的值都是字符串时,不会将其转换为数字进行比较
    而会分别比较字符串中字符的Unicode编码
   
  var result = 5 > 10;  //输出为false 不成立
  result = 5 > 4;   //输出为true 成立
  resulr = 5 > 5;  //输出为false 不成立
  resulr = 5 >= 5;  //输出为true 成立
  result = 5 >= 4;   //输出为true 成立

  result = 5 < 4;    //输出为false不成立
  resulr = 4 <= 4;  //输出为true 成立
 
  console.log("result ="+result);


  //非数值的情况
  console.log(1>true);  //false
  console.log(1>true);  //true
  console.log(1 > "0");  //true
  console.log(10 > null); //true null转换为数字0
  
  //任何值和NaN做任何比较都是false
  console.log(10 <= "hello"); //false "hello"转换为数字NaN
  console.log(true > false);  //

  //如果比较的俩个字符串型的数字,可能会得到不可预期的结果
  console.log("1" < "5");  //true
  console.log("11" < "5");  //true(比较第一位  1和5做比较)
  //注意:在比较俩个字符串型的数字时,一定一定一定要转型
  console.log("11" < +"5"); //false

  //比较俩个字符串时,比较的是字符串的字符编码
   console.log("a" < "b"); //true

   //比较字符编码时是一位一位的进行比较
   console.log("abc" < "a"); //true

   //如果俩位一样,则比较下一位,所以借用它来对英文进行排序 
   console.log("bbc" < "b"); //false 
   console.log("abd" < "bad") //true 
   //比较中文时没有意义

   console.log("戒" > "我"); //true
      

二十二、Unicode编码表

二十三、相等运算符

  相等运算==:
    相等运算符用来比较俩个值是否相等
       如果相等会返回true,否则会返回false

    使用==来做相等运算
      —当使用==来比较俩个值时,如果值的类型不同
         则会自动进行类型转换,将其转换为相同的类型
         然后再比较

   不相等运算!=:
     不相等用来判断俩个值是否不相等,如果不相等返回true,否则返回false
       — 使用!=来做不相等运算
       — 不相等也会对变量进行自动的类型转换,如果转换后相等也会返回false 

    全等运算===:
       — 用来判断俩个值是否全等,它和相等类似,不同的是它不会做自动的类型转换
         如果来个值得类型不同,直接返回false

    不全等!== 
       — 用来判断俩个值是否不全等,和不等类似,不同的是它不会做自动类型转换 
           如果来个值得类型不同,直接返回true  



 //相等运算==

   console.log(1 == 1);  //输出为true 
  
   var  a = 10;
   console.log(a == 4); //输出为false 10不等于4

   console.log("1" == 1); //输出为true  字符串1和数字1相等

   console.log(true == "1"); //输出为true
   console.log(true == "hello"); //输出为false

   console.log(null == 0);  //输出为false
  
   console.log(nill == undefined); //输出为true


   /*
      undefined 衍生自 null
      所以这俩个值做相等判断时,会返回true
   */
   console.log(unsefined == null); //输出为true

    /*
      NaN不和任何值相等 包括他本身
    */
   console.log(NaN == "1");  //输出为false

   var b = NaN;
   //NaN不和任何值相等 所以下面的这个方法行不通
  // console.log(b == NaN);  输出为false
    /*
      可以通过isNaN()函数来判断一个值是否是NaN
       如果该值是NaN则返回true,否则会返回false 
    */    
   console.log(isNaN(b));  //输出为true

//不相等运算!=

   console.log(10 != 5);  //输出为true
   console.log(10 != 10);  //输出为false
   console.log("abcd" != "abcd");  //输出为false
   console.log("1" != 1); ////输出为false

//全等运算===

   console.log("123" === 123);  //输出为false
   console.log(nill === undefined); //输出为false

//不全等!== 

   console.log(1 !== "1"); //输出为true     

二十四、条件运算符

 条件运算符也叫三元运算符
    语法:
       条件表达式?语句1:语句2;
    — 执行的流程:
        条件运算符在执行时,首先对条件表达式进行求值,
             如果该值为true,则执行语句1,并返回执行结果
             如果该值为false,则执行语句2,并返回执行结果  
        如果条件的表达式的求值结果是一个非布尔值,
          会将其转换为布尔值然后在运算   


二十五、运算符的优先级

   ,运算符
   使用,可以分割多个语句,一般可以在声明多个变量时使用       


 //使用,运算符同时声明多个变量
//   var a , b ,c;

//可以声明多个变量并赋值
  var a=1,b=2,c=3;
  alert(b);   //弹窗为2

  
     就和数学中一样,在js运算符也有优先级
       比如:先乘除 后加减
     在js中有一个运算符优先级的表
        在表中越靠上优先级越高,优先级越高越优先计算
        如果优先级一样,则从左往右计算
     但是这个表我们不需要记忆,如果遇到优先级不清楚
        可以使用()来改变
  
   var result = 1 + 2 * 3;
   console.log("result ="+result);  //输出为7 

   
  
     如果||的优先级高,或者俩个一样高,则应该返回3
     如果与的优先级高,则应该返回1

  
   var result = 1 || 2 && 3;
   console.log("result ="+result); //输出为1

二十六、代码块

   我们的语句是由一条一条语句构成的
     语句是按照自上向下的顺序一条一条执行的 
    在js中可以使用{}来为语句进行分组 
         同在一个{}中的语句我们称为是一组语句
         它们要么执行,要么都不执行
         一个{}中的语句我们也称为代码块
         在代码块的后面不用在编写;了
      
    js中的代码块,只具有分组的作用,没有其他的用途
        代码块内部的内容,在外部是完全可见的
        
{ 
    alert("hello");
    console.log("你好");
    document.write("语句");
}
 console.log("a ="+a);  //可以执行

二十七、if语句(一)

 流程控制语句:
     — js中的程序是从上到下一行一行执行的
     — 通过流程控制语句可以控制程序执行流程
          使流程可以根据一定的条件来选择执行
     — 语句分类:
          1.条件判断语句
          2.条件分支语句
          3.循环语句 
 
1.条件判断语句:
     — 使用条件判断语句可以在执行某个语句之前进行判断
          如果条件成立才会执行语句,条件不成立则语句不会执行
     — if语句
        — 语法一:
             if(条件表达式){
                   语句....
             }                           
        if语句在执行时,会先对条件表达式进行求值判断
        如果条件表达式的值为true,则执行if后的语句
        如果条件表达式的值为false,则不会执行if后的语句  
           if语句只能控制紧随其后的那个语句
              如果希望if语句可以控制多条语句
              可以将这些语句统一放到代码块中{}
           if语句后的代码块不是必须的,但是在开发中尽量写上代码块,即使if后只有一条语句        


   if(true) alert("你猜我出来吗");
   
   //条件成立都执行
   var a = 11;
   if(a > 10) 
   {
        alert("a比1大~~~");
        alert("谁也管不了我");
    }

    var a = 15;
    if(a > 10 && a <= 20) 
    {
        alert("a大于10,并且a小于等于20");   //成立
    }
          
 

二十八、if语句(二)

  if语句
     语法二:
        if(条件语句){
            语句.....
        } elae{
            语句.....
        }
  if...else...语句...
     当该语句执行时,会先对if后的条件表达式进行求值判断
         如果该值为true,则执行if后的语句
         如果该值为false,则执行else后的语句
     语句三:
        if(条件语句){
            语句....
        }else  if(条件语句){
            语句....
        }else  if(条件语句){
            语句....
        }elae{
            语句.....
        }
    if...else if...else
     当该语句执行时,会从上到下依次对条件表达式进行求值判断
     如果该值为true,则执行当前语句
     如果该值为false,则继续向下判断
     如果所有的条件都不满足,则执行最后一个else后的语句
     该语句中,只会

//方法一

var age = 60;

 if(age >= 60){
  alert("你已经退休了");
}
else{
  alert("你还没有退休");
}

//方法二
var age = 90;

if(age > 100 && age <= 30){
  alert("活着挺没意思");
}else if(age > 80){
  alert("你也老大不小了");
}else if(age > 60){
  alert("你也退休了");
}else if(age > 30){
  alert("你已经中年了");
}else if(age > 17){
  alert("你已经成年了");
}else{
  alert("你还是个孩子");
}  


二十九、if练习(一)

  从键盘输入小明的期末成绩
  当成绩为100时,奖励一俩BMW
  当成绩为[80-99]时,奖励一台iphone15s
  当成绩为[60-80]时,奖励一本参考书
  其他时,什么奖励也没有
    


   prompt()可以弹出一个提示框,该提示框中会带有一个文本框
   用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数
   该字符串将会作为提示框的提示文字

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


//score就是小明的期末成绩
var score = prompt("请输入小明的期末成绩(0-100):");
//判断值是否合法 (大于100 或则 小于0 或则 不是数字 都要拉出去毙了 )
if(score > 100 || score < 0 || isNaN(score)){

  alert("拉出去毙了");

}
else{

  //根据score的值来决定小明什么奖励  
    if(score == 100){
        alert("奖励一俩BMW");
    }
    else if(score >= 80){
        alert("奖励一台iphone15s");
    }
    else if(score >= 60){
        alert("奖励一本参考书");
    }
    else{
        alert("什么奖励也没有");
    }

}

三十、if练习(二)

/*
   大家都知道,男大当婚女大当嫁,那么女方家长要嫁女儿,当然要提出一定的条件
   高:180cm以上, 富1000万以上, 帅500以上
   如果三个条件同事满足,则"我一定要嫁给你"
   如果三个条件有为真的情况,则:"嫁吧,比上不足,比下有余"
   如果三个条件都不满足,则:"不嫁"
*/


 var height = prompt("请输入你的身高(cm):");
  var money = prompt("请输入你的财富(万):");
  var face = prompt("请输入你的颜值(px):");

  // alert(height+","+money+","+face);
 //如果三个条件同事满足,则"我一定要嫁给你"(同时满足用于&&)
  if(height > 180 && money > 1000 && face > 500){
       alert("我一定要嫁给你");
  }else if(height > 180 || money > 1000 || face > 500){
  //如果三个条件有为真的情况(有一个满足用或||),则:"嫁吧,比上不足,比下有余"
       alert("嫁吧,比上不足,比下有余");
  }else{
       alert("不嫁");
  }         
        

三十一、if练习(三)

编写程序,由键盘输入三个整数分别存入变量num1,num2,num3
对他们进行排序,并且从小到大输出

 //获取用户的三个数
 //prompt()函数的返回值是string类型的
 //在prompt前加+转换为number
 var num1 = +prompt("请输入第一个数");
 var num2 = +prompt("请输入第二个数");
 var num3 = +prompt("请输入第三个数");

 alert(typeof num1);


   if(num1 < num2 && num1 < num3){
          //num1最小  比较num2 和 num3
       if(num2  < num3){
           //num1 num2 num3
           alert(num1+","+num2+","+num3);
       }else{
           //num1 num3 num2
           alert(num1+","+num3+","+num2);
       }
   }else if(num2 < num1 && num2 < num3){
       //num2最小   比较num1 和num3
       if(num1 < num3){
            //num2 num1 num3
           alert(num2+","+num1+","+num3);
       }else{
            //num2 num3 num1
           alert(num2+","+num3+","+num1);
       }
   }else{
       //num3最小  比较num1 和num2
       if(num1 < num2){
            //num3 num1 num2
            alert(num3+","+num1+","+num2);
       }else{
           //num3 num2 num1
           alert(num3+","+num2+","+num1);
       }
   }    
   

三十二、条件分支语句

   
  条件分支语句也叫switch语句
   语法:
       switch(条件表达式){
           case 表达式:
                语句...
                break;
            case 表达式:
                语句...
                break;
            case 表达式:
                语句...
                break;
            defsult:
                语句...
       }

    执行流程:
          switch...case...语句
          在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较   
              如果比较结果为true,则从当前case处开始执行代码
                  当前case后的所有代码都会被执行,我们可以在case的后面跟着一个break关键字
                  这样可以确保只会执行当前case后的语句,而不会执行其他的case
              如果比较结果为false,则继续向下比较
              如果所有的比较结果都为false,则只执行default后的语句

    switch语句和if语句的功能实际上有重复的,使用switch可以实现if的功能  
         同样使用if也可以实现switch的功能,所以我们使用时,可以根据自己的习惯选择          
   
   
   //根据num的值,输出对应的中文

 var num = abc;
/*
 if(num == 1){
     console.log("壹");
 }else if(num == 2){
     console.log("贰");
 }
 */
                                                //   这俩中方法差不多
 switch(num){
     case 1:
        console.log("壹");
        //使用break可以来退出switch语句
        break;
     case 2:
        console.log("贰");
        break;
    case 3:
        console.log("叁");
        break;
    default :
        console.log("非法数字");
        break;        
 }


三十二、条件分支语句练习(二)

   从键盘接收整数参数,如果该数为1-7,打印对应的星期,否则打印非法参数

 var week = 2;
 switch(week){
     case 1:
        console.log("星期一");
        //使用break可以来退出switch语句
        break;
     case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    default :
        console.log("非法数字");
        break;        
 }

三十二、条件分支语句练习(一)

对于成绩大于60分的,输出"合格"。低于60分的,输出"不合格"

//方法一:

 var socre = 59;
  switch(parseInt(socre/10)){
      case 10:
      case 9:
      case 8:
      case 7:
      case 6:
         console.log("合格");
         break;
      default:
         console.log("不合格");
         break;
  }

//方法二:

 var socre = 59;
  switch(true){
      case score >= 60:
         console.log("合格");
         break;
      default:
          console.log("不合格");
          break;
  }
    

三十三、while循环

  /*
     向页面中输出连续的数字
 */

    // var n = 1;
    // document.write(n++ +"
"); //输出1 /* 循环语句: 通过循环语句可以反复的执行一段代码多次 while循环 -语法 while(条件表达式){ 语句... } -while语句在执行时, 先对条件表达式进行求值判断 如果值为true,则执行循环体 循环体执行完毕后,继续对表达式进行判断 如果为true,则继续执行循环体,以此类推 如果值为flash,则终止循环 do...while循环 - 语法 do{ 语句... }while(条件表达式) - 执行流程: do...while语句在执行时,会先执行循环体 循环体执行完毕以后,在对while后的条件表达式进行判断 如果结果为true,则继续执行循环体,执行完毕继续判断以此类推 如果结果为false,则终止循环 实际上这俩个语句功能类似,不同的是while是先判断后执行 而do...while会先执行后判断 do...while可以保证循环体至少执行一次 而while不能 */

// 方法一

//向这种将条件表达式写死为true的循环,叫做死循环
//该循环不会停止,除非浏览器关闭,死循环在开发中慎用
//可以使用break,来终止循环
var n = 1;
while(true){
  alert(n++);
  //判断n是否是10
  if(n == 10){
    //退出循环
    break;
  }
}

//方法二

//创建一个循环,往往需要三个步骤
// 1.创建一个初始化的变量
var i = 0;
//2.在循环中设置一个条件表达式
 while(i < 10){
    alert(i);
    //3.定义一个更新表达式,每次更新初始化变量
    i++;
 }

//方法三

var i = 0;
while(i < 10){
  document.write(i++ +"
"); } // 输出为换行的数字

//方法四

do{
  socument.write(i++ +"
"); }while(i < 10);

三十四、while循环练习

 /*
    假如投资的几年利率为5%,试求从1000块增长到5000块,需要花费多少年

    1000 1000*1.05
    1050 1050*1.05
*/

//定义一个变量,表示当前的钱数   (代码解析)
 var money = 1000;
  //定义一个计数器
  var count = 0;
 //定义一个while循环来计算每年的钱数
 while(money < 5000){
     money *= 1.05;
     //使用count自增
     count++;
 }
 console.log("一共需要"+count+"年");


//  money *= 1.05    //money = money * 1.05  它俩一个意思

var money = 1000;
var count = 0;
while(money < 5000){
     money *= 1.05;
     count++;
 }
 console.log("一共需要"+count+"年");

三十五、while练习(一) 使用if练习一

//将prompt放入到一个循环中
while(true){

//score就是小明的期末成绩
var score = prompt("请输入小明的期末成绩(0-100):");
//判断用户输入的值是否合法
if(score >= 0 && score <= 100){
    //满足该条件则证明用户的输入合法,退出循环
    break;
}
alert("请输入有效的分数");

}

  //根据score的值来决定小明什么奖励  
    if(score == 100){
        alert("奖励一俩BMW");
    }
    else if(score >= 80){
        alert("奖励一台iphone15s");
    }
    else if(score >= 60){
        alert("奖励一本参考书");
    }
    else{
        alert("什么奖励也没有");
    }

三十六、for循环

for语句,也是一个循环语句,也称为for循环

   在for循环中,为我们提供了专门的位置用来放三个表达式:
        1.初始化表达式
        2.条件表达式
        3.更新表达式

     for(初始化表达式;条件表达式;更新表达式){
         语句...
     } 
     
     for循环的执行流程:
        1.执行初始化表达式,初始化变量(初始化表达式只能则执行一次)
        2.执行条件表达式,判断是复执行循环
             3.如果为true,则执行循环
              如果为false,则终止循环
        4.执行更新表达式,更新表达式执行完毕继续重复执行

  
   //方法一:
 //创建一个执行10次的while循环
 //初始化表达式
  var i = 0;
 // 
  while(i < 10){
      //设置更新表达式
      alert(i++);
  }
//方法二:
 for(i = 0 ; i < 10 ; i++){
     alert(i);
 }
 //方法三:
 /*
     for循环中的三个部分都可以省略,也可以写在外部
     如果在for循环中不写任何表达式,只写俩个;
     此时循环是一个死循环会一直执行下去,慎用
 */
 var i = 0;
 for(;i<10;){
     alert(i++);
 }

三十七、for循环练习(一)

打印1-100之间所有奇数之和

//创建一个变量,用来保存奇数之和

var sum = 0;
for(var i = 1 ; i <= 100 ; i++){
    //判断i是否是奇数
    //不能被2整除的数就是奇数(==是偶数 !=是奇数)
    if(i%2 != 0){
        //如果i除以2有余数则证明i是奇数
        // console.log(i);
        sum = sum + i;
    }
}

//奇数总和2500
console.log("奇数之和:"+sum);


三十八、for循环练习(二)

打印1-100之间的所有7的倍数的个数及总和

//3.定义一个变量来保存组合
var sum = 0;
//5.定义一个计数器,来记录数量
var count = 0;
for(var i = 1 ; i <= 100 ; i++){
  // console.log(i);  (1.先打印出1到100)

  //2.判断i是否是7的倍数(输出7的倍数)
  if(i%7 == 0){
    // console.log(i);
    sum += i;   //(4.求总和)
    count++;    //(5.使计数器自增1)
  }
}
//输出总和
console.log("总和为:"+sum);   //合为735
//输出总数量
console.log("总数量:"+count);  //数量为14    


三十九、for循环练习(三)

水仙花数

水仙花数是指一个3位数,它的每个位上的数字的3 次幂之和等于它本身
 (例如: 1^3 + 5^3 + 3^3 = 153),请打印所有的水仙花数

//先打印所有的三位数

 for(var i = 100 ; i < 1000 ; i++){
     //获取i的百位 十位 个位的数字
     //获取百位数
     var bai = parseInt(i/100);
     //获取十位上的数字
    var shi = parseInt((i-bai*100)/10);
     //获取个位上的数字                                                                                                                      
     var ge = i % 10;
     //判断i是否是水仙花数
     if(bai*bai*bai+shi*shi*shi+ge*ge*ge == i){
     console.log(i);   //输出的结果为153 370 371 407
    }
 }  

四十、质数练习

在页面中接收一个用户输入的数字,并判断该数是否是质数

质数:只能被1和它自身整除的数,1不是质数也不是合数,质数必须是大于1的自然数
   
 var num = prompt("请输入一个大于1的整数");
   //判断这个值是否合法
    if(num <= 1){
        alert("该数值不合法");
    }else{
        //创建一个变量来保存当前的数的状态
        //默认当前num是质数
        var flag = true;

        //判断num是否是质数
        //获取2-num之间的数
        for(var i=2;i

四十一、嵌套的for循环

/*
  通过程序,在页面中输出如下的图形
 1 
  *****
  *****
  *****
  *****
  *****
  2
  *     1  <1   i=0
  **    2  <2   i=1
  ***   3  <3   i=2
  ****  4  <4   i=3
  ***** 5  <5   i=4
3
  ***** 1   j<5(5-0)  i=0
  ****  2   j<4(5-1)  i=1
  ***   3   j<3(5-2)  i=2
  **    4   j<2(5-3)  i=3
  *     5   J<1(5-4)  i=4
  
*/

 /*
   1 
  *****
  *****
  *****
  *****
  *****
 */

 //向body中输出一个内容
 //document.write("***** 
"); (方法一) //document.write("*****
"); //document.write("*****
"); //通过一个for循环来输出图形 //这个for循环执行几次,图形的高度就是多少 //它可以用来控制图形的高度 for (var i=0;i<5;i++){ //高 // document.write("*****
"); //方法二 //在循环的内部创建一个循环,用来控制图形的宽度 //目前我们的外部的for循环执行1次,内部的就会执行5次 //内层循环可以来决定图形的宽度,执行几次图从的宽度就是多少 for(var j=0;j<5;j++){ //宽 document.write("*   "); // 空格 } //输出一个换行 document.write("
"); //最终输出一个5*5的*矩形 } /*2 * ** *** **** ***** */ for(var i=0;i<5;i++){ for(var j=0 ; j"); } //最终输出一个梯形的* /* 3 ***** **** *** ** * */ for(var i=0 ; i<5 ; i++){ for(var j=0 ; j<5-i ; j++){ document.write("*   "); } document.write("
"); }

四十二、for循环练习(一)

1.打印99乘法表

   
 //创建外层循环,用来控制乘法表的高度
  for(var i=1; i<=9 ; i++){
      //创建一个内层循环来控制图形的宽度
      for(var j=1 ; j<=i ; j++){
          document.write(""+j+"*"+i+"="+i*j+"");
      }
      //输出一个换行
      document.write("
"); }