什么是 JavaScript

Javascript 的主要目的是使网页更具交互性和信息量。目前，Javascript 不仅用于客户端，而且javascript 还用于服务器、桌面应用程序、移动设备、物联网。

我们可以使用 Javascript 做很多事情，例如与 HTML 元素交互、在使用 Web 元素进行活动时做出响应、创建游戏、创建 2D 和 3D 动画、与数据库交互等等。

JavaScript于 1996 年正式被称为ECMAScript，其中 ECMAScript 2 于 1998 年推出，ECMAScript 3 于 1999 年推出。 ECMAScript 最终发展成为 JavaScript。不仅跨浏览器，而且 JavaScript 可以在各种设备上使用，如移动设备和计算机。

JavaScript 的优势

  • 不需要编译器，因为 Web 浏览器会自动用 HTML 解释它。
  • 简单易学。
  • JS 可以在许多浏览器和平台中使用。
  • 使网页信息更丰富。
  • 易于查找插件或附加组件以加快应用程序开发。
  • 很多教程已经免费分享

如何检测 Javascript 编程中的错误。

如果您仅使用文本编辑器开发 javascript 应用程序，您如何检查 Javascript 错误消息？

每个浏览器都有一个控制台，旨在检查网页上发生的错误。例如，Chrome 通过按F12 键或右键单击浏览器并选择 Inspect Element 菜单显示控制台窗口。

 

创建一个helloword

到这一步，至少你已经掌握了Javascript配套工具，下一步我们用Javascript做第一个程序。

打开你最喜欢的文本编辑器（这里使用sublime并扩展JsFormat，Emmet），复制以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log("hello world");
    </script>
</body>
</html>

使用名称index1.html保存上面的代码并在您喜欢的浏览器上运行它。不要忘记按 F12 看到控制台窗口，在控制台窗口中显示“ Hello World ”一词。

要在网页上显示，我们可以在console.log()下添加以下代码。

document.write("hello world web page");

 

如何用 HTML 编写 Javascript 代码

在上面的例子中，我们用 HTML 编写了 javascript 代码。

还有一些方法我们需要知道：

  • 嵌入（直接粘贴在 HTML 上的 Javascript 代码）

这样，我们就使用标签将 Javascript 代码粘贴到 HTML 中。我们在上面显示“ hello world ”的时候就做了这个方法

 

 

  • 内联（用 HTML 属性编写的 Javascript 代码）

这样，我们就在 HTML 属性中编写了 javascript 代码。此方法通常用于为特定事件调用函数。

例如：点击事件。简要说明：

在onClick属性中，我们在那里编写 Javascript 函数。

onClick 属性是一个 HTML 属性，用于声明将在元素单击时执行的函数。

<a href="#" onclick='alert("hello world")'>click</a>

在上面的例子中，我们运行了alert()函数。Alert()是一个显示对话框的函数。

因为我们要在那里调用javascript代码，那么我们把链接地址改成javascript:然后是要调用的函数。

  • 外部（Javascript 代码与 HTML 文件分开编写）

这样，我们将javascript代码与HTML文件分开编写。

我们创建两个文件，分别是：HTML 和 Javascript 文件。通过下面语句在HTML 引用该文件。

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

 

Javascript 中的变量和数据类型

变量和数据类型说明

什么是变量？

在计算机编程中，变量是存储值或信息的容器。变量是用于保存一个或多个值的标识。该值可以在整个程序代码中更改。

从技术上讲，变量是指计算机内存中的地址。每个变量都有一个唯一的名称作为标识

什么是数据类型？

数据类型是一种可以被计算机处理以满足编程需要的数据类型。

在声明变量或常量时，您必须能够确定适合该变量的数据类型。无论使用何种编程语言，变量和数据类型始终存在。

 

Javascript 编程中的变量

在这种情况下，我们学习 Javascript变量和数据类型。一般来说，如何声明一个变量是从var关键字开始的，但是从 ES6 开始，Javascript 有了两个新的关键字，let和const来处理变量问题。

保留 Var 关键字以保持与以前版本的兼容性。那有什么区别呢？什么时候使用 let 和 const？我们将在本文末尾讨论这个问题。

如何在 Javascript 中创建变量

通常如何使用 var 关键字创建 Javascript 变量，然后是变量的名称及其值。

例子：

