一起来进行javascript全面系统再学习(正在学习，不断更新中。。。)，（1）javascript基础

最新推荐文章于 2024-11-03 16:40:52 发布

野蛮d大西瓜

最新推荐文章于 2024-11-03 16:40:52 发布

阅读量822

点赞数

分类专栏：自学课程笔记文章标签： javascript button 脚本 function date 浏览器

本文链接：https://blog.csdn.net/lehear/article/details/7077394

版权

自学课程笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：大多数都是http://www.w3school.com.cn/网站里面的东西，想学的也去学吧。极其方便。

1，helloworld

<html><body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body></html>

2,当页面载入时，会执行位于 body 部分的 JavaScript。当被调用时，位于 head 部分的 JavaScript 才会被执行。

（1）调用之前已经载入了，当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。结果是：调用事件。

<html>
<head>
<script type="text/javascript">
function message()
{
alert("该提示框是通过 onload 事件调用的。")
}
</script>
</head>
<body οnlοad="message()">
</body>
</html>

（2）页面加载之后运行，在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。

<html><head>
</head><body>

<script type="text/javascript">
document.write("该消息在页面加载时输出。")
</script>

</body>
</html>

（3）如何访问外部脚本。然后把 .js 文件指定给 <script> 标签中的 "src" 属性，就可以使用这个外部文件了。

<html>
<head>
</head>
<body>

<script src="/js/example_externaljs.js">
</script>

<p>实际的脚本位于名为 "xxx.js" 的外部脚本中。</p>

</body>
</html>

3，；的问题，每行结束建议加上；，而且通过使用分号，可以在一行中写多条语句。

4，注释：// 这行代码输出标题： /* */

5，变量：变量对大小写敏感（y 和 Y 是两个不同的变量），变量必须以字母或下划线开始。

（1）结果是：变量的改变；

<html>
<body>

<script type="text/javascript">
var firstname;
firstname="George";
document.write(firstname);
document.write("<br />");
firstname="John";
document.write(firstname);
</script>

<p>上面的脚本声明了一个变量，为其赋值，显示该值，改变该值，然后再显示该值。</p>

</body>
</html>

（2）注意变量加上双引号

var x=5;var carname="Volvo";
6，运算符：加减乘除，累加，累减，求余数等；字符串和数字进行加法运算都变成了字符串。

7，比较运算符，===,==,!==,<=等等；

8，if (age<18) document.write("Too young");判断变量的值；

9，逻辑运算符：

&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

10，条件运算符：JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。variablename=(condition)?value1:value2

结果是：如果判断是什么什么身份，可以对应的什么回应。

<htm><head></head><body>
<script type="text/javascript">
var visitor="PRES"
alert(greeting=(visitor=="PRES")?"Dear President ":"Dear ");
</script></body></htm>

11，javascript的if else ；

（1）结果是：如果浏览器发现你的时间是小于20的，那么报早安；根据自带的date函数，可以搞定“早晚安”的事情！

<html>
<body>

<script type="text/javascript">
var d = new Date() //如果未向 Date 对象传递参数，它将被初始化为当前时间 (UTC)。在能够使用该对象前必须为其赋值。
/*

   var d, s = "Today's date is: ";           // 声明变量。
   d = new Date();                           // 创建 Date 对象。
   s += (d.getMonth() + 1) + "/";            // 获取月份。
   s += d.getDate() + "/";                   // 获取日。
   s += d.getYear();                         // 获取年份。
   //return(s);                                // 返回日期。
alert(s);
*/

var time = d.getHours()

if (time < 20) 
{
document.write("<b>早安</b>")
}
</script>

<p>本例演示 If 语句。</p>

<p>如果浏览器时间小于 20，那么会向您问“早安”。</p>

</body>
</html>

（2）结果是：随即的选择出现一个网站，web版本抽奖程序貌似可以这么做出来。

<html>
<body>

<script type="text/javascript">
var r=Math.random()
if (r>0.5) 
{
document.write("<a href='http://www.w3school.com.cn'>学习 Web 开发！</a>")
}
else
{
document.write("<a href='http://www.microsoft.com'>访问微软！</a>")
}
</script>

