2015.7.17 第八课 课程重点(js语句:条件、循环)

1、条件语句:

  (1)比较操作符:

    ==:判断是否相等

    !=:判断是否不相等

    > :判断是否大于

    >=:判断是否大于等于

    < :判断是否小于

    <=:判断是否小于等于

    【例1】

    if(iNum1==iNum2)     //如果iNum1与iNum2相等
    {
      iNum3=iNum1;    //将iNum1的值赋给iNum3
    }
    else{             //否则
      iNum3=iNum2;      //将iNum2的值赋给iNum3
    }

【补充】以上也可写作:

iNum3 = iNum1==iNum2 ? iNum1 : iNum2

这是一个三目运算符,结构为:

a = 判断式 ? 值1 :值2

意思是,先对“判断式”进行判断,若结果为真,则a=值1;若为假,则a=值2。

所以上式可以理解为,先判断“iNum1==iNum2”是否为真:若为真,则iNum3=iNum1;若为假,则iNum3=iNum2。

(2)逻辑运算符:

&&:与运算 (a && b:a与b,代表同时满足a与b时,判断式才为真)

||:或运算 (a || b:a或b,代表只要满足a或者满足b,满足其中一项判断式就为真)

!:非运算 (!a :非a,与a相反,意思是 如果a为真,则!a为假;a为假,则!a为真。)

【例2】

if(iNum1>iNum2 && iNum1>iNum3)   //当 iNum1>iNum2 且 iNum1>iNum3 同时满足时,
{
  alert("第一个值最大");         //输出"第一个值最大"
}
if(iNum1>iNum2 || iNum1>iNum3)    //当 iNum1>iNum2 或者 iNum1>iNum3 时,
{
  alert("第一个值不是最小");      //输出"第一个值不是最小"
}
if(!(iNum1>iNum2 || iNum1>iNum3))    //取(iNum1>iNum2 || iNum1>iNum3)的相反意思,
{
  alert("第一个值最大");        //输出"第一个值最小"
}

  (3)if语句:

if(条件一)
{
  ……行为一
}

else if(条件二)
{
  ……行为二
}

else if(条件三)
{
  ……行为三
}

……

else
{
  ……行为N
}

此语句可理解为:

如果是“条件一”,则进行“行为一”;

另外,如果是“条件二”,则进行“行为二”;

另外,如果是“条件三”,则进行“行为三”;

……(else if 可以有多个)

以上情况都除外(既不是“条件一”也不是“条件二”也不是“条件三”……),则进行“行为N”。

【补充】

if(条件一)
{
  ……行为一
}

if(条件二)
{
  ……行为二
}

else
{
  ……行为三
}

如果是if后面跟着的是else,则此else仅针对它上面最近的那个if。

此语句可理解为:

如果是“条件一”,则进行“行为一”;

如果是“条件二”,则进行“行为二”;

另外,除“条件二”外的情况,则进行“行为三”(此处的else与第一个if无关)

2、弹出框:

  (1)消息框:alert()

  (2)输入框:prompt()

*在输入框里输入的内容,程序按照字符串形式读取。

【例3】

var sInput=prompt("请输入一个1-10之间的数字");   //在弹出的输入框中,输入字符串,存入sInput中

  (3)询问框:confirm()

*弹出一个询问框,有“确定”和“取消”的按钮。返回的结果是布尔类型,真或假。

【例4】

if(confirm("你确定喜欢蓝色吗?"))     //询问框询问的内容
{
  alert("你喜欢蓝色");          //选择“确定”,弹出此框
}
else{
  alert("你不喜欢蓝色");         //选择“取消”,弹出此框
}

  (4)字符串转数字:Number()

*对输入框输入的内容,程序都按照字符串形式读取。当我们输入数字,希望以数字方式读取怎么办呢?就可以用Number()

【例5】

var sInput=prompt("请输入一个1-7之间的数字");
var nInput=Number(sInput);

此例子的作用:先将输入框里输入的字符串信息读取到sInput中,然后用Number()将sInput里的字符串信息转换成数字,存放到nInput中。

  (5)判断是否为数字:isNaN()

*用Number()只能转数字,所以我们需要用语句判断一下我们输入的是否是数字,此时用isNaN()

isNaN()的意思就是:is not a number,“不是数字”。

【例6】

var sInput=prompt("请输入一个1-7之间的数字");

var nInput=Number(sInput);

if(isNaN(nInput))        //如果 nInput 不是数字
{
alert("你输入的不是数字");    //则输出“你输入的不是数字”
}
else               //否则
{
alert("你输入的是数字");       //输出“你输入的是数字”
}

  (6)在此基础上,还可以顺便判断一下输入的是否是整数,此时用parseInt(),转成整数:

【例7】

var sInput=prompt("请输入一个1-7之间的数字");

var nInput=Number(sInput);

if(isNaN(nInput))
{
  alert("你输入的不是数字");
}
else
{
  if(nInput==parseInt(nInput))   //判断转成数字的值,是否与它取整后的值相等
  {
    alert("你输入的是整数");
  }
  else
  {
    alert("你输入的不是整数");
  }

}

(7)在此基础上,还可以顺便判断一下输入的是否在1-7范围之间,此时用逻辑运算符

【例8】

var sInput=prompt("请输入一个1-7之间的数字");

var nInput=Number(sInput);