var sitename = "Hgirl"

简要说明：

在上面的示例中，我们使用小写字母和大写字母表示由两个或多个音节组成的变量名称。

为什么？在Javascript中，推荐使用camelCase命名变量。您可以使用下划线替换它，例如将 var siteName写入var site_name。那不会有问题。

然而，大多数 Javascript 程序员使用驼峰式命名法。

变量可以无值声明。如果空白变量价值为“未定义”。

例子：

var sitename;

如何打印 Javascript 变量的内容

要显示变量的内容，我们可以使用几个函数来显示输出，例如：

  • console.log() ：显示输出到 javascript 控制台。
  • document.write() ：将输出显示为 HTML 文档。
  • alert() ：将输出显示到对话窗口。

更改/编辑变量中的值

变量是可变的，这意味着存储的值可以更改。

更改变量中的数据时，无需添加 var 关键字，因为 需要使用var 关键字来声明新变量。所以我们输入变量名并更改值。如果添加 var 关键字，Javascript 将创建一个新变量.

Javascript 数据类型

数据类型是可以存储在变量中的数据类型。Javascript 编程中有几种数据类型：

  • 字符
  • 整数
  • 浮点
  • 布尔
  • Object

数组数据类型呢？在javascript中，数组与数据对象类型相同。

Javascript 是一种动态类型的编程语言，因此我们在创建变量时不必编写数据类型。

例子：

var siteName = "Hgirl"
var siteAge =61
var isActive = true

Javascript 会自动识别我们在变量中提供的数据类型。

 

在上面的例子中：

  • siteName是字符串类型
  • siteAge是一个整数类型
  • isActive与布尔类型。

要检查使用的数据类型，您可以使用typeof关键字。

let 的工作方式和 var 几乎一样，区别在于作用域。var 是函数作用域，而 let 是块作用域。

Let 被用来纠正一些 var 缺陷。

常量

Const 或 Constants 是固定变量，因此变量的名称和内容不能更改。

  • 变量和数据类型是任何编程语言都必须学习的两项基本知识。
  • 在 Javascript 中，我们在创建变量时不必编写数据类型，因为 Javascript 是动态类型。在声明变量时，您应该：
  • 最好使用 let，将 var 用于特定的事情，因为 var 是全局的
  • 对值固定的变量使用 const

 

Javascript 中的算术运算符

算术运算符是进行加、减、除、乘等算术运算的运算符。

 

算术运算符包括：

加

+

减

——

乘

*

指数

**

除

/

除余数

%

自加

++

自减

—

Javascript 比较运算符

比较运算符是用于比较两个值的运算符。比较运算符产生真和假布尔值。

比...大

>

少于

<

等于/相等值和相等类型

== 或 ===

不等/不等值或不等类型

!= 或 !==

大于或等于

>=

小于或等于

<=

 

Javascript 中的逻辑运算符

用于对两个布尔值进行运算的逻辑运算符。

逻辑与

＆&

逻辑或

||

逻辑非

！

 

 

IF / ELSE 语句

if / else 语句是具有两个选择块的语句。正确条件的第一选择，else 条件的第二选择。

if( score > 90)
{
console.log('You are great');
}

Javascript 循环

循环用于多次运行一个或多个语句。换句话说，循环允许您通过只编写一次语句来运行多个语句。

通常，循环分为两种类型，即  计数循环和未计数循环。

  • Counted Loop 是一个确定的循环并且已经确定了长度。
  • Uncounted Loop 是一个循环，它不清楚必须重复多少次才能找到目标。

Counted Loop:

  • For
  • Foreach
  • Repeat

Uncounted Loop :

  • While
  • Do/While

For 是一个计数循环，因为很清楚你必须重复多少次。

for (i=1; i<=10; i++) {
console.log(i);
}

解释 ：

  • 计数将从 1 (i = 1) 开始
  • 计数到 i <= 10
  • 然后在每次迭代中 i 将增加 +1 (i ++)

Foreach

的foreach循环通常用于以数组来执行项目的集合。这个循环包含在计数循环中，因为数组的长度将决定重复的次数。

在 Javascript 中有两种使用 foreach 循环的方法：

– for/in

– forEach()

for/in

var lang = ["JS", "Angular", "React", "Node"]
for(i in lang){
console.log(lang[i])
}

Foreach()

