zoukankan      html  css  js  c++  java
  • JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript
    1、是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言
    2、作用:表单验证,减轻服务器压力
    添加野面动画效果
    动态更改页面内容
    Ajax网络请求 ()
    3、组成部分:ECMAScript() DOM(文档对象模型document) BOM(浏览器对 象模型)
    ECMAScript:语法 变量和数据类型 运算符 逻辑控制语句 关键 字、保留字 对象
    4、基本结构:<script type="text/javascript">
    语句
    </script>
     
    变量:变量名由字母数字下划线$符号组成。开头不能
     
     
    <!--[使用js的三种方式]
    1、html标签中内嵌js;
    2、html页面中直接使用js:
    <script type="text/javascript">
    //js代码
    </script>
    3、引用外部js文件:
    <script language="JavaScript" src="js文件路径"></script>
     
    【注意事项】
    ① 页面中js代码与引用js代码,可以嵌入到html页面的任何位置。但是,位置不同会影响到js代码的
    执行顺序。
    例如:<script>在body前面,会在页面加载之前执行js代码。
     
    ② 页面中js代码,使用type="text/javascript"
    引用外部的js代码文件,使用language="JavaScript"
     
    ③ 引用外部js文件的<scritp></scritp>标签必须成对出现,且标签内部不能有任何代码。
     
     
    -->
    /*[js中的变量]
    * 1、js中变量声明的写法;
    var width=10; 使用var声明的变量,只在当前的函数作用域有效
    width1=11; 不使用var,直接赋值生成的变量,默认为全局变量,整个js文件有效。
    var a,b,c,=1;//同一声明语句同时声明多个变量,变量之间用英文逗号分隔,但赋值要单独赋值
    ,例如上式中只有c赋值为1 a/b为undefined(未定义)
    [声明变量注意事项]
    ① js中所有变量类型的声明,均使用var关键字。变量的具体数据类型,取决于给变量的赋值执行
    ② 同一变量,可以在多次不同赋值时,修改变量的数据类型;
    var width=10; //width为整形
    width="哈哈";//width改为字符串类型;
    ③ 变量可以使用var声明,也可以省略var。【区别】不使用var 默认为全局
    ④ 同一变量名,可以多次用var声明。但是没有任何含义,也不会报错。第二次之后的声明,只会被
    理解为未赋值。
     
    * 2、变量的命名规范;
    ① 变量名只能有字母数字下划线和$组成;
    ②开头不能是数字
    ③ 变量区分大小写,大写与小写为不同变量;
    * 3、变量要符合驼峰法则;
    变量开头为小写,之后每个单词首字母大写;(或单词之间用下划线分开);
    LiuMengHenPiaoLiang
    liu_meng_hen_piao_liang
    4、js中的变量的数据类型
    undefined:未定义,用var声明的变量,没有进行初始化赋值var a;
    null:表示空值;例如,空的对象,空的数组,
    boolean:真假,可选值 true/false
    number:数值类型。可以是小数也可以是整数。
    string:字符串;用"" 或'' 包裹的内容,成为字符串
    object:对象(复杂数据类型)
    5、常用的数值函数
    ① isNaN:用于判断一个变量或常量,是否为NaN(非数值)
    使用isNaN判断时,会尝试使用Number()函数进行转换,如果能转换为数字,则不是非数值
    ,结果为false.
    "111" 纯数字字符串,false ;"" 空字符串,false; "1a"包含其他字符,true;
    true/false 布尔类型,false;
    ② Number():将其他类型转换为数值类型。
    【字符串类型转数值】
    >>>字符串为纯数值字符串会转为对应的数字"111"->111
    >>>字符串为空字符串时,会转为0 ""
    >>>字符串包含其他非数字字符时,不能转换,直接赋值。
     
    【布尔Boolean类型转数值】
    true->1 false->0
     
    【null/undefined 转数值】
    null->0 undefined->NaN
     
    【object 类型转数值】
    *先调用ValueOf方法,确定函数是否有返回值,再根据上 述各种情况判断。
    *
    ③ parseInt:将字符串转换为数值类型;
    >>>空字符串不能转。结果为NaN;
    >>>纯数字字符串,能转。"123"->123 ; "123.5"->123;(小数转换时直接抹掉小数点,不四舍五入)
    >>>包含其他字符的字符串。会截取第一个非字符串前的数值部分。
    "123a456"->123;"a123456"->NaN
    >>>parseInt只能转string(字符串)Boolean/null/undefined 均为NaN
    ④ parseFloat:将字符串转换为数值类型;
    >>>使用方式同parseInt,但是当转换小数字符串时,保留 小数点;转换整数时,保留整数。
    "123"->123 ; "123.5"->123.5;
    ⑤ typeof:用来检测变量数据类型;
    未定义->undefined 字符串->string true/false->Boolean
    数值->Number 对象/null->object 函数->function
     
     
     
     
    数据类型
    undefined
    null:空值
    boolean:内容显示对错
    number:数字
    string:字符串
    object:对象(复杂数据类型)
     
    */
     
    var width;//声明变量
    width1=11; //给变量赋值
    alert(width);
    var width=10; //声明变量的同时,直接赋值
     
    var x=8,y=9,z=10;
    alert(x)
     
    /*
    js中的输出语句
     
    * document.write();
    * 输出语句,将write的()中的内容打印在浏览器屏幕上;
    * 使用时注意:除变量/常量以外的任何内容,打印时必须""中。变量/常量必须放到""外。
    * 打印内容同时有多部分时之间用+链接
    * 例如:document.write("左手中的纸牌:"+left+"<br />")
    *
    * alert();
    * 弹窗警告,()中的使用方式同上。
    * */
     
    //左手换右手的数字
    var left=10
    var right=8
     
    document.write("<h3>输出互换前手中的纸牌:</h3>");
    document.write("左手中的纸牌:"+left+"<br />");
    document.write("右手中的纸牌:"+right+"<br /><br />");
     
    var center;//声明一个中间变量
    center=left;//左手的值给中间变量
    left=right;//把右手的值给左手
    right=center//把中间的值给右手
     
     
    document.write("<h3>输出互换后手中的纸牌:</h3>");
    document.write("左手中的纸牌:"+left+"<br />");
    document.write("右手中的纸牌:"+right+"<br /><br />");
     
     
    js中的运算符
    1、 算术运算
    + 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减
     
    +:有两种作用,链接字符串/加法运算;当加号两边均为数字时,进行加法运算;当加号两边有任意一边为字符串
    进行字符串连接,连接之后结构仍为字符串。
    ++:自增运算符,将变量在原有基础上+1
    --:自减运算符,将变量在原有基础上-1
     
    【n++与++n】
    n++:先使用n的值进行计算,然后再把n+1;
    ++n:先把n的值+1,然后再把用n+1的值去运算;
     
    相同点:不论n++还是++n,在执行完代码以后,均会把n+1
    例如:var a=3;
    var b,c;
    b= a++ +2; //a=3 b=6 a=4
    c= ++a +2; //a=4 a=5jj
     
     
    2、 赋值运算
    = 赋值、 += -= *= /= %=
     
    +=:a+=5;相当于a=a+5;但是前者执行效率要比后者快。
     
    3、 关系运算
    == 等于、=== 严格等于、 != 不等于、 >、 <、 >=、 <=;
     
    ===:严格等于,类型不同直接返回false;类型相同,再进行下一步判断。
    == :等于,类型不同,尝试将等式两边转为数字,再判断;类型相同,再进行下一步判断。
    null == undefined √ null=== undefined ×
     
    4、条件运算符(多目运算)
    a>b?true:false
    有两个关键符号 ?和:
    当?前面的运算结果为true时,执行:前面的代码
    当?前面的运算结果为false时。执行:后面的代码
    >>>夺目运算符可以多层嵌套:
    例如:var jieguo = num>5?"输入太大":(num==5"蒙对了":"输入太小")
     
    5、逻辑运算符
    && 与、|| 或、!非、
     
    [运算符的优先级]
    () 算最算
    ! ++ --
    % / *
    + -
    > < >= <=
    == !=
    &&
    ||
    各种赋值= += *= /= %=
     
     
    js中的分支结构
    /*[if - else结构]
    * 1、结构写法:
    if(判断条件){
    //条件为true时执行
    }else{
    //条件为false时执行
    }
    2、if()中的表达式,运算之后的解果应该为:
    ① Boolean:true 真 false 假
    ② String: 非空字符串为真 空字符串为假
    ③ Number: 0为假,一切非0均为真
    ④ Nan/Null/Undefined: 全为假
    ⑤ Object:全为真
    3、else{}结构,可以根据具体情况省略
    */
    var num={};
    if(4){//条件为true时执行
    document.write("if条件成立");
    }
     
    else{//条件为false时执行
    document.write("if条件不成立");
    }
    /*{多重if、阶梯if}
    1、结构写法:
    if(条件一){
    //条件一成立
    } else if(条件二){
    //条件一不成立&&条件二成立
    //else if部分 可以有n多个。
    }else {
    条件一不成立&&条件二不成立
    }
    2、多重if结构中,各个判断条件是互斥的!只能选择其中一条。
     
    3、if else 的{}可以省略,但一般不提倡;
    如果省略{}则,if else结构包含的代码,仅为其后最近的一行(分号结束);
    如果省略{}则, else 结构永远属于其前方最近的一个if 结构。
    */
     
    /*【嵌套if结构
    1、结构写法:
    if (条件一){//条件一成立
    if (条件二){//条件一成立&&条件二成立}else{//条件一成立&&条件二不成立}
    }else{//条件一不成立}
    2、if 结构可以多重嵌套,但是原则上不超过三层
    */
     
    /*[switch-case 结构:多路分支]
    * 1、结构写法:
    * switch(表达式){
    case 常量表达式1;
    语句1;
    break;
    case 常量表达式2;
    语句2;
    break;
    .....
    default:
    语句n;
    break;
    2、注意事项;
    ① switch()中的表达式以及case后面的表达式可以为任何js,对象和数组不行;
    ② case后面的所有常量表达式,必须各不相同,否则只会执行一个;
    ③ case后的常量可以是任何数据类型,同一个switch结构的不同case,可以使不同的数据类型。
    ④ switch在进行判断的时候,采用的是全等判断===;
    ⑤ break的作用:执行完case的代码后,跳出当前switch结构;缺少break的后果;
    从正确的case项开始,依次执行所有的case和default。原因:⑥
    ⑥ switch结构在判断时,只会判断一次正确答案,当遇到正确的case选项时,将不会再判断后续项目。依次往下执行。
    ⑦ switch结构的执行速率要快于多重if结构。在多路分支时,可以优先考虑使用switch结构。
    * }
    */
     
     
     
    [循环结构的步骤]
    ①生明循环变量
    ② 判断循环条件
    ③ 执行循环体(while 中的{}所有代码)操作
    ④ 更新循环变量
     
    然后,循环执行② ③ ④
    【js 循环条件支持的数据类型】
    ① Boolean:true 真 false 假
    ② String: 非空字符串为真 空字符串为假
    ③ Number: 0为假,一切非0均为真
    ④ Nan/Null/Undefined: 全为假
    ⑤ Object:全为真
     
     
     
     
    while 循环特点:先判断再执行
    do-while循环特点:先执行,再判断;即使初始条件不成立,do-while循环也至少执行一次。
     
    var n =1;// ①声明循环变量
    while (n<=10){ //② 判断循环条件
    document.write("Helloworld"); // ③ 执行循环体(while 中的{}所有代码)操作
    n++; // ④ 更新循环变量
    }
     
     
    var m =1;
    do{
    document.write("Helloworld<br/>");
    m++;
    }while (m<=5);
     
    [for循环]
    1、for循环有三个表达式,分别为:①定义循环变量②判断循环条件③更新循环变量
    三个表达式之间用分号分割。
    for循环三个表达式可以省略,两个;缺一不可。
    2、for循环特点;先判断,再执行。
    3、for循环三个表达式,均可以又多部分组成,之间用 , 隔开;但是第二部分判断条件需要用&&连接,最终结果需要为真/假。
     
    for (var n=1,j=5;n<=3;j>=1&&n++,j--) {
    document.write("Hellowfor<br/>");
    document.write(n+"/"+j);
    }
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    Postman+Newman生成接口测试报告
    Spring Boot系列 – 2. Spring Boot提供的特性
    Spring Boot系列 – 5. 不同的环境使用不同的配置
    Spring Boot系列 – 4. 读取配置文件(application.yml)中的属性值
    MySQL高可用之MHA安装
    恢复误删除表黑科技之relay log大法(续)
    恢复误删除表黑科技之relay log大法
    关于mysqldump备份非事务表的注意事项
    利用binlog server及Xtrabackup备份集来恢复误删表(drop)
    基于Xtrabackup备份集来恢复某个误删除的表(drop)
  • 原文地址:https://www.cnblogs.com/lixishimeng/p/6667172.html
Copyright © 2011-2022 走看看