JavaScript基础入门

最新推荐文章于 2023-03-20 10:53:47 发布

渐渐的不归路

最新推荐文章于 2023-03-20 10:53:47 发布

阅读量6.2k

点赞数 6

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/x348722662/article/details/50956760

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在工作中，时不时的要设计去与web端的网页去进行一些交互，要想软件的功能更加强大，包括QT,Android,IOS的开发，无一列外的都会涉及到与JS的交互，所以想着手学习JavaScript，以后遇到问题，会多一些解决的思路，虽然之前在QT已经用过JS的交互，但具体的基础还是有些模糊。

JavaScript

JavaScript

JavaScript 是属于网络的脚本语言！
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

JavaScript 使用

JavaScript在网页中为位置一般分为俩种：
第一种：HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
第二种：外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
<script src="myTest.js"></script>
</body>
</html>

提示：外部脚本不能包含 <script> 标签。

JavaScript 语句、输出、注释

JavaScript 语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
提示：您也可能看到不带有分号的案例。
在 JavaScript 中，用分号来结束语句是可选的。

JavaScript 代码块
JavaScript 语句通过代码块的形式进行组合。
块由左花括号开始，由右花括号结束。
块的作用是使语句序列一起执行。
JavaScript 函数是将语句组合在块中的典型例子。

JavaScript 代码
JavaScript 代码（或者只有 JavaScript）是 JavaScript 语句的序列。
浏览器会按照编写顺序来执行每条语句。

JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。

空格
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性

对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。

1.操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素：

<!DOCTYPE html>
<html>
<body>
<p id="test">this is my demo</p>
<script>
document.getElementById("test").innerHTML="My First JavaScript";
</script>
</body>
</html>

2.写到文档输出
下面的例子直接把

元素写到 HTML 文档输出中：

<!DOCTYPE html>
<html>
<body>
<h1>this is my demo</h1>
<script>
document.write("<p>My First JavaScript</p>");
</script>
</body>
</html>

警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

JavaScript 注释
JavaScript 不会执行注释。
我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
单行注释以 // 开头，多行注释以 /* 开始，以 */ 结尾。

JavaScript 变量、数据类型、对象、函数、运算符

变量：

1.变量是存储信息的容器。
语法如下：

var num=1314;
var name="Little Zhang";
var answer='Yes';

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

3.声明（创建） JavaScript 变量
在 JavaScript 中创建变量通常称为“声明”变量。
我们使用 var 关键词来声明变量：
var name;
变量声明之后，该变量是空的（它没有值）。
如需向变量赋值，请使用等号：
name=”Little”;
不过，您也可以在声明变量时对其赋值：
var name=”Little”;
4.在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
如果重新声明 JavaScript 变量，该变量的值不会丢失：

数据类型

JavaScript里面包含的数据类型为：字符串、数字、布尔、数组、对象、Null、Undefined
1.JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
实例

var x                // x 为 undefined
var x = 1;           // x 为数字
var x = "Little";      // x 为字符串

2.JavaScript 字符串
字符串是存储字符（比如 “Little”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
实例

var name="Little";
var name='Little';

您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
实例

var answer="Hello!";
var answer="He is called 'Little'";
var answer='He is called "Little"';

3.JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
实例

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：
实例

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

4.JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。

var x=true
var y=false

5.JavaScript 数组
下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

或者 (condensed array):

var cars=new Array("Audi","BMW","Volvo");

或者 (literal array):
实例

var cars=["Audi","BMW","Volvo"];

6.JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

对象属性有两种寻址方式：
实例

name=person.lastname;
name=person["lastname"];

7.Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
实例

cars=null;
person=null;

8.声明变量类型
当您声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
9.局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
name=”Little”;
将声明一个全局变量 name，即使它在函数内执行。

JavaScript 函数

JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
这里是要执行的代码
}

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
提示：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
调用带参数的函数
在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)
当您声明函数时，请把参数作为变量来声明：
function myFunction(var1,var2)
{
这里是要执行的代码
}

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

带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
语法
function myFunction()
{
var x=5;
return x;
}
上面的函数会返回值 5。
注释：整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

JavaScript运算符

运算符 = 用于赋值。
运算符 + 用于加值。
运算符 = 用于给 JavaScript 变量赋值。

如果把数字与字符串相加，结果将成为字符串。
JS中特有的运算符：
x=1
=== 全等（值和类型） x===1 为 true；x===”1” 为 false

JavaScript 条件语句和循环语句

1.条件语句用于基于不同的条件来执行不同的动作。
条件语句
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if….else 语句 - 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

2.JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
需要特别说明下for/in语句

var person={fname:"Blue",lname:"Little",age:21};

for (x in person)
  {
  txt=txt + person[x];
  }

JavaScript Break 和 Continue 语句

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
Break 语句
我们已经在本教程稍早的章节中见到过 break 语句。它用于跳出 switch() 语句。
break 语句可用于跳出循环。
break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：
Continue 语句
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。
JavaScript 标签
正如您在 switch 语句那一章中看到的，可以对 JavaScript 语句进行标记。
如需标记 JavaScript 语句，请在语句之前加上冒号：
label:
语句
break 和 continue 语句仅仅是能够跳出代码块的语句。
语法
break labelname;
continue labelname;

continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
实例

cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}

JavaScript 错误 - Throw、Try 和 Catch

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。

1.JavaScript 测试和捕捉
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
语法
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
2.Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法
throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
实例
本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：

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

请注意，如果 getElementById 函数出错，上面的例子也会抛出一个错误。

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

下面是连同 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>