var months = ["January", "February", "March", "April", "May", "June", "July","August", "September", "October", "November", "December"];
months.forEach(function(month){
console.log(month);
});

什么是 JavaScript 对话窗口？

对话框是一种要求用户做出决定或获取信息的弹出窗口。对话窗口的主要目的是用于与用户交互。

Javascript 中的对话框窗口分为三种：

  • 对话框警报
  • 对话框确认
  • 对话框输入提示
alert("Hello world"); // or
window.alert("Hello world");

alert() 函数在执行时不会返回任何值。

 

当我们删除/更改数据时，我们建议您显示确认框对话框进行确认。

使用confirm() 函数创建的 Javascript 确认框。

例子：

var result = confirm("Delete user sigit ?");
if(result)
{
alert("Successfull delete user");
}
else{
alert("thanks not to delete that user");
}

提示对话框窗口()

窗口 prompt() 用于检索用户的输入。对话框窗口 prompt() 返回用户输入的字符串值。

Javascript 提示对话框是一种 Javascript 输入，其外观类似于警报，但具有用于输入文本或用户书写的输入。提示对话框用代码编写如下：

var number = prompt("Your phone number ?");
alert(number);

理解 JavaScript 中的数组

数组是一种数据类型，它包含一组值或其他数据类型。

数组中的索引编号从编号 0 开始，因此第一个元素在索引 0 处；第二个元素在索引 1 处，依此类推。JavaScript 中数组可容纳的最大索引为 4,294,967,294 (2 ^ 23 – 2)，最大元素数为 4,294,967,295。

Javascript Array 是一个无类型数组。数组的元素可以是同一个数组中的字符串、数字和布尔类型，甚至数组的元素也可以是对象或其他数组。

 

JavaScript 中的数组是动态的，我们在创建变量时不需要定义数组的大小。可以随时添加和减少元素的数量。

关于如何创建数组的 Javascript 教程

在 Javascript 中有两种声明数组的方法，用括号表示法 [ ]和/或new Array() [数组是对象]。要了解如何声明变量，您可以阅读此处

使用括号表示法 [ ]是声明 Javascript 数组的最快和最新的方法

例子：

var array = []
var array = ["one",1,true,false,"hello world"]
var array = new Array()
var array = new Array("one",1,true,false,"hello world")

 

Javascript 数组 foreach

要在 Javascript 数组上进行循环，可以使用for或foreach 方法

For 和 Foreach 循环

示例 1：

var array= ["mango","orange","banana","watermelon","melon"]
 for (let i = 0; i < array.length; i++) 
        { 
            console.log("array no : "+i+" -< "+array[i]);
 }
var array= ["mango","orange","banana","watermelon","melon"]
array.forEach((data) => {
            console.log(data);
        });
  • 示例 1 使用“ for ”循环。For 循环使用 length 属性来获取数组的长度。用于限制 for 循环次数的 length 属性。
  • 示例 2 使用了“ foreach ”循环。Foreach javascript 根据索引数组顺序显示数据。

数组方法 Javascript

数组也有几种有益的方法。数组方法用于处理数据，例如添加数组元素、删除数组元素、过滤数组、组合数组等等。

要学习javascript，你必须了解几种经常使用的数组方法。

 

Push() 方法

push 方法用于向数组添加新元素。push() 方法从后面添加数据。

var fruits = ["mango","orange","banana","watermelon","melon"]
fruits.push("apple")
console.log(fruits)

Unshift() 方法

unshift() 方法在数组的开头添加一个新元素并移动整个索引。

Delete() 方法

delete 方法用于根据特定索引删除数组元素数据

Pop() 方法

pop 方法与 delete 方法相同。Pop() 删除最后一项。

Shift() 方法

shift 方法与 pop 具有相同的功能。不同之处在于 shift 删除了第一个数组元素。

 

Slice() 方法

Javascript 数组切片是一种检索数组项的几个部分并生成新数组的方法

Slice() 数组语法：

array.slice((start_from)  , (end_slice) );

Splice() 方法

splice() 方法用于从特定索引中删除数据。

Javascript splice 方法的语法：

array.splice((index),(count) )

Concat() 方法

concat 方法用于组合两个或多个数组。

Join() 方法

加入数组方法将 数组中的元素组合在一起Javascript使用特定的分隔符并将其转换为字符串