javascript笔记

Posted cxchanpin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript笔记相关的知识,希望对你有一定的参考价值。

警告

请使用 document.write() 只向文档输出写内容。

假设在文档已完毕载入后运行 document.write,整个 html 页面将被覆盖:

实例

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕!文档消失了。");
}
</script>

</body>
</html>

亲自试一试

#当你须要在某个页面同一时候运行两个变化处时使用{}

javascript 代码块

JavaScript 语句通过代码块的形式进行组合。

块由左花括号開始。由右花括号结束。

块的作用是使语句序列一起运行。

JavaScript 函数是将语句组合在块中的典型样例。

以下的样例将执行可操作两个 HTML 元素的函数:

实例

function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
}

亲自试一试


JavaScript 对大写和小写敏感。

JavaScript 对大写和小写是敏感的。

当编写 JavaScript 语句时,请留意是否关闭大写和小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

相同。变量 myVariable 与 MyVariable 也是不同的。

空格

JavaScript 会忽略多余的空格。您能够向脚本加入空格。来提高其可读性。

以下的两行代码是等效的:

var name="Hello";
var name = "Hello";
提示JavaScript 是脚本语言。浏览器会在读代替码时,逐行地运行脚本代码。而对于传统编程来说,会在运行前对全部代码进行编译。

JavaScript 变量

与代数一样,JavaScript 变量可用于存放值(比方 x=2)和表达式(比方 z=x+y)。

变量能够使用短名称(比方 x 和 y),也能够使用描写叙述性更好的名称(比方 age, sum, totalvolume)。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(只是我们不推荐这么做)
  • 变量名称对大写和小写敏感(y 和 Y 是不同的变量)

提示:JavaScript 语句和 JavaScript 变量都对大写和小写敏感。


JavaScript 数据类型

JavaScript 变量还能保存其它数据类型,比方文本值 (name="Bill Gates")。

在 JavaScript 中,类似 "Bill Gates" 这样一条文本被称为字符串。

JavaScript 变量有非常多种类型,可是如今。我们仅仅关注数字和字符串。

当您向变量分配文本值时,应该用双引號或单引號包围这个值。

当您向变量赋的值是数值时,不要使用引號。

假设您用引號包围数值,该值会被作为文本来处理。


我们使用 var 关键词来声明变量:

var carname;
提示一个好的编程习惯是,在代码開始处,统一对须要的变量进行声明。

JavaScript 函数和事件

上面样例中的 JavaScript 语句,会在页面载入时运行。

通常,我们须要在某个事件发生时运行代码,比方当用户点击button时。

假设我们把 JavaScript 代码放入函数中,就能够在事件发生时调用该函数。

您将在稍后的章节学到很多其它有关 JavaScript 函数和事件的知识。

通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就能够把它们安置到同一处位置。不会干扰页面的内容。

提示在面向对象的语言中,属性和方法常被称为对象的成员。

提示在面向对象的语言中,使用 camel-case 标记法的函数是非经常见的。您会经常看到 someMethod() 这种函数名。而不是 some_method()。

函数是由事件驱动的或者当它被调用时运行的可反复使用的代码块。

调用带參数的函数

在调用函数时。您能够向其传递值。这些值被称为參数。

这些參数能够在函数中使用。

您能够发送随意多的參数,由逗号 (,) 分隔:

myFunction(argument1,argument2)

当您声明函数时。请把參数作为变量来声明:

function myFunction(var1,var2)
{
这里是要运行的代码
}

变量和參数必须以一致的顺序出现。第一个变量就是第一个被传递的參数的给定的值,以此类推。

实例

<button onclick="myFunction(‘Bill Gates‘,‘CEO‘)">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

亲自试一试

上面的函数会当button被点击时提示 "Welcome Bill Gates, the CEO"。

函数非常灵活,您能够使用不同的參数来调用该函数,这样就会给出不同的消息:

实例

<button onclick="myFunction(‘Harry Potter‘,‘Wizard‘)">点击这里</button>
<button onclick="myFunction(‘Bob‘,‘Builder‘)">点击这里</button>

亲自试一试

?

???

?依据您点击的不同的button,上面的样例会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。

在您只希望退出函数时 ,也可使用 return 语句。返回值是可选的:

function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

假设 a 大于 b。则上面的代码将退出函数,并不会计算 a 和 b 的总和。

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以仅仅能在函数内部訪问它。(该变量的作用域是局部的)。

您能够在不同的函数中使用名称同样的局部变量,由于仅仅有声明过该变量的函数才干识别出该变量。

仅仅要函数执行完成,本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的全部脚本和函数都能訪问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间開始。

局部变量会在函数执行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量来分配值

假设您把值赋给尚未声明的变量,该变量将被自己主动作为全局变量声明。

