zoukankan      html  css  js  c++  java
  • H5学习第四周

    本周。我们结束了HTML标签和css样式部分,开始了JS的学习。JS是的内容和css,html基本上没有什么联系而且它比较需要逻辑思考能力,所以要从新开始学习。

    使用js的三种方式:
    1.html标签中内嵌js(不提倡使用):
    <button onclick="javascript:alert('qoqoqoq')">kkkkkkkkkkkkkkkkkkkkkkk</button>
    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文件的<script></script>标签必须成对出现且标签内部不能有任何代码。

    js中的注释
    //单行注释 ctrl+/
    /*段落注释 ctrl+shift+/*/
    //alert("kakakak");

    [js中的变量]
    1.js中变量声明的写法:
    var width=10;使用var声明的变量只在当前函数作用域有效,
    width=10;不实用var直接赋值生成的变量默认为全局变量,整个js文件都有效。

    var a,b,c=1 同一声明语句同时声明多个变量,变量之间用英文逗号分隔,但赋值需要单独赋,例如上
    式只有c赋值为1,ab为undefined(未定义)。

    [声明变量注意事项]
    ①所有变量类型声明均使用var关键字,变量的具体数据类型,取决于给变量赋值的类型。

    ②同一变量可以在多次不同赋值时修改变量的数据类型:
    var width=10; width为整形变量。
    width="啊啊";width被改为字符串类型。

    ③变量可以用var声明也可以省略var。不使用var默认为全局变量。

    ④同一变量名可以多次用var声明,没有任何含义也不会报错,
    第二次及之后的声明只会被理解为赋值。

    2.变量的命名规范.
    ①变量名只能有字母数字下划线$组成,
    ②开头不能是数字,
    ③变量区分大小写,大写字母与小写字母为不同变量。
    3.变量名命名需要符合驼峰法则:
    变量开头为小写,之后每个单词首字母大写,或每个单词之间用下划线分隔(不推荐)。


    【js中的输入输出语句】
    1.文档中打印输出:document.write();
    输出语句,将write的()中的内容打印在浏览器屏幕上;

    使用时注意:除变量、常量以外的任何内容打印时必须放到
     ""中,变量,常量必须放到""外。

    打印的内容同时包括多部分组成时,之间用+链接。
    document.write("左手中的纸牌:"+left+"<br/>");
    2.弹窗输出alert();
    弹窗警告,同上
    3.弹窗输入:prompt("请输入您的名字","xx");
    两部分参数:
    ① 输入框上面的提示信息。
    ② 输入框里的默认信息,
    两部分之间用逗号分隔,只写一部分时默认为提示信息。

    可以定义变量接收输入内容,例如
    var name = prompt("请输入您的名字","xx");
    点击确认按钮,输入成功,点击取消按钮name=null;
    默认接受输入的格式为字符串格式。

    var name = prompt("请输入您的名字","xx");
    document.write("您的名字"+name)
    【js中的变量的数据类型】
    Undefined:未定义,用var声明的变量,没有进行初始化赋值。 var a;
    Null:表示为空的引用。例如:空对象,空数组。
    Boolean:(布尔)真假,可选值true、false
    Number:数值类型,可以是小数,也可以是整数。
    String:字符串,用""或''包裹的内容,称为字符串。
    Object(复杂数据类型):函数,数组等。

    【常用的数值函数】
    ①isNaN():用于判断一个变量或常量是否为NaN(非数值)
    使用isNaN()判断时会尝试使用Number()函数进行转换。
    如果能转换为数字则结果为false,不是非数值,"111"
    纯数字字符串,false 空字符串,false "1a"包含其他
    字符,true ture、false布尔类型,false。

    ②Number():将其他类型转换为数值类型。
    【字符串类型转数值】
    >>>字符串为纯数值字符串,转为对应的数字。"111">111
    >>>字符串为空字符串时会转为0。"">0
    >>>字符串包含其他非数字字符时,不能转换。"111a">NaN

    【布尔Boolean类型转数值】
    true>1 false>0
    【null,Undefined转数值】
    null>0 Undefined>NaN

    【Object类型转数值】
    会先调用Valueof函数,确定函数是否有返回值,再根据上述情况判断。

    ③parseInt();将字符串转成数值。
    >>>空字符串不能转,结果为NaN。
    >>>纯数值字符串,能转,"123">123 "123.5">123(小数转化时抹掉小数点,不进行四舍五入)。
    >>>包含其他字符的字符串,会第一个非数字字符前的数值部分。
    "123a456">123 "a123a456">NaN
    >>>parseInt()只能转string类型,Boolean、null,Undefined均为NaN。

    ④parseFlaot():将字符串转为数值,使用方式同parseInt(),
    但是转化小数字符串时保留小数点,转化整数字符串时保留整数。
    "123.5">123.5 "123">123

    ⑤typeof:用于检测变量的数据类型。
    未定义>Undefined
    字符串>String
    true,false>Boolean
    数值>Number
    对象,null>Object
    函数>function

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

    +:有两种作用,链接字符串/加法运算;当+两边均为数字时进行加法运算
    当+两边任意一边为字符串时进行字符串链接,连接之后的结果是字符串。
    ++:自增运算符,将变量在原来的基础上加一。
    n++:先使用n的值计算,再把n+1。
    ++n:先把n的值加一,再把n+1后的值拿去计算。
    二者在代码执行完以后均会把n+1。
    --:自减运算符,将变量在原来的基础上减一。

    var a = 3;
    var b,c;
    b = a++ +2; a=3 b=5 a=4
    c = ++a +2; a=4 a=5 c=5

    2.赋值运算
    = 赋值, += -= *= /= %=

    +=:a += 5;相当于a = a + 5;但前者的执行效率比后者快。

    3.关系运算
    == 等于、=== 严格等于 , != 不等于、>、<、>=、<=

    ===:严格等于;类型不同直接返回false,类型相同,进行下一步判断;
    ==:等于,在类型相同时同===,类型不同,将等式两边均(用Number函数)转为数字再判断。
    null==Undefined成立 null===Undefined不成立

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

    有两个关键符号: ?和:
    当?前面的部分运算结果为true时执行:前面的代码;
    当?前面的部分运算结果为false时执行:后面的代码。

    多目运算符可以多层嵌套。
    例如:var name = num>5?"输入太大":(num==5?"正确":"输入太小")

    5.逻辑运算符
    && 与、|| 或、!非。与和或同时存在时与的优先级比或高。

    【运算符的优先级】
    ()
    ! ++ --
    % / *
    + -
    > < >= <=
    == !=
    &&
    ||
    各种赋值 = += *= /= %=

    [if-else结构]

    1.结构写法:
    if(判断条件){
      条件为true时执行
    }else{
      条件为false时执行
    }

    2.if()中的表达式(可以是任何类型),运算之后的结果应该为:
    ① Boolean :true 真 false 假。
    ② String :非空字符串为真,空字符串为假。
    ③ Null/NaN/Undefined : 全为假。
    ④ Object :全为真。
    ⑤ Number :0为假,非0数字均为真。

    3.else{}结构可以根据具体情况省略。



    [多重if结构/阶梯if结构]
    1.结构写法:
    if(条件1){
      条件1成立;
    }else if(条件二){
      条件1不成立&&条件二成立;
      else if 部分可以有n个。
    }else{
      条件1不成立&&条件二不成立;

    2.多重if结构中多个判断条件是互斥的,只能选择其中一条路。
    3.if/else的大括号可以省略,但不提倡,如果省略,则if/else包
    含的代码只包括其后最近的一行(分号结束);else结构永远属于
    其前方最近的一个if结构。



    [嵌套if结构]
    1.结构写法:
    if(条件1){
      条件1成立
      if(条件2){
        条件1成立&&条件2成立
      }else{
        条件1成立&&条件2不成立
      }
    }else{
      条件1不成立
    }

    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结构。
    例:

    var a = parseFloat(prompt("请输入第一个数:"));
    var b = prompt("请输入运算符:");
    var c = parseFloat(prompt("请输入第三个数:"));

    switch(b){
    case "+":
    document.write(a+b+c+"="+(a+c));
    break;
    case "-":
    document.write(a+b+c+"="+(a-c));
    break;
    case "*":
    document.write(a+b+c+"="+(a*c));
    break;
    case "/":
    document.write(a+b+c+"="+(a/c));
    break;
    default:
    document.write("输入错误");
    break;
    }


    [循环结构的步骤]
    1.声明循环变量。
    2.判断循环条件。
    3.执行循环体(while的{}中的内容)操作。
    4.更新循环变量。
    5.循环执行2,3,4.

    [JS中循环条件支持的数据类型]
    支持js中的所有数据类型。
    ① Boolean :true 真 false 假。
    ② String :非空字符串为真,空字符串为假。
    ③ Null/NaN/Undefined : 全为假。
    ④ Object :全为真。
    ⑤ Number :0为假,非0数字均为真。

    [do-while循环]
    while循环特点:先判断再执行。
    do-whlie循环特点:先执行再判断,即使初始条件不成立也至少执行一次。
    不会影响执行次数。
    do-while结构:
    do

    }while();



    [for循环]
    for循环的结构:for(<初始循环变量>;<循环条件>;<变量的变化>){
      语句;
    }
    1.for循环有三个表达式,分别为
    ①定义循环变量,
    ②判断循环条件,
    ③更新循环变量。
    for三个表达式均可以省略,两个分号不能缺少。
    2.for循环特点:先判断,后执行。
    3.for循环三个表达式均可以由多部分组成,之间用逗号分隔,但是的二部分判断条件要用&&链接最终结果为真/假。

    例:输出斐波那契数列的前20个数:

    var a = 1;
    var b = 1;
    var c;
    var i=3;
    document.write(a + "<br/>");
    document.write(b + "<br/>");

    while (i<=20) {

    c = a + b;
    a = b;
    b = c;

    i++;
    document.write(c + "<br/>");

    }

    找出所有水仙花数:

    var i = 100;

    var a, b, c;

    while (i < 1000){

    a = parseInt(i / 100);
    b = parseInt(((i / 10) % 10));
    c = i % 10;

    if (i == a * a * a + b * b * b + c * c * c)
    {
    document.write('水仙花数: ' + i + '<br/>');
    }
    i++;
    }

  • 相关阅读:
    poj 1035 字符串匹配
    拓扑排序的小总结
    POJ1018
    POJ1328详细题解
    POJ1159题解报告
    POJ1088 (滑雪)
    树状树组区间修改,单点修改模板
    spfa模板
    树状树组离散化求逆序对模板
    POJ3723(最小生成树,负权)
  • 原文地址:https://www.cnblogs.com/wujianrui/p/6666496.html
Copyright © 2011-2022 走看看