</body>
</html>

精简版抽奖程序：

<html>
<head></head>
<body>
<script type="text/javascript">//100个电话号码
var r=100*Math.random();//0-2,0-100的任意的数字，包括0，但是不包括100
a=Math.floor(r);//0-99
for(i=0;i<100;i++){
 if(i==a){
 document.write("tom"+i+"获奖了！")
 }
}
</script>
</body>
</html>

稍微复杂版本抽奖程序：略；可以向我发信息索要，基于浏览器，很方便，有浏览器就能跑，还可以控制谁谁得奖，还可以分几等奖。包含js以及css等。

(3)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></body>
</html>

结果是判断周六周末以及周五。

12， 可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

(1)alert:

<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("我是警告框！！")

alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。")
}
</script>
</head>
<body>

<input type="button" οnclick="disp_alert()" value="显示警告框" />

</body>
</html>

(2)确认框：

使用确认消息框可向用户问一个“是-或-否”问题，并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为true 或false。该消息框也是模式对话框：用户必须在响应该对话框（单击一个按钮）将其关闭后，才能进行下一步操作。

<html><head><script type="text/javascript">
var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。");
if (truthBeTold) {
window.alert("欢迎访问我们的 Web 页！");
}  else  window.alert("再见啦！");
</script></head><body></body></html>

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
  {
  alert("You pressed OK!");
  }
else
  {
  alert("You pressed Cancel!");
  }
}
</script>
</head>
<body>

<input type="button" οnclick="show_confirm()" value="Show a confirm box" />

</body>
</html>

（3）提示框：

<html><head><script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("请输入您的名字","Bill Gates")
  if (name!=null && name!="")
    { 

document.write("你好！" + name + " 今天过得怎么样？")

 }
  }
</script>
</head>
<body>

<input type="button" οnclick="disp_prompt()" value="显示提示框" />

</body>
</html>


提示消息框
提示消息框提供了一个文本字段，用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数，则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则，默认文本为 "<undefined>"。 
与alert( ) 和 confirm( ) 方法类似，prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框 
var theResponse = window.prompt("欢迎？","请在此输入您的姓名。");
13，函数：JavaScript 函数
将脚本编写为函数，就可以避免页面载入时执行该脚本。
函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。
你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
（1）调用函数<html>
<head><script type="text/javascript">
function myfunction()
{
alert("您好！")
}
</script></head>
<body><form>
<input type="button" οnclick="myfunction()" value="调用函数">
</form><p>通过点击这个按钮，可以调用一个函数。该函数会提示一条消息。</p></body>
</html>

（2）带有参数的函数向函数传递变量，以及在函数中使用该变量。向函数传递多个变量，以及在函数中使用这些变量。

<head>

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

</head>
<body>

<form>
<input type="button" οnclick="myfunction('您好！李海亚！')" value="调用函数">
</form>

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

</body>

-------------------------------------------

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

<body> 
<form> 
<input type="button" 
οnclick="myfunction('早安！')" 
value="在早晨"> 

<input type="button" 
οnclick="myfunction('晚安！')" 
value="在夜晚"> 
</form> 

<p>通过点击这个按钮，可以调用一个函数。该函数会输出传递给它的参数。</p>

</body> 
</html>

--------------------------------------------

return 语句

return 语句用来规定从函数返回的值。

因此，需要返回某个值的函数必须使用这个 return 语句。

<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>

JavaScript 变量的生存期

当您在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。

如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始，在页面关闭时结束。

14，关于一个方法的用法，

join 方法

<html>
<head><script type="text/javascript">
function myfunction(txt){
   var a, b;
   a = new Array(0,1,2,3,4);
   b = a.join("-");
   alert(txt+b);
}
</script></head>
<body>
<form>
<input type="button" οnclick="myfunction('您好！')" value="调用函数">
</form>
<p>通过点击这个按钮，可以调用一个带参数的函数。该函数会输出这个参数。在一个数组中加入指定的标点符号，分割数组，本例中本来是01234，最后变成了0-1-2-3-4</p>
</body>
</html>

