JavaScript学习笔记（01）-JavaScript基础

最新推荐文章于 2024-10-11 17:39:47 发布
最新推荐文章于 2024-10-11 17:39:47 发布
阅读量175 收藏
点赞数
文章标签： javascript exception function button microsoft loops
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoxudong5288/article/details/6058524
版权

JavaScript 能做什么？


1）JavaScript为HTML设计师提供一种编程工具。
2）JavaScript可以将动态文本放入HTML页面。
3）JavaScript可以对事件做出反应。
4）JavaScript可以读写HTML元素。
5）JavaScript可以用来做表单验证。
6）JavaScript可以用来检测访问者的浏览器。
7）JavaScript可以用来创建cookies.

 

JavaScript的正式名是："ECMAScript"
ECMA-262是正式的JavaScript标准。这个标准基于JavaScript(Netscape)和JScript(Microsoft).

 

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

 

JavaScript基础
0）Switch
switch(n)
   {
   case 1:
     执行代码块 1
     break
   case 2:
     执行代码块 2
     break
   default:
     如果n即不是1也不是2，则执行此代码
   }

example:
<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.

var d=new Date()
theDay=d.getDay()

switch (theDay)
   {
   case 5:
     document.write("Finally Friday")
     break
   case 6:
     document.write("Super Saturday")
     break
   case 0:
     document.write("Sleepy Sunday")
     break
   default:
     document.write("I'm looking forward to this weekend!")
}
</script>


1）消息框


   (1)警告框 alter("文本");
   (2)确定框 confirm("文本");
      当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
      如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
   (3)提示框 prompt("文本","默认值");
      提示框经常用于提示用户在进入页面前输入某个值。
      当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
      如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
example-1
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("再次向您问好！在这里，我们向您演示" + '/n' + "如何向警告框添加折行。")
}
</script>
</head>
<body>

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

</body>
</html>
example-2
<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>
example-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>

2）For Loop

example
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">这是标题 " + i)
document.write("</h" + i + ">")
}
3) While Loop

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

 

4) Break Loops

 

    (1)break 语句
      使用 break 语句来终止循环。
   (2)continue 语句
      使用 continue 语句来终止当前的循环，然后从下一个值继续执行。
example
<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>


5) For...In


如何使用 For...In 声明来遍历数组内的元素。
example
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

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

 

6) 事件

事件是可以被 JavaScript 侦测到的行为。
事件
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。
事件举例：
•鼠标点击
•页面或图像载入
•鼠标悬浮于页面的某个热点之上
•在表单中选取输入框
•确认表单
•键盘按键
注意：事件通常与函数配合使用，当事件发生时函数才会执行。

  (1)onload 和 onUnload
     当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
     onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。
     onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存 

     在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。
  (2)onFocus, onBlur 和 onChange
     onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。
    下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。
    <input type="text" size="30" id="email" οnchange="checkEmail()">onSubmit
  (3)onSubmit 用于在提交表单之前验证所有的表单域。
    下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回 

    值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。
    <form method="post" action="xxx.htm" οnsubmit="return checkForm()">onMouseOver 和 onMouseOut
  (4)onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
    下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：
     <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>

 

7）Try...Catch

example-1
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!")
  }
catch(err)
  {
  txt="此页面存在一个错误。/n/n"
  txt+="错误描述: " + err.description + "/n/n"
  txt+="点击OK继续。/n/n"
  alert(txt)
  }
}
</script>

example-2
try
  {
  adddlert("Welcome guest!")
  }
catch(err)
  {
  txt="There was an error on this page./n/n"
  txt+="Click OK to continue viewing this page,/n"
  txt+="or Cancel to return to the home page./n/n"
  if(!confirm(txt))
    {
    document.location.href="http://www.w3school.com.cn/"
    }
  }
}
</script>

 

8) Throw

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

语法：
throw(exception)exception 可以是字符串、整数、逻辑值或者对象。

注意：使用小写字母编写 throw。使用大写字母会出错！

example
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
}
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high")
if(er == "Err2")
alert("Error! The value is too low")
}
</script>
</body>
</html>

 

9) onerror


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

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

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

 

10)特殊字符

插入特殊字符

反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。

请看下面的 JavaScript 代码：

var txt="We are the so-called "Vikings" from the north."
document.write(txt)

在 JavaScript 中，字符串使用单引号或者双引号来起始或者结束。这意味着上面的字符串将被截为：We are the so-called。

要解决这个问题，就必须把在 "Viking" 中的引号前面加上反斜杠 (/)。这样就可以把每个双引号转换为字面上的字符串。

var txt="We are the so-called /"Vikings/" from the north."
document.write(txt)

