JS基础

简介:

一.定义

            基于浏览器的语言;

               基于面向对象;c语言面向过程,java面向对象:继承,封装,多态;

               事件驱动;

               脚本语言;

二.作用:

           表单验证,减轻服务端的压力;

             添加页面动画效果;

             动态更改页面内容;

             AJax网络请求;

三.组成部分:

                  ECMAScript;脚本程序语言, 语言标准ES5.1,最新ES6.0;

                    语法,变量和数据类型,

                    DOM; 文档对象模型 ;文档节点

                    BOM浏览器对象模型window:history,doucument,location

四.javaScript基本结构:

                               <script type="text/javascript">

                                                   javascript语句

                                                  </script>

五.使用JS的三种方式:

1.HTML标签中的内嵌JS;(不提倡使用)

2.HTML页面中直接使用JS;

      <script type="text/javascript">

                             javascript语句

                              </script>

                        3.引用外部JS文件; 

            <script language="JavaScript" src="">

    </script>

    【注意事项】

    1.页面中JS代码与引用JS代码,可以嵌入到HTML的任何位置,但是位置不同会影响到JS代码的执行顺序;

    例如:<script>在body前面,会在页面加载之前执行JS代码;

    2. 页面中的JS代码,使用type="text/javascript";

    3.引用外部JS文件,使用language="JavaScript";

     引用外部JS文件的<script><script>标签,必须成对出现,且标签内部不能有任何代码;

        单行注释ctrl+/

       段落注释ctrl+shift+/

 六.JS中声明变量的写法:

              1.写法:

                     var width=10;//使用var生命的变量,只在当前函数作用域有效;

                     width=11;//不使用var直接赋值生成的变量,默认为全局变量,整个JS条件有效;

                     var a,b,c=1; 同时声明多个变量,变量之间用英文,分割,但是,复制需要单独赋值,例如上式中,只有c=1,ab:undefined;

              2.变量的命名规范:

                                                    字母数字下划线_和$符号;

                                                    区分大小写,大小写字母为不同变量;                                  

              3.变量名要符合驼峰法则 :

                     变量开头为小写,,之后每个首字母大写(单词之间用下划线分割)

                       例如:jiang_hao_shi_shuai_ge 

                                JiangHaoShiShuaiGe  

              4.JS中变量的数据类型:

              undefined:未定义,用var声明的变量,没有进行初始化赋值;

              Null:表示为空的引用;

              number;

              Boolean:真假,可以是小数,也可以是整数;

              String:用“”或‘’包裹的内容,成为字符串;

              object:(复杂数据类型:函数,数组)  

             5.常用的数值函数:

            ①  isNaN():用于判断一个变量或常量是否为NaN(非数值)。

  使用isNaN判断时尝试使用number()函数进行转换,如果能够转换为数字,则不是非数值,结果为false;

              “111”纯数字字符串,false

              “” 空字符串,false

              “la”包含其他字符,true

              true/false 布尔类型,false

             ② number():将其他类型转换成数值类型

       【字符串类型转数值】

              ①.字符串为纯数值字符串时,会转为对应的数字“111”-->111;

              ②字符串为空字符串时,会转为0,“”-->0;

              ③ 字符串包含其他非数字字符时,不能转换,“111a”-->NaN;

       【布尔类型转数值】

              true->1;fulse->0;

       【Null/undefined专数值】

              Null->0,undefined->NaN;

         [object类型转数值]

            (以后在了解)  先调用valueof函数,确定函数是否有返回值,再根据上述各种情况判断;

         parseInt:将字符串转换成数值;

           ①.空字符串不能转,结果为NaN;""->NaN;

           ②.纯数字能转,小数点后面除掉;123->123;123.45->123;

           ③.包含其他字符,会截取第一个非数值字符前的数值部分。

               "123a456"->123;"a123a234"->NaN;

           ④.parseInt只能转string类型:Boolean/null/undefined均为NaN;

         parseFloat:将字符串转换成数值;

            使用方式同parseInt,但是当转化小数时保留小数点;转化整数时保留整数;

            123.5->123.5;  123->123;

         typeof检测变量的数据类型

                             未定义->undefined

                             字符串->string;

                              true/false->boolean;

                             数值->number;

                             对象/null->object;

                             函数->function; 

 【声明变量注意事项】:

                  1.JS中所有变量类型声明,均使用var关键字,变量的具体数据类型,取决于给变量赋值的执行;

                  2.同一变量可以在不同赋值时,修改变量的数据类型

                      var width=10; 变量为整形;

                      width="哈哈"; 变量被改为字符串;

                  3变量可以使用var声明,也可以省略;【区别】是否为全局变量;

                  4.同一变量名可以多次用var声明,但是并无任何含义,也不会报错,第二次之后的声明,只会被理解为赋值

 JS中的输出语句

          * document.write():输出语句,将write中的内容打印在浏览器屏幕上;

          * [使用时注意]:除变量、常量以外的内容,打印时必须放到“”中;变量常量必须放到“”外;

          * 打印的内容有多部分组成时,之前用+链接;

          * 例如:document.write("左手中的纸牌:"+left+“<br/>”)

 

                                                                            第二部分

 一.【算术运算】

     + 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减

     +:有两种作用,链接字符串/加法运算;

         当+两边均为数字时,进行加法运算,当任意一边有字符串时,连接字符串,连接之后的结果仍为字符串;

     /:结果是多少就是多少;

     %:取余数;

     ++:自增运算符,变量在原来的基础上+1;--:同理;

     =:赋值;

     +=:a+=5——>a=a+5;

     -=:a-=5——>a=a-5;前者的执行效率快;

