zoukankan      html  css  js  c++  java
  • JS基础

    一、JS中的变量和输入输出

    [使用JS的三种方式]

    1、在HTML标签中,直接内嵌JS(并不提倡使用);
         <button onclick="alert('真点吗')">点击</button>
    >>> 不符合W3C关于内容与行为分离的要求!!!
    2、在html页面中使用<script></script>标签包裹JS代码;
        <script type="text/javascript">
         alert("1234");
         document.write("<h1>1234567</h1>");
        </script>
    >>>script标签可以放到页面的任何位置。
    3、引入外部的JS文件:
         <button onclick="alert('真点吗')">点击</button>
    [注意事项]
    ① <script></script>可以嵌入到页面的任意位置。但是,位置的不同会导致JS代码的执行顺序不同;
         比如<script></script>放到body前面,则JS代码会在页面加载之前就执行;
    ② 引入外部的JS代码:<script></script>必须是成对出现的标签。而且,标签中不能再有任何的JS代码。

    [JS中的变量]

    1、JS中变量声明的写法:
    var num=10;//使用var声明的变量,属于局部变量,只在当前作用域内有效;
    num=10;//不用var声明的变量,默认为全局变量,在整个JS文件中都有效;
    var x=8,y,z=10;//使用一行语句,同时声明多个变量。上式中,y属于已声明,但是未赋值状态,结果为undefined;

        [声明变量的注意事项]

      ① JS中所有变量的声明,均使用var关键字。变量具体是什么数据类型,取决于给变量赋值的类型;
      ②  JS中同一个变量,可以在多次不同赋值时,修改变量的数据类型;
               var a=10;//从初始声明是,a属于整数型;
               a="haha";//重复赋值时,整数型的a被修改为字符串类型;
      ③  变量可以使用var声明,也可以不使用var声明。
    [区别] 使用var声明为局部变量,不使用var声明为全局变量;
      ④ 只用var声明但是不赋值。结果为undefined;
           例如:var a;//a为undefined。但是,如果不声明也不赋值的a,直接使用会报错;
      ⑤ 同一变量名可以多次使用var声明,但是,后面的var并没有任何用,第二次再使用var声明时,只会被理解为普通的赋值操作。
    2、变量名的命名要求:
    ①变量名只能有字母、数字、下划线组成;
    ②开头不能是数字;
    ③变量名区分大小写,大写字母和小写字母为不同变量;
    3、变量名的命名规范:
    ① 要符合小驼峰法则(骆驼命名法):
    首字母小写,之后每个单词的首字母大写;
    myNameIsZhaoYi √
    ② 或者使用匈牙利命名法:
    所有字母小写,单词之间用_分隔;
    my_name_is_zhao_yi √
    ③mynameiszhaoyi × 能用,但是不规范
    4、JS中的数据类型:
    ①Undefined:未定义。已经使用var声明的变量但是没有赋值的情况;var a;
    ②Null:表示空的引用。
    ③Boolean:布尔类型。表示真假,只有两个值:true/flase;
    ④Number:数值类型。可以是整数,可以是小数;
    ⑤String:字符串类型。用""或者''包裹的内容,称为字符串;
    ⑥Object:对象类型。
    JS中有六种数据类型,都用var声明,用赋值情况进行区分!
    5、【常用的数值函数】
    ① isNaN():判断一个变量或常量是否是NaN(not a num 非数值);
    使用isNaN()判断时,会尝试使用Number()函数进行转换,如果最终结果能够转为数字,则不是NaN,结果为false。
    ②Number()函数:将其他类型的数值,尝试转为数值型;
    [字符串类型]
    >>>字符串为纯数值字符串,会转为对应的数字;"111"->111
    >>>字符串为空字符串,会转为0;""->0
    >>>字符串包含任何其他字符时,都不能转;"1a"->NaN
    [布尔类型]
    true->1 false->0
    [Null/Undefined]
    Null->0 Undefined->NaN
    [Object]后续讲解。
    ③ParseInt():将字符串转为数值类型;
    >>>纯数值字符串,能转。
    "12"->12;"12.9"->12;(小数转化时,直接抹掉小数点,不进行四舍五入)
    >>>空字符串,不能转。""->NaN
    >>>包含其他字符的字符串,会截取第一个非数值字符串前的数字部分;
    "123a456"->123; "a123b456"->NaN
    >>>ParseInt()只能转字符串,转其他类型,全是NaN.
    [Number和ParseInt函数的区别]
    1.Number函数可以转各种数值类型。ParseInt函数只能转字符串;
    2.两者在转字符串时,结果不完全相同。(详见上面解释)
    ④ ParseFloat:将字符串转为数值型;
    转换规则与ParseInt相同,只是如果有小数,则保留小数点;如果没有小数,则依然是整数;
    "12.5"->12.5 "12"->12
    ⑤ typeof:检测变量的数据类型:
    字符串->String 数值->Number true/false->Boolean
    未定义->Undefined 对象/Null->object 函数->function

    [JS中常用的输入输出语句]

    1、document.write();将()中的内容,打印输出到浏览器屏幕上;
    使用时需注意:除变量/常量外的所有内容,必须放到""中。变量和常量必须放到""外面;如果同时有变量和字符串,必须用+链接;
    eg:document .write("左手中的纸牌:"+left+"<br />");
    2、alert();使用弹窗输出;
    弹窗警告,()中的内容与上述要求相同。
    3、prompt()弹窗输入:
    接收两部分参数:
    ①输入框上面的提示内容,可选;
    ②输入框里面的默认信息,可选;
    当只写一部分时,表示输入框上面的提示内容;
    可以定义变量,接收输入的内容。点击确定按钮,变量将被赋值为输入的内容;点击取消按钮,变量将被赋值为null.
    输入内容时,默认接收的数据类型都是字符串!!!

    二、JS中的运算符

    1、算术运算(单目运算符)

    + (加)、-(减)、*(乘)、 /(除)、 %(取余)、++(自增) 、--(自减)
    >>> +:有两种作用,分别是连接字符串/加法运算。当+两边全为数字时,进行加法运算;当两边有任意一边为字符串时,
    起连接字符串的作用,连接之后的结果为字符串。
    除加号外,其余运算符号运算时,会先尝试将左右变量用number函数转为数字。
    >>> 除号结果会保留小数点。
    >>> ++自增运算符,将变量在原有基础上+1。
    >>> --自减运算符,将变量在原有基础上-1。
    【a++和++a的异同】
    ①相同点:无论是a++还是++a,运算完之后,a的值均会+1;
    ②不同点:a++先用a的值运算,再把a+1;
    ++a先把a+1,再用a+1之后的值运算。
    eg: var a=3,b,c;
    b=a++ +2;
    c=++a +2;
    alert(a); a=5
    alert(b); b=5
    alert(c); c=7

    2、赋值运算

    =(赋值,将右边的值赋给左边) += -= *= /= %=
    +=:a+=b;相当于a=a+b;但是前者的运算效率要比后者快,所以推荐使用a+=b;

    3、关系运算

    ==(等于)、===(严格等于)、 !=(不等于)、!==(不全等)、>、<、>=、<=
    >>>关系运算符运算之后的结果只能是布尔类型;
    >>>判断一个数字是否处于某个区间,必须用&&连接;
    ===(严格等于):要求不但要类型相同,值也必须相同,类型不同,结果直接为false;类型相同,再进行下一步判断:
    ==(等于):类型相同。与===效果一样。类型不同时,会先尝试用Number函数将两边转为数字,然后再进行判断;
    但是有个别特例:
    Null=false × ;
    Null=undefined √;

    4、条件运算符(多目运算)

    a>b?true:false
    有两个重要符号: ?和:
    当?前面部分,运算结果为true时,执行:前面的代码;
    当?前面部分,运算结果为false时,执行:后面的代码;
    冒号两边可以为数值,则整个式子可用于赋值,
    冒号两边可以为代码块,将直接执行代码。
    多目运算符可以多层嵌套。

    5、位运算符、 逻辑运算符

    &、|、~ &&(与)、||(或)、!(非)
    &&两边都成立结果为true;
    ||两边有一边成立结果就为true;
    !取反值

    6、运算符的优先级

    ①()小括号最高
    ②单目运算符! ++ --
    ③* / %
    ④+ -
    ⑤> < >= <=
    ⑥== !=
    ⑦&&
    ⑧||
    ⑨= += -= *= /=最低的是各种赋值

    三、JS中的分支结构

    【if-else结构】

    1、结构的写法:
    if(判断条件){
    //判断条件为true时,执行if的{}
    }else{
    //判断条件为false时,执行else的{}
    }
    2、注意事项:
    ①else{}语句块可以根据情况进行省略;
    ②if和else后面的{}可以省略,但是省略{}后,if和else后面只能跟一条语句;所以,并不建议省略{};
    3、if的()中的判断条件,支持的情况:(记住)!
    ①布尔类型Boolean:true为真,false为假;
    ②String字符串类型:空字符串为假,所有非空字符串为真;
    ③Number数值类型:0为假,一切非0数字为真;
    ④null/undefined/NaN:全为假;
    ⑤Object:全为真

    【多重if/阶梯if结构】

    1、结构写法:
    if(条件一){
    //条件一成立,执行的操作
    }else if(条件二){
    //条件一不成立&&条件二成立,执行的操作;
    }else{
    //上述所有条件都不成立时执行的操作
    }
    2、多重if结构中,各个判断条件是互斥的,执行选择其中一条路执行。遇到正确选项并执行完以后,直接跳出结构,不再判断后续分支;

    【嵌套if结构】

    1、结构写法:
    if(条件一){
    //条件一成立
    if(条件二){
    //条件一成立&&条件二成立
    }else{
    //条件一不成立
    }
    2、在嵌套if结构中,如果省略{},则else结构永远属于离他最近的一个if结构;
    3、嵌套结构可以多层嵌套,但是一般不推荐超过三层。
    能用多重if结构的一般不推荐使用嵌套if。

    【switch-case结构】

    1、结构写法
    var num=5;
    switch (num+2){
    case 1:
    document.write("第一个case");
    break;
    case 2:
    document.write("第二个case");
    break;
    case 3:
    document.write("第三个case");
    break;
    default:
    document.write("所有case都不成立,执行default");
    break;
    }
    2、注意事项:
    ① switch结构()中的表达式可以是各种JS支持的类型;
    ② switch结构在进行判断的时候,使用的是===判断;
    ③ case后面的表达式可以是各种数据类型,但是值要求各不相同。如果有相同,也只会执行第一个case
    ④ break作用:执行完case代码后,跳出当前switch结构;
    缺少break后果:
    从第一个正确的case项开始,执行后面的所有case,和document;原因:⑤↓
    ⑤switch结构在进行判断的时候,只会判断一次正确答案。当遇到正确的case之后,将不会再判断后续的项目。
    ⑥switch结构的执行效率要比多重if快。在多路分支结构中,推荐优先使用switch。
  • 相关阅读:
    界面控件Telerik UI for WPF R3 2021 全新的高对比度主题
    WPF界面控件DevExpress WPF v21.2 不止支持Windows 11
    资源分享|DevExpress v21.2帮助文档下载(CHM版)
    DevExpress WinForm MVVM数据和属性绑定指南(Part 3)
    VS插件CodeRush 全新发布v21.2.4——支持Visual Studio 2022
    New!DevExpress WPF v21.2最新版本系统环境配置要求
    「B/S端开发」DevExtreme初级入门教程(React篇) 状态管理
    WPF界面工具Telerik UI for WPF入门级教程 设置一个主题(一)
    New!DevExpress WinForms v21.2最新版本系统环境配置要求
    一篇文章带你看DevExpress WPF如何支持Windows触控功能
  • 原文地址:https://www.cnblogs.com/1996zy/p/7471041.html
Copyright © 2011-2022 走看看