现在 JavaScript 就可以输出正确的文本字符串了：We are the so-called "Vikings" from the north。

这是另一个例子：

document.write ("You /& me are singing!") 

上面的例子会产生以下输出：

You & me are singing!

下面的表格列出了其余的特殊字符，这些特殊字符都可以使用反斜杠来添加到文本字符串中：

代码输出
/'单引号
/"双引号
/&和号
//反斜杠
/n换行符
/r回车符
/t制表符
/b退格符
/f换页符


11）指导方针

JavaScript 对大小写敏感

名为 "myfunction" 的函数和名为 "myFunction" 的函数是两个不同的函数，同样，变量 "myVar" 和变量 "myvar" 也是不同的。

JavaScript 对大小写敏感 - 所以当您创建或使用变量、对象及函数时，请注意字符的大小写。

空格

JavaScript 会忽略多余的空格。所以您可以在代码中添加适当的空格，使得代码的可读性更强。下面的两行是等效的：

name="Hege"
name = "Hege"

换行

您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的：

document.write("Hello /
World!")

但是不能像这样折行：

document.write /
("Hello World!")

 

疯语者1028
关注
javascript学习笔记--数字格式类型
10-25
在学习JavaScript时，数字格式类型是一个重要的基础知识。首先，JavaScript中的数字主要分为整数和浮点数，整数可以是正整数、负整数或零。浮点数则包含小数点或使用科学记数法表示的数字。 在JavaScript中，十进制...
JavaScript学习笔记--常用的互动方法
10-20
在JavaScript的学习过程中，了解和掌握如何与网页内容进行互动是一个重要环节。本文将详细介绍JavaScript中常用的几种互动方法，并提供实例分析。 首先，我们来了解输出内容的方法。在JavaScript中，document.write...
小白JavaScript学习笔记----JavaScript基础
weixin_51877011的博客
04-06 1507
小白JavaScript学习笔记1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)node.js运行表3. JavaScript的组成（有什么？规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等。
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 1896
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript学习笔记 18-显示年龄案例
m0_74282485的博客
12-22 621
【代码】JavaScript学习笔记 18-显示年龄案例
JavaScript学习笔记--基础篇--变量的魅力
qq_51766427的博客
03-17 1928
JavaScript学习笔记--基础篇--变量的魅力 内容如下: 什么是直接量？JS数据类型有哪些？怎么声明变量？
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1116
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
JavaScript随手笔记---对比数组差异
JMFive的博客
02-20 9934
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【JavaScript随手笔记】专栏的第4篇文章;今天的需求中要到两个数组的比较，不相同则进行覆盖，相同则不操作，所以只要对比多两个数组之间的差异即可；【JavaScript随手笔记】， 此专栏是我是夜阑的狗对JS数据处理的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！
JavaScript学习笔记21-do-while循环
Anthony_tester的博客
04-28 1052
前面一篇介绍了while循环，本文介绍do-while循环，还是以求1到100相加的问题举例。 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> var sum = 0; var i =
JavaScript随手笔记---保留小数位
JMFive的博客
09-14 7860
在JS中保留小数的方法有很多，可以Math函数或者以字符串形式来进行处理，但在有的时候需要四舍五入，有时候不需要，这里围着这两点展开；【JavaScript随手笔记】， 此专栏是我是夜阑的狗对JS保留小数的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。以上就是今天要讲的内容，本文仅仅简单介绍了JS保留小数位的方法，分别从四舍五入和是否自动补0这两个方面进行入手。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！
JavaScript学习笔记---面向对象编程-JS高级部分（pink老师）
wykkk1的博客
02-06 4114
一、面向对象编程介绍 1.1 两大编程思想 1.面向过程编程POP（Process-Oriented Programming） 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一 步实现 ,使用的时候再一个一 个的依次调用就可以了。 举个栗子:将大象装进冰箱,面向过程做法。 面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。 2.面向对象编程OOP（Object Oriented Programming） 面向对象是把事务分解成为一个个对象,然后由对象之间分工与合.
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 1403
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
npm 和 npx 的区别和使用场景
Dou_Hua6的博客
10-09 558
自动下载和缓存：如果本地未安装所需包，npx会自动下载并执行，执行完毕后可以选择保留或删除。脚本运行：通过package.json中的scripts字段定义和运行自定义脚本。依赖管理：管理项目的dependencies和devDependencies。简化命令行工具的使用：临时执行命令，避免全局安装带来的版本冲突或污染。npm 全称：Node Package Manager。发布包：将自己的包发布到npm注册表供他人使用。：无需全局安装即可运行npm包中的可执行文件。
javascript中==和===有什么不同
qq_48763502的博客
10-09 428
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
最新发布
m0_66584716的博客
10-11 1088
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值