从零开始学_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="输入正确!"; //如果是的话,在idshow的地方,用文本替换之

}

 

14)条件判断

参考(13),if就是一个条件判断语句,括号里是条件,如果成立(条件为true),执行括号内的,不成立,执行else后面的括号内的,如果没有else则跳过这部分。

类似的还有whilefor等,这些不仅仅包含条件,而且也是循环语句。具体略,可以参考C++的(我之前写过C++的帖子)。

 

 

15)事件处理程序

在发生某种事件时,怎么处理。

先上代码:

<img src="01.png" onmouseover="src='02.png'" onmouseout="src='01.png'"> <!-- 这行的意思是,插入一个图片,初始是01.png,鼠标移动上去后,是02.png,移动走又变回01.png-->

 

位置是在第一个标签之中,类型有(似乎对大小写并不敏感,即onMouseOveronmouseover是一样的)

①按下时: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有关的。

目录
相关文章
|
6天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
21 7
|
4天前
|
数据采集 JavaScript 前端开发
理解并应用:JavaScript响应式编程与事件驱动编程的差异
了解JavaScript的响应式编程与事件驱动编程至关重要。事件驱动编程基于事件触发函数执行,如用户交互或系统事件。响应式编程则关注数据流变化,利用Observables自动响应更新。在爬虫代理IP的Web Scraping示例中,两者分别通过axios和rxjs显示了数据抓取的不同处理方式。掌握这两者能提升异步操作的效率和代码质量。
理解并应用:JavaScript响应式编程与事件驱动编程的差异
|
4天前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
14 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
14天前
|
JavaScript 前端开发 安全
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印 1. 信息标识: 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息,帮助用户更好地理解文档内容的属性。 2. 版权保护: 在文档中添加水印可以帮助保护内容的版权,防止他人未经授权地复制、转载或篡改内容。 3. 安全保护: 对于敏感信息或机密文档,添加水印可以帮助防止信息泄露,提高文档的安全性。 4. 提升专业性: 在一些场景下,如商业报告、合同文件等,添加水印可以增加文档的专业性和正式性。 5. 防止截屏或拷贝: 在网页中添加水印可以防止用户通过截屏或复制粘贴等方式非法获取文档内容。
17 1
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
|
2天前
|
JavaScript
Vue.js中使用.self修饰符来限制事件处理程序的作用域
Vue.js中使用.self修饰符来限制事件处理程序的作用域
|
19小时前
|
JavaScript 前端开发
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
7 1
|
6天前
|
JavaScript 前端开发
JS的监听事件
JS的监听事件
|
15天前
|
算法 JavaScript 前端开发
【经典算法】LCR187:破冰游戏(约瑟夫问题,Java/C/Python3/JavaScript实现含注释说明,Easy)
【经典算法】LCR187:破冰游戏(约瑟夫问题,Java/C/Python3/JavaScript实现含注释说明,Easy)
16 1
|
15天前
|
存储 JavaScript 前端开发
【经典算法】LeetCode350:两个数组的交集 II(Java/C/Python3/JavaScript实现含注释说明,Easy)
【经典算法】LeetCode350:两个数组的交集 II(Java/C/Python3/JavaScript实现含注释说明,Easy)
9 1
|
23天前
|
前端开发 JavaScript PHP
解决在页面中无法获取qrcode.js生成的base64的图片
该文档介绍了如何解决在部分安卓手机上无法正确加载二维码图片的问题。之前的方法是使用qrcode.js生成二维码,然后与背景图结合用canvas绘制海报,但在某些安卓设备上遇到onload事件不触发的问题。
26 2

热门文章

最新文章