AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

Ajax学习-Javascript实例1

2017-11-16 925
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
实例：
1，生成文本。
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
2，生成普通文本和标签。
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>
3，head部分。
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event")
}
</script>
</head>
<body onload="message()">
</body>
</html>
4，body部分。
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("This message is written when the page loads")
</script>
</body>
</html>
5，外部脚本。
<html>
<head>
</head>
<body>
<script src="/www.w3school.com.cn/js/example_externaljs.js">
</script>
<p>
The actual script is in an external script file called "xxx.js".
</p>
</body>
</html>
6，变量。
<html>
<body>
<script type="text/javascript">
var name = "Hege"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
<p>This example declares a variable, assigns a value to it, and then displays the variable.</p>
<p>Then the variable is displayed one more time, only this time as a heading.</p>
</body>
</html>
7，if声明。
<html>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 10) 
{
document.write("<b>Good morning</b>")
}
</script>
<p>
This example demonstrates the If statement.
</p>
<p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
</p>
</body>
</html>
8，if...else声明。
<html>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 10) 
{
document.write("<b>Good morning</b>")
}
else
{
document.write("<b>Good day</b>")
}
</script>
<p>
This example demonstrates the If...Else statement.
</p>
<p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
Otherwise you will get a "Good day" greeting.
</p>
</body>
</html>
9，if...else if...else声明。
<html>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>
<p>
This example demonstrates the if..else if...else statement.
</p>
</body>
</html>
10，随机链接。
<html>
<body>
<script type="text/javascript">
var r=Math.random()
if (r>0.5) 
{
document.write("<a href='../../index.html'>Learn Web Development!</a>")
}
else
{
document.write("<a href='http://www.microsoft.com'>Visit Microsoft!</a>")
}
</script>
</body>
</html>
11，Switch声明。
<html>
<body>
<script type="text/javascript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
  document.write("<b>Finally Friday</b>")
  break
case 6:
  document.write("<b>Super Saturday</b>")
  break
case 0:
  document.write("<b>Sleepy Sunday</b>")
  break
default:
  document.write("<b>I'm really looking forward to this weekend!</b>")
}
</script>
<p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>
</body>
</html>
12，警告框。
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
<input type="button" value="Display alert box" />
</body>
</html><html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
<input type="button" value="Display alert box" />
</body>
</html>
13，带有折行的警告框。
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!")
}
</script>
</head>
<body>
<input type="button" value="Display alert box" />
</body>
</html>
14，确认框。
<html>
<head>
<script type="text/javascript">
function disp_confirm()
  {
  var r=confirm("Press a button")
  if (r==true)
    {
    document.write("You pressed OK!")
    }
  else
    {
    document.write("You pressed Cancel!")
    }
  }
</script>
</head>
<body>
<input type="button" value="Display a confirm box" />
</body>
</html>
15，提示框。
<html>
<head>
<script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("Please enter your name","Harry Potter")
  if (name!=null && name!="")
    {
    document.write("Hello " + name + "! How are you today?")
    }
  }
</script>
</head>
<body>
<input type="button" value="Display a prompt box" />
</body>
</html>
16，函数。
<html>
<head>
<script type="text/javascript">
function myfunction()
{
alert("HELLO")
}
</script>
</head>
<body>
<form>
<input type="button" 

value="Call function">
</form>
<p>By pressing the button, a function will be called. The function will alert a message.</p>
</body>
</html>
17，带有参数的函数。
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button" 
onclick="myfunction('Hello')"
value="Call function">
</form>
<p>By pressing the button, a function with an argument will be called. The function will alert
this argument.</p>
</body>
</html>
18，带有参数的函数2。
<html> 
<head> 
<script type="text/javascript"> 
function myfunction(txt) 
{ 
alert(txt) 
} 
</script> 
</head>
<body> 
<form> 
<input type="button" 
Morning!')" 
value="In the Morning">
<input type="button" 
Evening!')" 
value="In the Evening"> 
</form>
<p>
When you click on one of the buttons, a function will be called. The function will alert
the argument that is passed to it.
</p>
</body> 
</html>
19，返回值的函数。
<html>
<head>
<script type="text/javascript">
function myFunction()
{
return ("Hello, have a nice day!")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myFunction())
</script>
<p>The script in the body section calls a function.</p>
<p>The function returns a text.</p>
</body>
</html>
20，带有参数并返回值的函数。
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3))
</script>
<p>The script in the body section calls a function with two parameters (4 and 3).</p>
<p>The function will return the product of these two parameters.</p>
</body>
</html>
21，For循环。
<html>
<body>
<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
document.write("The number is " + i)
document.write("<br />")
}
</script>
<p>Explanation:</p>
<p>This for loop starts with i=0.</p>
<p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
</body>
</html>
22，循环产生HTML标签
<html>
<body>
<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">This is header " + i)
document.write("</h" + i + ">")
}
</script>
</body>
</html>
23，While循环。
<html>
<body>
<script type="text/javascript">
i = 0
while (i <= 5)
{
document.write("The number is " + i)
document.write("<br>")
i++
}
</script>
<p>Explanation:</p>
<p><b>i</b> is equal to 0.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
</body>
</html>
24，Do While循环。
<html>
<body>
<script type="text/javascript">
i = 0
do
{
document.write("The number is " + i)
document.write("<br>")
i++
}
while (i <= 5)
</script>
<p>Explanation:</p>
<p><b>i</b>  equal to 0.</p>
<p>The loop will run</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>

</body>
</html>
25，break声明。
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
<p>Explanation: The loop will break when i=3.</p>
</body>
</html>


 本文转自 王祖康 51CTO博客，原文链接：http://blog.51cto.com/wzk89/390780 ，如需转载请自行联系原作者
文章标签：
JavaScript
前端开发
关键词：
JavaScript学习
JavaScript实例
学习JavaScript
JavaScript ajax
ajax学习
技术小胖子
目录
相关文章
游客vx6uejvd6s6ck
|
7月前
|
前端开发 JavaScript
个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现，包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
游客vx6uejvd6s6ck
774 0
游客vx6uejvd6s6ck
|
7月前
|
前端开发
个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统，旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告，涵盖还款记录
游客vx6uejvd6s6ck
1503 0
蓝易云
|
9月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例：从理论到实践
这个例子展示了JavaScript的基本功能，包括操作HTML元素，监听事件，以及改变元素的样式。通过学习和理解这个例子，你可以了解到JavaScript在网页中的应用，以及如何使用JavaScript来创建交互式的网页。
蓝易云
200 13
dasein58
|
8月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库，利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能，如几何体、纹理、光照、阴影等，以便开发者能够快速地创建复杂且逼真的3D场景。同时，Three.js还具有很好的跨平台和跨浏览器兼容性，让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
dasein58
291 0
sunrr
|
Web App开发 JavaScript 前端开发
如何学习JavaScript？
如何学习JavaScript？
sunrr
307 5
雨溪-yuxi
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理，包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等，适合前端学习者参考。作者是一位热爱前端技术的大一学生，专注于分享实用的编程技巧。
雨溪-yuxi
179 2
雨溪-yuxi
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识，包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性，以及JavaScript中的变量类型（`var`、`let`、`const`）和数据类型（基本数据类型与引用数据类型）。通过实例代码详细解释了JavaScript的核心概念，适合初学者入门学习。
雨溪-yuxi
196 1
突突修
|
JavaScript 前端开发 PHP
jQuery|AJAX get() 和 post()
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 HTTP 请求：GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
突突修
1298 0
风与烈酒
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
风与烈酒
178 0