15，（1）for循环：

JavaScript 循环：在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。向页面打印div标签就很方便，尤其是那些内容型的网站，格式确定后，就是循环出来显示即可。

<html><body>

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

ex:循环产生html标题：

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

（2）while循环：

<body><script type="text/javascript">
i = 0
while (i <= 5)
{
document.write("数字是 " + i)
document.write("<br />")
i++
}
</script></body>
（2）do while 循环：优点是，先做一次循环，之后看条件是否满足。

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

16，JavaScript Break 和 Continue两种中断：

<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){continue}
document.write("数字是 " + i)
document.write("<br />")
}
</script>

结果：

数字是 0
数字是 1
数字是 2
数字是 4
数字是 5
数字是 6
数字是 7
数字是 8
数字是 9
数字是 10
break中断：

<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>
16：JavaScript For...In 声明：

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

这个十分有作用。

<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>

结果是：宝马奔驰宾利

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

优点：省去了判断mycars的length，不用采用for循环写大段代码，可以在以往项目里面普及。

17 ，JavaScript 事件，事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例：

鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。更多请看：http://www.w3school.com.cn/js/jsref_events.asp

onload 和 onUnload事件：

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

onFocus, onBlur 和 onChange事件：

<input type="text" size="30" id="email" οnchange="checkEmail()">

onSubmit事件：

<form method="post" action="xxx.htm" οnsubmit="return checkForm()">

onMouseOver 和 onMouseOut事件：

<a href=http://www.w3school.com.cn

οnmοuseοver="alert('An onMouseOver event');return false"><img src="w3school.gif" width="100" height="30"></a>

18，JavaScript Try...Catch 语句:

description 属性

返回或设置与特定错误相联系的描述字符串。

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
   {
   adddlert("Welcome guest!")
   }
catch(err)
   {
   txt="本页中存在错误。\n\n"
   txt+="错误描述：" + err.description + "\n\n"
   txt+="点击“确定”继续。\n\n"
   alert(txt)
   }
}
</script>
</head>

<body>
<input type="button" value="查看消息" οnclick="message()" />
</body>

</html>

弹出确认框，可以选择是否留在本页面还是进行取消，回到其他页面。出错之后捕捉，捕捉之后处理。

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
   {
   adddlert("Welcome guest!")
   }
catch(err)
   {
     txt="本页中存在错误。\n\n"
     txt+="点击“确定”继续查看本页，\n"
     txt+="点击“取消”返回首页。\n\n"
     if(!confirm(txt))
         {
         document.location.href="/index.html"
         }
   }
}
</script>
</head>

<body>
<input type="button" value="查看消息" οnclick="message()" />
</body>

</html>

19，Throw 声明简介：

throw 声明的作用是创建 exception（异常）。你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。控制用户输入选项。

<html>
<body>
<script type="text/javascript">
var x=prompt("请输入 0 至 10 之间的数：","")
try
{ 
if(x>10) 
  throw "Err1" 
else if(x<0)
  throw "Err2"
else if(isNaN(x))
  throw "Err3"
} 
catch(er)
{
if(er=="Err1") 
  alert("错误！该值太大！")
if(er == "Err2") 
  alert("错误！该值太小！") 
if(er == "Err3") 
  alert("错误！该值不是数字！") 
}
</script>
</body>
</html>

20，onerror事件：注意：如何使用 onerror 事件捕获网页中的错误。（chrome、opera、safari 浏览器不支持）

语法：οnerrοr=handleErrfunction handleErr(msg,url,l){//Handle the error herereturn true or false}

<html>
<head>
<script type="text/javascript">
οnerrοr=handleErr
var txt=""

function handleErr(msg,url,l)
{
txt="本页中存在错误。\n\n"
txt+="错误：" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行：" + l + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
return true//打印出来true的时候，控制台不提示错误，反之，会提示错误。
}

function message()
{
adddlert("Welcome guest!")
}
</script>
</head>

<body>
<input type="button" value="查看消息" οnclick="message()" />
</body>

</html>

21，特殊字符：

你可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。