JavaScript基础语法

喜夏-厌秋 提交于 2020-02-23 19:11:12

【使用JS的三种方式】
   1、在html标签中,直接使用JS(并不提倡使用):
   栗子:<button onclick="alert('我好啊')">点本宝宝</button>
   不符合内容与行为分离的要求!
   
   2、在html页面中使用<script></script>包裹JS代码:
   栗子:<script type="text/javascript">
      JS代码;
        </script>
   script标签可以放到页面的任何位置。
   
   3、引入外部的JS文件
   <script language="JavaScript" src="JS/01.js" ></script>
   
   【注意事项】
   1、<script></script>可以嵌入页面的任意位置。但是,位置的不同会导致JS代码的执行顺序不同;
   比如:<script></script>放到<body></body>前面,则JS代码会在页面加载之前执行。
   2、引入外部的JS,<script></script>必须是成对出现的标签。而且,标签中不能有任何JS代码。
   
   JS中多行注释。ctrl+shift+/
   JS中单行注释。ctrl+/


   【JS中变量】
   1、JS中变量申明的写法:
      var num=1;//使用var申明的变量,属于局部变量,只在当前作用域有效;
      num=1;//不用var申明的变量,默认为全局变量,在整个JS文件中有效。
      var x=1,y=2,z=1;//使用一行语句申明多个变量,下式中,x,y属于以申明,但是未赋值状态,结果为undefined;
      var x,y,z=1;
      alert(x);
      alert(y);
      alert(z);


   【申明变量注意事项】
   1、JS中所有变量的申明,均使用var关键字,变量具体是什么数据类型,取决于给变量赋值的类型。
   2、同一个变量,可以在多次不同赋值时,修改变量的数据类型;
   var a=1;//从初始申明,a属于整形
    a="chuanchuan";//重复赋值时,整数型的a被修改为字符串型类型;
   3、变量可以使用var申明,也可以不实用var申明。
   【区别】使用var申明为局部变量,不使用var申明为全局变量;
   4、只用var申明,但是不赋值,结果为undefined;
   例如:var a;//a为undefined。
   但是,如果不申明也不赋值a,直接使用会报错。
   5、同一变量名可以多次使用,但是后面的var并没有用,第二次使用var申明时,只会被理解为普通的赋值操作。
   
 【变量名的命名要求】
      1、只能有字母,下划线,数字组成;
      2、开头不能是数字;
      3、变量名区分大小写,大写字母与小写字母为不同变量;


 【变量名的命名规范】
  1、要符合小驼峰法则:首字母小写之后每个单词的首字母大写。
      例如:myNameIsChuanChuan
   2、或者使用匈牙利名命法
   my_name_is_chuan_chuan
   3、mynameischuanchuan  能用,但是不规范
   
   【JS数据类型】
       1、Undefined:未定义。已经使用var神明的变量,但是没有赋值的情况。如:var a;
       2、Null:空引用。
       3、Boolean:布尔类型。表示真假,只有两个值,true和flase
       4、Nnumber:数值类型,可以是整数,也可以是小数
       5、String:字符串类型,用""或''包裹的内容,称为字符串
       6、Object:对象类型,
       
   【常用的数值函数】
       1、isNaN():判断一个变量或常量是不是NaN(not a number 非数值);
           使用NaN()判断时,会尝试使用Number()函数进行转换,如果最终结果能够转换为数字,则不是NaN,结果为false。
   
    2、Number()函数:将其他类型的数据,尝试转为数值型。
    [字符串类型]
    字符串为纯数值字符串,会转为对应数字;例如:"111"->111
    字符串为空字符串,会转为0;例如:""->0
    字符串包含任何其他字符串时,都不能转;例如:"1a"->NaN
   [boolean类型]
   true->1     flase->0
   【Null/Undefined】
   Null->0     Undefined->NaN
   
   parseInt():将字符串转为整数类型;
   纯数值字符串,能转。
   "12"->12;  "12.9"->12(小数转换时,直接抹掉小数点,不能进行四舍五入)
   空字符串,不能转。""->NaN
   包含其他字符串,会截取第一个非数值字符串前的数字部分
   "123a456"->123;   "a123b456"->NaN
   parseInt()只能转字符串。转其他类型,全是NaN。
   
   【Number函数与ParseInt函数的区别】
   1、Number函数可以转各种数据类型,ParseInt函数只能转字符串
   2、两者在转字符串时,结果不完全相同。(详解见上面解释)
   
   parseFloat:将字符串转为数值型;
   转换规则与ParsenInt相同,只是如果有小数,则保留小数点;如果没有小数,则依然是整数;
   "12.5"->12.5;   "12"->12
   
   typeof:检测变量的数据类型:
   字符串->String        数值->Number     未定义->Undefined
   true/false->Boolean   函数->function   对象/Null->object   
   
   【JS中常用的输入输出语句】
   1、document.write();将括号中内容打印输出到浏览器屏幕上;
   使用时需注意:除变量,常量外所有内容,必须放到""中,变量和常量必须放到""外面;
   如果同时又变量和字符串,必须用+链接
   例如:document.write("左手中的纸牌:"+left+"<br/>");
   2、alert();使用弹窗输出;
   弹窗警告,()中的内容与上述要求相同。
   3、prompt();弹窗输入
   接受两部分参数:
   ①输入框上面的提示内容,可选;
   ②输入框里面的默认信息,可选;
   当只写一部分时,表示输入的内容。点击确定按钮,变量被赋值为输入内容;点击取消按钮,变量将被赋值为null;
   输入内容时,默认接收的数据类型都是    字符串!
   例如:var num1 = prompt("请输入第一个数:"); 
   var num2 = prompt("请输入第二个数:"); 
   var sum  = parseFloat(num1)+parseFloat(num2);
   alert("结果是:"+sum);

