(11)导入js文件的潜在问题
假如有一个
<script src=”111.js”>
js脚本1
</script>
那么,由于导入了111.js的原因,“js脚本1”事实上是不会被执行的。
准确的说,包含导入js脚本功能的script标签,里面的脚本都不会执行(不能保证全部,但目前学到的都不会被执行,如果有可以执行的,其后会在这里修改说明)。
(12)补充说明适应人群
至少要有一点的编程概念,毫无编程概念的话,恐怕是有一些难度的。
由于时间很紧张,所以不能保证把基础概念写的很细,但总体的格式、思想都是相近的。我只有c++的一些编程基础,因此只要学过一点c++或者类似的编程,应该是都能搞得懂的。
(13)出现一个弹框,要求输入文字,并且验证
验证成功执行某个函数(显示文本),验证失败不执行。
ttt=prompt("enter"); //出现一个弹框,标题为enter,将输入的值赋给ttt
if(ttt=="aaa") //验证ttt的内容是不是字符串aaa
{
document.getElementById("show").innerHTML="输入正确!"; //如果是的话,在id为show的地方,用文本替换之
}
(14)条件判断
参考(13),if就是一个条件判断语句,括号里是条件,如果成立(条件为true),执行括号内的,不成立,执行else后面的括号内的,如果没有else则跳过这部分。
类似的还有while,for等,这些不仅仅包含条件,而且也是循环语句。具体略,可以参考C++的(我之前写过C++的帖子)。
(15)事件处理程序
在发生某种事件时,怎么处理。
先上代码:
<img src="01.png" onmouseover="src='02.png'" onmouseout="src='01.png'"> <!-- 这行的意思是,插入一个图片,初始是01.png,鼠标移动上去后,是02.png,移动走又变回01.png了-->
位置是在第一个标签之中,类型有(似乎对大小写并不敏感,即onMouseOver和onmouseover是一样的)
①按下时:onclick=”执行的语句”;
②鼠标移动到上面时:onMouseOver=”执行的语句”;
③鼠标离开:onMouseOut=”执行的语句”;
④点击后生效:onClick=”执行的语句”;(仅限鼠标左键)
⑤鼠标按下后生效:onMouseDown=”执行的语句”;(左右键都有用)
⑥增加条件判断(初始1#图片,第一次点击更换为2#图片,再次点击更换为1#图片,然后交替)
<img id="01png" src="01.png"onclick="png01()">
<script>
i=0;//需要在外面声明才行
function png01()
{
if(i==0){i=1;document.getElementById("01png").src="02.png";}//判断更改图片
else{i=0;document.getElementById("01png").src="01.png";}//判断更改图片
}
</script>
⑦鼠标在上面是一个鼠标,鼠标离开又是另外一个图片
<img id="01png" src="01.png" onmouseover="src='02.png'" onmouseout="src='01.png'">
⑧判断路径中,文件名是否有某个关键词;
function mouseover()
{
png=document.getElementById("01png");
if(png.src.match("01.png")) //如果路径中有关键词01,
{
png.src="02.png";
}
else
{
png.src="01.png";
}
}
(16)注释
html注释的语法是:
<!--这里面写注释-->
js注释的语法:
js标签之内(即<script>和</script>之间的部分),可以像c++那样用双斜线。
(17)图片
这里html内容:
①标签<img src=”图片链接”>
②限制高度和宽度(会导致图片变形):width=””和height=””;
③响应,例如鼠标点击后做什么,参考(15)
④在文字之中插入图片:
<p>右边是一个美女图片<img id="01png" src="01.png" width="200" height="200" onmouseover="mouseover()" onmouseout="mouseover()"> 左边是美女图片</p>
(18)超链接
在使用<a href=”链接地址”></a> 即可,将触发链接的内容加入到<a>中间如:
如:
<a href="http://baidu.com" target="_blank"> <!--加入target="_blank"表示是新窗口,不加则是在之前的窗口-->
<img id="01png" src="01.png" width="100" height="100" onmouseover="mouseover()" onmouseout="mouseover()">
</a>效果是当前页面更换为baidu.com(注意:如果使用外链,需要加入前缀http://
①如果是链接到本地(或者网站某个地址),则使用相对路径;
②链接到同一个页面的不同位置,参考链接:
http://www.w3school.com.cn/tiy/t.asp?f=html_link_locations
③如果图片不能存在的话,用文本替代:
<img src="不存在的图片.png" alt="这里是不存在的图片">
效果图:
(19)使用div来布局
<div>布局的好处是,提前把网站页面划分为若干个区域,然后设置好每个区域的大小。
如图片,先将页面分为3个区域。
然后在每个区域中再细分。
①一般在div中使用class属性:<div class=”某个样式”></div>
然后这个div则使用class的这个样式了。
②一个div实际上是一行(也就是说不同div之间是换行),但貌似可以通过class来让其位于不同的位置。
更深的话,是跟DOM有关的。