二、【关系运算】:

   == 、=== !=、>、<、>=、<=

     ==:等于;类型相同,同===,类型不同,将等式两边类型不同时,先用number()转换成数值类型,在判断

     null==undefined 成立;null===undefined不成立

     ===严格等于;类型不同,直接返回false,类型相同,在进行下一步判断;

  条件运算符(多目运算):a>b?true:false

  当?前面的部分运算结果为true时,执行:前面的代码,当?前面的部分运算结果为false时,执行:后面的代码;

  可以多层嵌套;例如:var jiegao=num>5?"大了":(num=5?"蒙对了":"小了");

【运算符的优先级】

  ()

! ++ --

  * / %

  + -

  > < <= >=

  == !=

  &&

  ||

  各种赋值:= += /= *=

 

                                                                    第 三 部 分

一.[if-else]写法:

  if(判断条件){

      //条件为true时执行;

}

else{

      //条件为false时执行;

}

if()中的表达式,运算之后的结果应改为:

Boolean:true真   false假

String,非空字符串为真,空字符串为假;

Null/NaN/Undefined:全为假;

Object:全为真;

else{}结构根据具体情况可省略;

二.【多层if、阶梯if】

1、结构写法:

            if(条件一){

                     条件一成立

              }

     else if(条件二){

                     条件一不成立&&条件二成立

          ( else if可以有多个 )      

              }

        else{

              条件一不成立&&条件二也不成立

              }

    2、多重if结构中,各个判断条件是互斥的,只能选择其中一条路;

    3、if-else的{}可以省略,但不提倡,

                如果省略{},则,if/else结构包含的代码,仅为其后最近的一行(分行结束);

                如果省略{},则,else结构永远属于其前方最近的if结构;

 

三.【嵌套if结构】

1、写法:

        if(条件一){

         条件一成立

                   if(条件二){

                   条件一成立,条件二也成立

                                  }

                      }

      else{

     条件一不成立

            }

四.【switch分支结构】

1.结构写法:

switch(表达式){

case 常量表达式1:  语句1; break;

case 常量表达式2:语句2; break;

  defalt:  语句;break;

                      }

【注意事项】:

①switch()中的表达式,以及每个case后面的表达式,(对象和数组不行)可以为任何js支持的数据类型;

②case后面的所有常量表达式必须各不相同,否则只会执行第一个;

③case后的常量可以是任何数据类型,同一个switch结构的不同case可以是多种不同的数据;

④switch结构在进行判断的时候,采用的是全等判断===;

⑤break的作用:执行完case代码后跳出当前switch结构;

   缺少break的后果:从正确的case项开始依次执行所有的case和defalt

