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 时继续循环。

 
目录
相关文章
|
1月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
51 3
|
25天前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
35 4
js学习--制作猜数字
|
24天前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
38 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
25天前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
35 4
|
24天前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
14 2
|
24天前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
15 2
|
24天前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
31 1
|
24天前
|
JavaScript
js学习--抽奖
js学习--抽奖
11 1
|
24天前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
28 1
|
23天前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
32 0