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++;
}
H5学习第四周的更多相关文章
- H5学习的第三周
上周,我们结束了京东站的制作,本周我们开始了手机站和响应式网站的学习,并仿制了一个手机端界面和一个响应式界面,在完成这两个网站的过程中我遇到了许多问题,也了解了它们的解决方法,接下来我讲详细介绍本周我 ...
- H5学习第二周
怎么说,在各种感觉中h5学习的第二周已经过来了,先总结一下,感觉学习h5是一件让我爱恨交加的事,学会一些新的知识并把它成功运行出来的时候是非常激动和兴奋的,但是有时候搞不懂一个标签或者属性的时候,就有 ...
- 201671010140. 2016-2017-2 《Java程序设计》java学习第四周
java学习第四周体会 本周,与前几周不同的是,老师没有进行课堂测试,而是上了一节课,回顾与总结了之前三周所学的知识,也是因为这节课,我注意到了之前学习中忽略的一些细节,和之前学习方法 ...
- H5学习笔记1
H5学习笔记 1.创建超链接: target=”_blank”:链接的目标网页会在新的窗口中打开. target=”_parent”:链接的目标会在当前窗口中打开,如果在框架网页中,则会在上一层框架打 ...
- 2017.3.12 H5学习的第一周
本周我开始了H5的学习,在这一周里我们从html的基本标签开始一直讲到了才算css的用法,接下来我将记录下来本周我学到的H5的内容. 首先是声明文档,声明文档类型是HTML5文件,它在HTML文档必不 ...
- H5学习第一周
已经接触H5一个周了,经过学习,总算对H5有了一些了解和认知,下面就总结一下我对H5的认知和感悟. 首先接触的是H5的常用标签[meta],它有其以下常用属性 1.charset属性.单独使用,设置文 ...
- java学习第四周
这是暑假第四周,这周我继续学习了Java的基础知识. 了解到Java的类继承,学习到Java的接口的相关知识Java的每一个类都有且仅有一个直接父类,没有多重继承,但是接口可以继承多个,如果把接口看做 ...
- H5学习之--前端和PHP后端的简单交互
最近在学习前端的东西,H5+CSS3+JS,又分别学习了原生JS和jQuery库,还有Bootstrap框架,因为我是做ios开发的,所以先熟悉WebApp相关的开发知识,其他的学习资料,网上有很多的 ...
- H5学习
1.html{font-size:62.5%;}//不用font-size:10px的原因:(因为设了62.5%后就有1rem = 10px,便于用rem来指定元素的尺寸,这样响应式的时候可以直接改变 ...
随机推荐
- 【前端】:jQuery下
前言: 接上一篇博客: [前端]:jQuery上 一.jQuery属性操作 ① attr(设置或返回自定义属性值) input.select.textarea框中的内容, 可以通过attr来获取,但是 ...
- jQuery写选项卡
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8" ...
- Omi应用md2site发布-markdown转网站利器
写在前面 Md2site是基于Omi的一款Markdown转网站工具,使用简单,生成的文件轻巧,功能强大. 当我们想把一堆markdown文档转成网站时,你可能有许多选择,倘若选择 md2site , ...
- 利刃 MVVMLight 4:绑定和绑定的各种使用场景
一.绑定: 主要包含元素绑定和非元素绑定两种. 1.元素绑定,是绑定的最简单形式,源对象是WPF的元素,并且源对象的属性是依赖项属性. 根据我们之前的知识 ,依赖项属性具有内置的更改通知支持.所以当我 ...
- Yii 2.0 ActiveForm生成表单 ,控制表单label和filed样式,filed一旦报错,前面lable颜色跟着变,看图,帮你解决
需要生成如下图的表单样式,图一:
- 简单聊聊HTTP/TCP/IP协议
经过几天的面试,有很多公司的面试官都会问到是否了解HTTP/TCP/IP协议? 一遇到这个问题,就一脸懵逼,虽然是计算机基层的东西,看来是必须得了解的,回到家之后,就查找了一些资料,整理了一篇博客,简 ...
- web计时机制——performance对象
前面的话 页面性能一直都是Web开发人员最关注的领域.但在实际应用中,度量页面性能的指标,是提高代码复杂程度和巧妙地使用javascript的Date对象.Web Timing API改变了这个局面, ...
- oracle expdp导出远程数据到本地
1.本地数据库新建一个用户test,并授予以下基本权限(尽量不要多授权,如本地权限大于远程,会导致导出失败,郁闷!): grant connect to test;grant resource to ...
- Java面试11|Maven与Git
git的命令一定要掌握,如果学习可以参考:廖雪峰的官方网站 1.Maven 生命周期及Maven多项目聚合与继承 Maven的生命周期分如下的9个阶段. (1)clean 清理自动生成的文件,也就是t ...
- .NET Core跨平台:.NET Core项目部署到linux(Centos7)
1.开篇说明 a 上篇博客简单的说明了一下 使用.NET Core开发的一个总结,地址是:(http://www.cnblogs.com/hanyinglong/p/6442148.html),那么这 ...