⑥switch结构在判断时,只会判断1次正确答案,当遇到正确的case项后,将会不在判断后续case项;

   switch的结构执行速率要快于多重if结构,在多路分支时,可优先考虑switch结构;

 

 

 五.循环结构

循环结构的步骤:

      1声明循环变量

      2判断循环条件

      3执行循环体(while中{})操作

      4更新循环变量

  然后,循环执行2,3,4

 

【js中循环结构中支持的数据类型】

     Boolean:true真   false假;

     String,非空字符串为真,空字符串为假;

     number():0为假,一切非0全为真

     Null/NaN/Undefined:全为假;

     Object:全为真;

while 循环特点:先判断,在执行;

do-while:限执行,再判断,即便初始条件不成立,do-while循环至少也执行一次

【for循环】:  先判断再执行

三个表达式均可由多部分组成,之间用逗号组成,但是第二部分的判断条件需要用&&链接,最终条件需要为真/假.

for(表达式1,表达式2,表达式3){

语句;

}

1,定义循环变量;

2.判断循环条件;

3,更新循环变量;

三个表达式均可省略,但是两个;不能省;

例如:



















本文转自xsster51CTO博客,原文链接: http://blog.51cto.com/12945177/1930146,如需转载请自行联系原作者



相关文章
|
JavaScript
JS基础之解构赋值
解构赋值 在js中,我们经常会将对象或者数组里面的一部分数据作为参数传递给函数,如果我们使用传统的.方法会很麻烦。
|
移动开发 JavaScript 前端开发
JavaScript基础知识梳理-上
对JavaScript基础知识梳理-上
198 31
JavaScript基础知识梳理-上
|
存储 JavaScript 前端开发
JavaScript基础(一篇入门)
JavaScript基础(一篇入门)
199 0
JavaScript基础(一篇入门)
|
JavaScript 前端开发
2021琴理工作室JS基础教学(三)
当网页被加载的时候,浏览器就会创建文档对象模型,也就是dom 而dom可以看做一颗树
66 3
2021琴理工作室JS基础教学(三)
|
JavaScript 前端开发
JavaScript 入门基础 - 运算符(三)
文章目录 JavaScript 入门基础 - 运算符(三) 1.什么是运算符 2.表达式和返回值 3.算术运算符概述 4. 赋值运算符 5.递增和递减运算符 5.1 递增和递减运算符概述 5.2 递增运算符 5.2.1 前置递增运算符 5.2.2 后置递增运算符 5.2.3 后置和前置运算符的区别 6. 比较运算符 7. 逻辑运算符 7.1 逻辑运算符概述 7.2 逻辑与 7.3 逻辑或 7.4
134 0
JavaScript 入门基础 - 运算符(三)
|
存储 JSON JavaScript
JavaScript 入门基础 - 变量 / 数据类型(二)
JavaScript 入门基础 - 变量 / 数据类型(二)
95 0
JavaScript 入门基础 - 变量 / 数据类型(二)
|
JavaScript 前端开发 物联网
JavaScript 入门基础 / 概念介绍(一)
JavaScript 入门基础 / 概念介绍(一)
122 0
JavaScript 入门基础 / 概念介绍(一)
|
JavaScript 前端开发 Java
JavaScript的基础使用
JavaScript的基础 一、javascript简介 JavaScript简称js,最初由网景(现在的Mozilla)公司创建,由于商标冲突原因,其标准版本命名为ECMAScript,但是一般人们还是叫JavaScript,只在谈标准的时候说到ECMAScript这个名字。值得注意的是JavaScript与java没有任何关系,就像雷峰塔(神话中镇压白娘子的塔)和雷锋。此外js(JavaScript)和jsp(java servlet pages)也没有关系。   js的工作分为两部分,一部分属于js语言本身的特性,而另一部需要依靠宿主环境(web浏览器)才能完成。 二、javascri
JavaScript的基础使用
|
JavaScript 前端开发
vue js文字跑马灯基础版本
提供两种解决思路
267 1
|
JavaScript 前端开发
原生js制作选项卡详解,适合无基础的人学习
原生js制作选项卡详解,适合无基础的人学习
123 0
原生js制作选项卡详解,适合无基础的人学习