if(isNaN(nInput))
{
  alert("你输入的不是数字");
}
else
{
  if(nInput==parseInt(nInput))
  {
    if(nInput>7 || nInput<1)        //判断,如果此数大于7或者小于1
    {
      alert("你输入的不在1-7之间")   //则输出此框
    }
  }
  else
  {
  alert("你输入的不是整数");
  }

}

  (8)在此基础上,还可以判断每个输入的值对应执行一个行为,用switch..case:

【例9】

switch(nInput)        //判断nInput的值
{
case 1:           //如果为1

alert("星期一");      //则输出“星期一”

break;          //然后跳出循环

case 2:         //如果为2

alert("星期二");      //则输出“星期二”

break;          //然后跳出循环

case 3:         //以此类推
alert("星期三");
break;

case 4:
alert("星期四");
break;

case 5:
alert("星期五");
break;

case 6:
alert("星期六");
break;

case 7:
alert("星期日");
break;
}

*用switch..case的好处是:只需要判断一次后即可退出循环,更加效率。

【补充】break 是跳出所在循环的意思。

时间: 2024-10-20 16:44:20

2015.7.17 第八课 课程重点(js语句:条件、循环)的相关文章

2015.7.8 第三课 课程重点(css样式)

[课前提问及答案] 1.table有哪些属性:width.height.border.cellspacing.cellpadding.bordercolor.bgcolor.align  宽 高 边框 内框宽度  文字到边框距离 边框颜色 背景色 水平位置 2.body有哪些属性:bgcolor.background.text 背景颜色 背景图片 文字颜色 ----------------------------------------------------------------------

第八课 课程重点(js语句:条件、循环)

1.条件语句: (1)比较操作符: ==:判断是否相等 !=:判断是否不相等 > :判断是否大于 >=:判断是否大于等于 < :判断是否小于 <=:判断是否小于等于 [例1] if(iNum1==iNum2) //如果iNum1与iNum2相等 { iNum3=iNum1; //将iNum1的值赋给iNum3 } else{  //否则 iNum3=iNum2;  //将iNum2的值赋给iNum3 } [补充]以上也可写作: iNum3 = iNum1==iNum2 ? iNum

2015.7.20 第十课 课程重点(jq选择器:id、类、标签、特殊、属性、包含、位置、过滤)

1.在VS中新建jq项目: 新建web窗体时选择第二个: 将系统生成的多余文件夹删掉,仅留下Scripts和Web.config: 将Scripts文件夹改名为我们熟悉的js(也可以不改,仅推荐改),并新建文件夹css和image,并在对应位置添加页面,html.css.js 将上图鼠标所指的.min.js文件拖动到html中,将自己新建的js文件拖动到它下方,如图: *两者上下位置关系千万别弄饭了,min.js一定要在最上面. 将Script文件夹中的第一个js文件(_references.j

2015.7.14 第六课 课程重点(仿站及常见代码用法)

1.网站常见小图标调用方式: 将所有小图标做在一张大图上a.png,然后根据横纵轴来调用. background:url("a.png") -23px -70px no-repeat; 2.块级元素居中的常见写法: margin:0px auto; 3.如何让超链接影响到整个块? 将行内元素变成块级元素:display:block 4.文本框只留下面一条线: { border-width:0px;  border-bottom:solid 1px #000; } 5.仿站: 用所学知识

2015.7.22 第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

2015.7.13 第五课 课程重点(z-index、overflow、浏览器兼容性)

1.z-index=数字 z轴的值,当几个div重叠时,z-index数字越大的,越在上面 2.overflow:hidden(超过部分隐藏)/auto(超过时出现滚动框)/scroll(一直有滚动条) 3.浏览器兼容性问题: (1)兼容性问题:不同的浏览器基于不同的内核,对一些前端代码支持不一样,导致显示效果不一样 (2)测试的各大浏览器:IE7-IE11(可使用IETester,不考虑IE6).Opera.Safari.Chrome.Firefox (3)关于兼容性非常好的介绍文章:http

2015.7.9 第四课 课程重点(浮动、盒子模型、绝对/相对定位)

1.块级元素的特点: (1)块级元素里面的内容,或者背景图片,默认显示在块的左上角 (2)块级元素,默认情况下,单独占满一行. 常用的块级元素:div.p.h1-h6.hr.ul li.ol li.table.body... 2.浮动:float 作用:通过漂浮,让块级元素实现并排 float:left 或 right 注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动 清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动

2015.7.8 第三课 课程重点

1.css选择器:相当于一个标识,有3种选择器 第一种选择器:标签选择器 p{ color:red;} 第二种选择器:class选择器 .c1{ color:green;} 可被多次调用 第三种选择器:id选择器 #d1{ color:blue;} 独有 优先级:标签<class<id 注意:一个标签可以有多个class,但是只能有一个id 2.css文字效果: 字体:font-family 字号:font-size 颜色:color 粗体:font-weight 下划线:text-decor

2015.7.15 第七课 课程重点(js、声明变量、数据类型)

1.vs新建步骤 文件——新建项目——web——空白web应用程序——取名.位置.确定——此时软件会自动生成一个sln文件(解决方案),一解决方案下面可以有多个项目. 点击项目——新建文件夹css和js和image——新建html页面取名demo1 (推荐设置:工具——选项——可以设置下字体和颜色:文本编辑器——把常用的几种语言设上行号颜色提示) 2.什么是js JavaScript是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScript的浏览器中