从零开始学_JavaScript_系列（二）——弹框及读取、条件判断、事件处理、注释、图片、超链和div

（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来让其位于不同的位置。

更多的内容，等之后学习再补充