week 4
移动开发基本概念
<!--[了解 像素基础知识]
① 设备物理像素：设备上一个像素点
② 设备无关像素：可以与物理像素通过dpr转换。（当dpr为1时，设备无关像素=设备物理像素）
③ CSS像素：CSS中使用的抽象概念。当页面没有缩放时，CSS像素=设备无关像素。
设备像素比dpr = 物理像素/设备无关像素
-->
<!--[重点 viewport]
设置布局viewport的各种信息：
width=device-width：布局viewport宽度等于设备宽度
initial-scale=1.0：默认缩放比为1(目的：让CSS像素=设备无关像素)
maximum-scale=1：最大缩放比为1
minimum-scale=1：最小缩放比为1
user-scalable=no：用户禁止缩放(iOS10中的sarifi浏览器失效)
-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/>
<!--
禁止设备将疑似手机号/邮箱,进行识别。取消点击拨打电话等事件
-->
<meta name="format-detection"content="telephone=no,email=no"/>
<!--
iOS 添加到主屏幕时，WebAPP的标题
-->
<meta name="apple-mobile-web-app-title" content="我的第一个WebAPP">
<!--
iOS 添加到主屏幕时，WebAPP的icon图标
-->
<link rel="apple-touch-icon-precomposed" href="http://st.360buyimg.com/m/images/apple-touch-icon.png?v=jd201703162005" />
<!--
iOS 添加到主屏幕时，启用WebAPP全屏模式，删除顶端地址栏和底部工具栏
-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--
iOS 添加到主屏幕时，WebAPP顶部状态的样式
可选值：
black：黑色
default：默认白色
black-translucent(半透明)：网页内容充满整个屏幕，顶部状态栏会遮挡网页头部。
-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!--
设置浏览器，时候最新的IE和chrome去编译
>>> 不是手机端专用，PC网页一般也需要设置
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 其他几个meta标签，了解即可
① 设置浏览器过期时间，-1表示时刻过期，及每次刷新都要请求最新数据
② 是否设置浏览器缓存，否
③ 是否从本机读取缓存文件，否
-->
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
/* 【手机端样式选择】
* 1、一般手机均不支持微软雅黑，中文字体无需设置，使用手机默认即可；
* 2、英文字体，一般选择font-family:Helvetica;
*/
font-family:"宋体",Helvetica,sans-serif;
/* 禁止选中文本(如无文本选中需求,此为必选项)
* 1、手机端禁止长按选中；
* 2、电脑端禁止鼠标选择；
*/
-webkit-user-select: none;
-moz-user-select: none;
/* 去除表单默认外观
* 手机、电脑均可使用；
*/
-webkit-appearance:none;
-moz-appearance: none;
appearance: none;
}
/* 禁止长按链接与图片弹出菜单 */
a, img {
-webkit-touch-callout: none;
}
/* 修改input的placeholder默认样式
* 修改input获得焦点时placeholder样式
*/
/*谷歌*/
input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}
/*火狐19+*/
input::-moz-placeholder{color:red;}
input:focus::-moz-placeholder{color:green;}
/*IE 10+*/
input::-ms-input-placeholder{color:red;}
input:focus::-ms-input-placeholder{color:green;}
js变量输入与输出
<!--[使用js的三种方式]
1，html标签中内嵌js（不提倡使用）：
<button onclick="javascript:alert('hhhhhhh')">有本事点我呀</button>
2,html页面中直接使用js：
<script type="text/javascript">
//js代码
</script>
3，引用外部js文件：
<script language="javasvript" src="js文件路径"></script>
【注意事项】
①页面中js代码与引用js代码，可以嵌入到html页面的任何位置。但是，位置不同会影响到js代码的执行顺序；
例如：<script>在body前面，会在页面加载之前执行js代码；
②页面中js代码，使用type="text/javascript"
引用外部的js文件，使用language="javascript"
③ 引用外部js文件的<script></script>标签，必须成对出现，且标签内部不能有任何代码！
-->
<script type="text/javascript">
//alert(“我谈了一个窗");
//js中的注释
//单行注释。ctrl+/
/*段落注释 ctrl+shift+/
*/
//document.write("<h1>hahaha</h1>");
/*【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，变量名命名要符合驼峰法则：
* 变量开头为小写，之后每个单词首字母大写（或单词之间用下划线分隔）
*
* 4，js中的变量的数据类型
* undefined：未定义，用var声明的变量，没有进行初始化赋值
* null：表示为空的引用。
* boolean：真假，可选值 true/false
* number：数值类型。可以是小数，也可以是整数。
* string：字符串类型，用双引号或单引号包裹的内容称为字符串。
* object：（复杂数据类型）：后续讲解，函数，数组等。。。
*
* 5，常用的数值函数：
* ①isNaN：用于判断一个变量或常量是否为NaN（非数值）
* 使用isNaN判断时，会尝试使用Number（）函数进行转换，如果能转换为数字，则不是非数值，结果为false。
* ”111“ 纯数字字符串 ”“空字符串，false ”1a“包含其他字符，true
* true/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 ”a123b456“ -> NaN
* >>>parseInt只能转String，Boolean/null/Undefined 均为NaN
*
* ④parseFloat：将字符串转为数值
* >>>使用方式同parseInt。但是，当转化小数字符串时，保留小数点，转化整数字符串时，保留整数；
* ”123.5“ -> 123.5 ”123“ -> 123
*
* ⑤typeof：用来检测变量数据类型
* 未定义 -> Undefined 字符串 ->String true/false -> boolean
* 数值 ->Number 对象/null -> Object 函数 -> function
*/
var a;//声明变量
a=10;//给变量赋值
var width =10;
width=11;
width="哈哈";
alert(width);
</script>
<script type="text/javascript">
</script>
<script language="JavaScript" src="">
</script>
<script type="text/javascript">
/*【js中的输入与输出语句】
* 1，文档中打印输出：document.50write();
* 输出语句，将write的（）中的内容打印在浏览器屏幕上；
*
* 使用时注意，除变量/常量以外的任何内容，打印时必须放到“”中。变量/常量必须放到“”外。
*
* 打印的内容同时有多部分组成是，之间用+链接：
* 例如：document.write(“左手中的纸牌：”+left+“<br/>")；
*
*2，弹窗输出： alert();
* 弹窗警告，（）中的使用方式同上
* 3，弹窗输入：prompt（“请输入您的名字：”，“江浩”）；
* 两部分参数：①输入框上面的提示信息
* ②输入框里面的默认信息
* 两部分之间用逗号分隔，只写一部分时，默认为提示信息；
*
* 可以定义变量接收输入内容，例如var name = prompt("请输入您的名字：“)；点击确定按钮，输入成功；
* 点击取消按钮，name=null；
*/
js中的运算符
1， 算术运算
+ 加、- 减、* 乘、 / 除、 % 区域、++ 自增、-- 自减
+:有两种作用，链接字符串/加法运算；当+两边均为数字时，进行加法运算；当+两边有任意一边为字符串时，
进行字符串链接，链接之后的结果认为字符串
++：自增运算符。将变量，在原有基础上+1；
--：自减运算符，将变量，在原有基础上+1；
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，逻辑运算符
&& 与 ||或 ！非
*/
[运算符的优先级]
()
! ++ --
% / *
+ -
> < >= <=
== !=
&&
||
各种赋值= += *= /= %=
document.write(1==123);
/*【n++ 与 ++n 的异同】
* n++：先使用n的值进行计算，然后再把n+1；
* ++n：先把n的值加1，然后再用n+1以后的值运算；
*
* 相同点：不论n++还是++n，在执行完代码以后，均会把n+1；
*/
if-else结构语句
/*1，【if-else结构】
* if（判断条件）{
* //条件为true时执行
* }else{
* //条件为false时执行
* }
*
* 2，if（）中的表达式，运算之后的结果应该为：
* ①boolean： true 真 false 假
* ②string：非空字符串为真 空字符串为假
* ③number：0为假 一切非0均为真
* ③null/nan/undefined：全为假
* ④object类型全为真
*
* 3，else{}结构，可以根据具体情况省略
*
*
*
*
* 【多重if，阶梯if】
* 1，结构写法：
* if（条件1）{
* //条件已成立
* }else if（条件2）{
* //条件一不成立&&条件二成立
*
* //else-if 部分，可以有n多个
* }else{
* //条件一不成立&&条件二不成立
* }
*
* 2，多重if结构中，各个判断条件是互斥的！只能选择其中一条路。
* 3，if/else的{}可以省略，但是一般不提倡；
* 如果省略{} 则，if/else结构包含的代码，仅为其后最近的一行（分号结束）；
* 如果省略{} 则，else结构永远输入其前方最近的一个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结构.
循环结构（斐波那契数列举例）
/*【循环结构的步骤】
* ①声明循环变量
* ②判断循环条件
* ③执行循环体(whilede {}中的所有代码)操作
* ④更新循环变量
* 然后，循环执行②③④
*
*
* 【js中循环条件支持的数据类型】
* ①boolean： true 真 false 假
* ②string：非空字符串为真 空字符串为假
* ③number：0为假 一切非0均为真
* ③null/nan/undefined：全为假
* ④object类型全为真
*/
// var n=1; //①声明循环变量
// while (n<=10){ // ②判断循环条件
// document.write("hello world"); //③执行循环体(whilede {}中的所有代码)操作
// n++; //④更新循环变量
// }
[for循环]
1,for循环有三个表达式,分别为:①定义循环变量②判断循环条件③更新循环变量
三个表达式之间,用;分隔.
for循环三个表达式均可以省略,两个;缺一不可
2,for循环特点:先判断再执行.
3,for循环三个表达式均可以由多部分组成,之间用逗号分隔. 但是.第二部分判断条件需要用&&链接,最终结果需要为真/假.prototype
[while循环特点]:先判断,再执行;
[do-while循环特点]:先执行再判断;即便初始条件不成立,do-while循环也至少执行一次;
var m=1;
do{
}while;
//
// var a=1;
// var b=0;
// var sum=0;
// while(a<=1000){
// if (a%7==0) {
//// document.write(a);
// b++;
// } else{sum+=a; }
// a++;
//
// }
// var c=1000-b;
// document.write(c);
// document.write(sum);
//
//
//// 斐波那契数列
答案:
var a=1;
var b=1;
var c;
document.write("1<br/>");
document.write("1<br/>");
var n=1;
while (n<=18){
c=a+b;
document.write(c+"<br/>");
a=b;
b=c;
n++;
}