这条语句:

carname="Volvo";

将声明一个全局变量 carname,即使它在函数内运行。

JavaScript 运算符

条件运算符

JavaScript 还包括了基于某些条件对变量进行赋值的条件运算符。

语法

variablename=(condition)?value1:value2 

样例

greeting=(visitor=="PRES")?

"Dear President ":"Dear ";

假设变量 visitor 中的值是 "PRES"。则向变量 greeting 赋值 "Dear President ",否则赋值 "Dear"。

条件语句用于基于不同的条件来运行不同的动作。

条件语句

通常在写代码时,您总是须要为不同的决定来运行不同的动作。您能够在代码中使用条件语句来完毕该任务。

在 JavaScript 中。我们可使用下面条件语句:

  • if 语句 - 仅仅有当指定条件为 true 时,使用该语句来运行代码
  • if...else 语句 - 当条件为 true 时运行代码,当条件为 false 时运行其它代码
  • if...else if....else 语句 - 使用该语句来选择多个代码块之中的一个来运行
  • switch 语句 - 使用该语句来选择多个代码块之中的一个来运行

switch 语句用于基于不同的条件来运行不同的动作。

JavaScript Switch 语句

请使用 switch 语句来选择要运行的多个代码块之中的一个。

语法

switch(n)
{
case 1:
  运行代码块 1
  break;
case 2:
  运行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同一时候运行的代码
}

工作原理:首先设置表达式 n(一般是一个变量)。随后表达式的值会与结构中的每一个 case 的值做比較。假设存在匹配,则与该 case 关联的代码块会被运行。

请使用 break 来阻止代码自己主动地向下一个 case 执行。

<html>
<head>
</head>
<body>
<button type="button" onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var day=new Date().getDay();
switch (day)
{
  case 0:
  x= "Today it's Sunday";
  break;
  case 1:
  x="Today it's Monday";
  break;
  case 2:
  x="Today it's Tuesday";
  break;
  case 3:
  x="Today it's Wednesday";
  break;
  case 4:
  x="Today it's Thursday";
  break;
  case 5:
  x="Today it's Friday";
  break;
  case 6:
  x="Today it's Saturday";
  break;
}

document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>

JavaScript For 循环

循环能够将代码块运行指定的次数。

JavaScript 循环

假设您希望一遍又一遍地执行同样的代码,而且每次的值都不同,那么使用循环是非常方便的。

我们能够这样输出数组的值:

document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");

只是通常我们这样写:

for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}

亲自试一试

不同类型的循环

JavaScript 支持不同类型的循环:

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 相同当指定的条件为 true 时循环指定的代码块

JavaScript 错误 - Throw、Try 和 Catch

try 语句測试代码块的错误。

catch 语句处理错误。

throw 语句创建自己定义错误。

JavaScript 測试和捕捉

try 语句同意我们定义在运行时进行错误測试的代码块。

catch 语句同意我们定义当 try 代码块错误发生时,所运行的代码块。

JavaScript 语句 trycatch 是成对出现的。

语法

try
  {
  //在这里执行代码
  }
catch(err)
  {
  //在这里处理错误
  }

实例

在以下的样例中,我们有益在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误,并运行代码来处理它。

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>

</html>

Throw 语句

throw 语句同意我们创建自己定义错误。

正确的技术术语是:创建或抛出异常(exception)。

假设把 throw 与 try 和 catch 一起使用,那么您可以控制程序流。并生成自己定义的错误消息。

语法

throw exception

异常能够是 JavaScript 字符串、数字、逻辑值或对象。

实例

本例检測输入变量的值。

假设值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自己定义的错误消息:

<html>
<head>
</head>
<body>
<script>
function myFunction()
{
try
  {
   var x=document.getElementById("demo").value;
   if(x=="") throw "empty";
   if(isNaN(x)) throw "not a number";
   if(x>10)    throw "too high";
   if(x<5)     throw "too low";
   }
catch(err)
   {
    var y=document.getElementById("mess");
    y.innerHTML="Error: " + err + "." ;
   }
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
</body>
</html>
JavaScript 可用来在数据被送往server前对 HTML 表单中的这些输入数据进行验证。

必填(或必选)项目

以下的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,而且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

以下是连同 HTML 表单的代码:

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

E-mail 验证

以下的函数检查输入的数据是否符合电子邮件地址的基本的语法。

意思就是说,输入的数据必须包括 @ 符号和点号(.)。同一时候,@ 不能够是邮件地址的首字符,而且 @ 之后需有至少一个点号:

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

以下是连同 HTML 表单的完整代码:

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>












以上是关于javascript笔记的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

30秒就能看懂的JavaScript 代码片段

学习笔记:python3,代码片段(2017)

36个工作中常用的JavaScript函数片段

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段(上)