【算术运算】
       + 、-、*、 /、 %、++ 、--
      +:有两种作用,链接字符串/加法运算。当+两边全为数字时,进行加法运算;当+两边任意一边为字符串时,
       起链接字符串作用,链接作用,链接之后结果为字符串。
       除+外,其余符号运算时,会将左右变量用Number函数转为数字。
      
      /:结果保留小数点。
      ++:自增运算符,将  变量  在原有基础上+1。
      --:自减运算符,将  变量  在原有基础上-1。
     
      【a++和++a异同】
      1、相同点:无论a++还是++a,运算完后,a的值均会+1;
      2、不同点:a++,先用a的值去运算,再把a+1;
           ++a,再把a+1,再用a的值去运算;
     
   【赋值运算】
       =  +=  -=  *=  /=  %=
       +=:a+=b;相当于a=a+b;但是前者运算效率比较快,推荐+=的写法。
      
   【关系运算】
       ==、  !=、>、<、>=、<=
         关系运算符运算之后的结果,只能是Boolean类型;
         判断一个数字是否处于某个区间,必须用&&链接;
         例如:a<10 && a>0
      ===:严格等于,要求不但类型相同,值也必须形同。
      ==:等于,类型相同与===效果一样,类型不同时,会尝试用Number将两边转数字,然后再判断。
         但是,有个别特例,如:Null==false ×    Null==Undefined  √  Null==Null  ×
     
   【条件运算符(多目运算)】
       a>b?true:false 
         当?前面运算结果为true时,执行:前面的代码
         当?后面运算结果为true时,执行:后面的代码
         冒号两边为数值,则整个式子可用于赋值。var a =1<2?1:2;
         冒号两边为数值,将直接执行代码。1<2 ? alert(1):alert(2);
         多目运算符可以多层嵌套。var a =1<2?alert(1):(1>0?4:5);
      
   【位运算符、 逻辑运算符】
        &&、||、!
      && 两边都成立,结果为true
      || 两边有任意一边成立,结果为true
      && ||同时存在时,&&的优先级比||高
      
   【运算符的优先级】
       1、()
       2、! ++  --  单目运算符
       3、*  /  %
       4、>  <  >=  <=
       5、==  !=
       6、&&    注意:&& ||同时存在时,&&的优先级比||高
       7、||
       8、=  += -=  *=  /=

【if-else结构】
   1、结构的写法:
   if(判断条件){
    条件为true,执行if{}
   }else{
    条件为false,执行if{}
   }
   2、注意事项:
   else{}语句块。可以根据情况进行省略。
   if和else后面的{}可以省略,但是省略{},if和else后面只能跟一条语句;(所以不建议省略{})
  
   3、if的()中的判断条件,支持的情况:
   Boolean:true为真,false为假
   string:空字符串为假,所有非空字符串为真。
   Number:0为假。所有非0数字为真。
   Null/Undefined/NaN:全为假。
   Object:全为真。
  
   【多重if、阶梯if结构】
   1、结构写法:
   if(if条件一){
    条件一成立,执行操作
   }else if(条件二){
    条件一不成立&&条件二成立,执行的操作
   }else{
    上条件都不成立,执行的操作
   }
   2、多重if结构中,各个判断条件是互斥的,执行选择其中一条路执行,
   遇到正确选项并执行完以后,直接跳出结构,不再判断后续分支
  
   【嵌套if结构】
   1、结构写法:
   if(条件一){
    条件成立
    if(条件二){
     条件一成立&&条件二成立
    }else{
     条件一成立&&条件二不成立
    }
   }else{
    条件一不成立
   }
   2、在嵌套if结构中,如果省略{},则else结构永远属于离他最近的if;
   3、嵌套结构可以多层嵌套,但是一般不推荐超过三层
    能用多重if结构一般不推荐使用多重if结构。
    
  【switch多路分支结构】
  【工作原理】首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。
  如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
  1、结构写法:switch(表达式){
      case (可以是表达式):
       执行代码块 1
      break;
      case 2:
       执行代码块 2
      break;
      case 3:
       执行代码块 3
      break;
      default:
      break;
     }
  2、switch结构()中的表达式可以是各种JS支持的数据类型;
  3、switch结构在进行判断时,使用==判断;
  4、case后面的表达式可以是各种数据类型,可以是表达式,但是值要求各不相同,否则也只会执行第一个case。
  5、break跳出当前当前switch结构;缺少break后果  从第一个正确的case项开始,执行后面的所有case和default;
  原因:switch结构进行判断的时候,只会判断一次正确答案。当遇到正确case之后,将不会再判断后续的项目。
  6、 switch执行效率要比多重if快。在多路分支中,推荐优先使用。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!