JAVASCRIPT学习笔记基础(二)

简介:

函数

JavaScript 函数

将脚本编写为函数,就可以避免页面载入时执行该脚本。

函数包含着一些代码,这些代码只能被事件激活,或者在函数被调用时才会执行。

你可以在页面中的任何位置调用脚本(如果函数嵌入一个外部的 .js 文件,那么甚至可以从其他的页面中调用)。

函数在页面起始位置定义,即 <head> 部分。

<html>
<head>
<script type="text/javascript">
function myfunction()
{
alert("您好!");
}
</script>
</head>


<body>
<form>
<input type="button" onclick="myfunction()" value="调用函数">
</form>

<p>通过点击这个按钮,可以调用一个函数。该函数会提示一条消息</p>
</body>

</html>

带参数的函数

<html>
<head>

<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>

</head>
<body>

<form>
<input type="button" onclick="myfunction('zzk的参数')" value="调用函数">
</form>

<p>通过点击这个按钮,可以调用一个带参数的函数。该函数会输出这个参数。</p>

</body>
</html>


带参数的函数2

<html>
<head>
<script type="text/javascript">
function myfunction(txt) 
{
alert(txt)
}
</script>
</head>

<body>
<form>
<input type="button" onclick="myfunction('早安!')" value="在早晨">

<input type="button" onclick="myfunction('晚安!')" value="在夜晚">
</form>
<p>通过点击这个按钮,可以调用一个函数。该函数会输出传递给它的参数。</p>
</body>
</html>


返回值的函数

<html>
<head>

<script type="text/javascript">
function myFunction()
{
return ("您好,祝您愉快!")
}
</script>

</head>
<body>

<script type="text/javascript">
document.write(myFunction())
</script>

<p>body 部分中的脚本调用一个函数。</p>

<p>该函数返回一段文本。</p>

</body>
</html>


带参数和返回值的函数

<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b
}
</script>
</head>

<body>
<script type="text/javascript">
document.write(product(6,5))
</script>
<p>body 部分中的脚本调用一个带有两个参数(6 和 5)的函数。</p>
<p>该函数会返回这两个参数的乘积。</p>

</body>
</html>


for循环

<html>
<body>
<script type="text/javascript">
for(i=0;i<=5;i++)
{
document.write("数字是"+i)
document.write("<br />")
}
</script>
<h1>解释:</h1>

<p>for 循环的步进值从 i=0 开始。</p>

<p>只要 <b>i</b> 小于等于 5,循环就会继续运行。</p>

<p>循环每循环一次,<b>i</b> 就会累加 1。</p>

</body>
</html>

循环产生HTML标题

<html>
<body>

<script type="text/javascript">
for(i=1;i<=6;i++)
{
document.write("<h"+i+">这是标题"+i)
document.write("</h"+i+">")
}
</script>


</body>
</html>

一个for循环程序

<html>
<body>
<script type="text/javascript">
var i=0
for(i=0;i<10;i++)
{
document.write("The number is "+i);
document.write("<br />")
}

</script>
</body>
</html>


while循环

<html>
<body>

<script type="text/javascript">
i = 0
while (i <= 5)
{
document.write("数字是 " + i)
document.write("<br />")
i++
}
</script>

<h1>解释:</h1>

<p><b>i</b> 等于 0。</p>

<p>当 <b>i</b> 小于或等于 5 时,循环将继续运行。</p>

<p>循环每运行一次,<b>i</b> 会累加 1。</p>

</body>
</html>

dowhile循环

<html>
<body>
<script type="text/javascript">
var i=0
do
{
document.write("The number is "+i)
document.write("<br />")
i=i+1
}
while(i<0)
</script>
</body>
</html>


dowhile循环2

<html>
<body>

<script type="text/javascript">
i = 0
do
{
document.write("数字是 " + i)
document.write("<br />")
i++
}
while (i <= 5)
</script>

<h1>解释:</h1>

<p><b>i</b>  等于 0。</p>

<p>循环首先会运行。</p>

<p>每循环一次,<b>i</b> 就会累加 1。</p>

<p>当 <b>i</b> 小于或等于 5 时,循环会继续运行。</p>


</body>
</html>


break语句

<html>
<body>
<script type="text/javascript">
var i=0
for(i=0;i<=10;i++)
{
if(i==3) {break}
document.write("数字是 "+i)
document.write("<br />")
}
</script>
<p>解释:循环会在 i=3 时中断。</p>
</body>
</html>

输出:

数字是 0
数字是 1
数字是 2

解释:循环会在 i=3 时中断。





使用 continue 语句来终止当前的循环,然后从下一个值继续执行。 
<html>
<body>
<script type="text/javascript">
var i=0
for(i=0;i<=10;i++)
{
if(i==3) {continue}
document.write("数字是 "+i)
document.write("<br />")
}
</script>
<p>解释:循环会在 i=3 时继续循环。</p>
</body>
</html>


 输出: 

数字是 0数字是 1数字是 2数字是 4数字是 5数字是 6数字是 7数字是 8数字是 9数字是 10

解释:循环会在 i=3 时继续循环。

 

JavaScript For...In 声明

For...In 声明用于对数组或者对象的属性进行循环操作。

for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

语法:

for (变量 in 对象)
{
    在此执行代码
}

“变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。

<html>
<body>
<script type="text/javascript">
var x
var mycars=new Array()
mycars[0]="宝马"
mycars[1]="奔驰"
mycars[2]="宾利"

for(x in mycars)
{
document.write(mycars[x]+"<br />")
}
</script>
</body>
</html>



 

使用 continue 语句来终止当前的循环,然后从下一个值继续执行。 
<html>
<body>
<script type="text/javascript">
var i=0
for(i=0;i<=10;i++)
{
if(i==3) {continue}
document.write("数字是 "+i)
document.write("<br />")
}
</script>
<p>解释:循环会在 i=3 时继续循环。</p>
</body>
</html>


 输出: 

数字是 0数字是 1数字是 2数字是 4数字是 5数字是 6数字是 7数字是 8数字是 9数字是 10

解释:循环会在 i=3 时继续循环。

 
目录
相关文章
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
5月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
6月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
230 0
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
246 5
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
137 2
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
170 1
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
133 2
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
138 1
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
209 0

热门文章

最新文章

下一篇
oss云网关配置