zoukankan      html  css  js  c++  java
  • JS入门

    一.

    使用JS的三种方式
    1HTML标签内嵌JS
    <button onclick="javascrpt:alert(222222222)" >11111</button>
    2.HTML页面中直接使用JS

    <script type="text/javascript">

    //JS代码
    </script>
    3引用外部JS文件
    <script language="javascript" src="路径"></script>
    注意事项
    1页面中JS代码与引用JS代码可以嵌入到页面任何位置,但不会影响JS代码执行顺序
    例如:<script></script>在body前面会在页面加载之前执行JS代码;
    2页面中JS代码使用type="text/javascript"
    外部也用,使用language="javascript"
    3引用外部JS文件的<script></script>标签必须成对出现且标签内部不能有任何代码

    二.

    JS中的变量
    1JS中变量声明的写法:var width = 10;//使用var声明的函数只在当前函数作用域有效
    width1 = 11;//不使用var,直接赋值生成变量,默认全局改变,整个JS文件有效
    var a,b,c=1;同一声明语句同时声明多个变量,变量间用英文逗号分隔,但赋值需要单独赋,如上式只有c赋为1,a/b为undefine(未定义)
    注意1JS中所有类型声明都用var关键字。变量的具体数据类型,取决于给变量赋值的执行
    2同一变量,可以在多次不同赋值时,修改变量数据类型:
    var width = 10;//为整形变量
    width="哈哈";//width 被改为字符串类型
    3变量可以使用var声明,也可以省略var.区别:不使用var,默认为全局变量
    4同一变量名可以多次用var声明。但是没有任何含义也不会报错。第二次之后的声明,为被理解为赋值;
    2变量命名规范:
    1变量名只能由字母数字下划线$组成
    2开头不能是数字
    3变量区分大小写,大写字母和小写字母为不同变量
    3变量名命名要符合驼峰法则:
    变量开头为小写,之后每个单词首字母大写(或单词间用下划线分隔)
    jiaoYingCai√
    jiao _ying_cai√
    jiaoyingcai×
    4JS中变量的数据类型
    undefine:未定义,用var声明的变量,没有进行初始化赋值。var a;
    null:null,表示空的饮用。var a = null;
    boolean:真假,可选值true/false
    number:数值类型,可以是小数,也可以是整数。
    string:字符串类型。用""或''包裹的内容,称为字符串
    object:复杂数据类型:函数数组等
    5常用的数值函数:
    1 isNaN:用于判断一个变量或常量是否为NaN(非数值)
    使用isNaN判断时,会常试用number()函数进行转换,如果能转换成数字,则不是非数值,结果为false
    "111"纯数字字符串,false""空字符串,false"1a"包括其他字符true
    true/false布尔类型,false
    2 number():将其他类型转换为数值类型
    字符串类型转数字
    1 字符串为纯数值字符串,会转化为数字
    2 字符串为空字符串会转化成0
    3字符串包含其他非数字字符时,不能转换:"111a" NaN
    4 布尔boolean类型转数值 null 0 ;undefine NaN
    5object类型转数值
    先调用valueof函数,确定函数是否有返回值,再根据上述各种情况判断。
    6parseint:将字符串转化为数值类型
    空字符串,不能转,结果为NaN
    纯字符串能转"123" 123;"23.4" 23;(小数转化时,抹掉小数点后边的)
    包含其他字符的字符串。会截取第一个非数值字符前的数值部分。"123a1111" 123;"a1111" NaN;
    parseint只能转string类型,boolean/null/undefined均为NaN
    7parsefloat:将字符串转化为数值
    使用方式同parseint.但是当转化小数字符串时,保留小数点后边的;转化整数字字符时保留整数
    ⑤typeof: 用来检测变量数据类型
    未定义 ->Undefined 字符串 -> Sting true/false -> boolean
    数值 -> Number 对象/null -> object 函数 ->

    三.JS输出语句:document.weite()注意:除变量/常量以外的任何内容,打印时必须放在""中,变量/常量放在""外打印由多部分组成用+连起来。

        弹窗输出: alert()使用方式同输出语句

       弹窗输入:prompt("请输入您的名字","某某");

    * 两部分参数:1输入框上面的提示信息
    * 2输入框里面的默认信息
    * 两部分之间用逗号分隔,只写一部分默认为提示信息;
    * 默认接收输入的内容,为字符
    * 可以定义变量接受输入内容,例如var name = prompt("请输入您的名字","姜浩");;点击确定按钮,输入成功;点击取消按钮,name = null;四。

    四。运算符

    1、算术运算
    + 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减

    +:有两种作用,链接字符串/加法运算;当+两边均为数字时,进行加法运算;当+两边有任意一边为字符串时,进行字符串链接,链接之后的结果认为字符串;
    ++:自增运算符,将变量在原有基础上+1;
    --:自减运算符,将变量在原有基础上-1;

    【n++ 与 ++n 的异同】
    n++: 先使用n的值进行计算,然后再把n+1;
    ++n: 先把n的值+1,然后再用n+1以后的值,去运算;
    相同点:不论n++还是++n,在执行完代码以后,均会把n+1;
    eg:var a = 3;
    var b,c;
    b = a++ +2; // a=3 b=5 a=4
    c = ++a +2; // a=4 a=5 c=7

    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,均为真
    ④ Null/NaN/Undefined: 全为假
    ⑤ Object:全为真
    3、else{}结构,可以根据具体情况省略;
    */
    var num = {};

    if(num){
    //条件为true时执行
    document.write("if条件成立");
    }else{
    //条件为false时执行
    document.write("if条件不成立");
    }
    // num<10?document.write("if条件成立"):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结构可以多重嵌套,但是原则上不超过3层
    */





    /* 【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,均为真
    ④ Null/NaN/Undefined: 全为假
    ⑤ Object:全为真

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

    【for循环】
    1、for循环有三个表达式,分别为:①定义循环变量 ②判断循环条件 ③更新循环变量
    三个表达式之间,用;分隔。
    for循环三个表达式均可以省略,两个;缺一不可
    2、for循环特点:先判断,再执行;
    3、for循环三个表达式,均可以有多部分组成,之间用逗号分隔;但是,第二部分判断条件需要用&&链接,最终结果需要为真/假

  • 相关阅读:
    JavaSE 基础 第17节 流程控制之break、continue、return的用法
    JavaSE 基础 第16节 流程控制之循环结构
    JavaSE 基础 第15节 流程控制之选择结构
    JavaSE 基础 第14节 关系运算符、逻辑运算符与三元运算符
    JavaSE 基础 第13节 算术赋值运算符与自增自减运算符
    MySQL4-SQLAlchemy框架实现
    MySQL3>mysql进阶
    MySQL2>常用命令汇集
    MySQL1>概述
    python-协程
  • 原文地址:https://www.cnblogs.com/jyc226/p/6658294.html
Copyright © 2011-2022 走看看