移动开发基本概念
<!--[了解 像素基础知识]
① 设备物理像素：设备上一个像素点 ② 设备无关像素：可以与物理像素通过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 οnclick="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++; }