什么是JavaScript 您需要了解的关于JavaScript的所有知识【WEB前端大作战】

经过数十年的改进,JavaScript已成为有史以来最流行的编程语言之一。一切始于1995年,当时Brendan Eich用了10天的时间创建了JavaScript。从那时起,它已经看到了多个版本,更新,并发展到了新的水平。在这个关于JavaScript的博客中,我们将学习JavaScript的基本概念。

这是我将在此博客中介绍的主题列表:

  1.  What is JavaScript
  2.  What can JavaScript do?
  3.  JavaScript Frameworks
  4.  The Big Picture: HTML, CSS & JavaScript
  5.  Benefits of JavaScript
  6.  Fundamentals of JavaScript
    1. Variables
    2. Constants
    3. Data Types
    4. Objects
    5. Arrays
    6. Functions
    7. Conditional statements
    8. Loops
    9. Switch case

什么是JavaScript?

JavaScript是一种高级的,解释性的编程语言,用于使网页更具交互性。  

您是否曾经以为您的网站缺少某些内容? 也许它不够吸引人,或者没有您想像的那么有创造力。JavaScript是缺少的部分,可用于增强网页,应用程序等,以提供更加用户友好的体验。

什么是JavaScript?

什么是JavaScript?

JavaScript是网络的语言,通过向其添加动作来使网络看起来更生动。更准确地说,它是一种编程语言,可让您在网页上实现复杂而美观的事物/设计。当您发现某个网页不仅仅是坐在那里盯着您看时,您可以知道该网页正在使用JavaScript。 

JavaScript的功能

  • 脚本语言而不是Java: 实际上,JavaScript与Java无关。那为什么叫“ Java”脚本呢?JavaScript最初发布时称为Mocha,后来被重命名为LiveScript,然后在Netscape(创建JavaScript)和Sun达成许可协议时重命名为JavaScript。 
  • 基于对象的脚本语言,支持多态性,封装和某种程度上的继承。
  • 解释语言:不必像需要编译器的Java和C一样进行编译。
  • JavaScript在浏览器 中运行您可以在Google Chrome,Internet Explorer,Safari等上运行它。JavaScript不仅可以在浏览器中执行,而且可以在服务器和具有JavaScript引擎的任何设备上执行。

什么是JavaScript-Stackoverflow统计信息

什么是JavaScript – Stackoverflow统计信息

当前,我们有100多种编程语言,每天都在创建新的语言。在这些 语言中,很少有能在市场上带来巨大变化的强大语言,而JavaScript是其中之一。

JavaScript一直是流行编程语言的清单。 根据StackOverflow的数据,JavaScript连续第六年保持最受欢迎和最常用的编程语言。

JavaScript可以做什么?

  • JavaScript主要以创建精美的网页和应用程序而闻名。谷歌地图就是一个例子。如果要浏览特定的地图,只需要做的就是用鼠标单击并拖动。什么样的语言可以做到这一点?你猜对了!是JavaScript。
  • JavaScript也可以用于智能手表。例如,流行的智能手表制造商Pebble。Pebble创建了Pebble.js,这是一个小的JavaScript框架,允许开发人员使用JavaScript为Pebble系列手表创建应用程序。

什么是JavaScript-JavaScript的应用

什么是JavaScript – JavaScript的应用

  • 最流行的网站,例如Google,Facebook,Netflix,Amazon等,都利用
    JavaScript来建立他们的网站。
  • 在诸如移动应用程序,数字艺术,Web服务器和服务器应用程序之类的东西中,JavaScript也用于制作游戏。许多开发人员正在使用JavaScript构建小型游戏和应用程序。

JavaScript框架

JavaScript流行的一个主要原因是JavaScript框架。这是最流行的JavaScript框架的简要介绍:

1.   AngularJS是Google的网络开发框架,为快速的应用程序开发提供了一组现代开发和设计功能。 

2.   ReactJS是另一个主要由Facebook维护的顶级JavaScript框架,它落实于Facebook和Instagram的用户界面,展示了其在维护这种高流量应用程序方面的效率。

什么是JavaScript-JavaScript框架

什么是JavaScript – JavaScript框架

3.   MeteorJS主要用于提供后端开发。在后端使用JavaScript节省时间并积累专业知识是Meteor的主要思想之一。

4.   当您想扩展您的网站并使之更具交互性时,可以使用jQuery。像Google,WordPress和IBM这样的公司都依赖jQuery。

The Big Picture: HTML, CSS & JavaScript

任何熟悉JavaScript的人都知道,它与HTML和CSS有关。但是这三者之间是什么关系呢?让我用一个类比解释一下。

什么是JavaScript-HTML,CSS和JavaScript

什么是JavaScript – HTML,CSS和JavaScript

将HTML(超文本标记语言)视为网络的骨架。用于显示网络。

另一方面,CSS就像我们的衣服。我们穿上时髦的衣服,看起来更好。同样,网络也很时尚。它使用CSS表示级联样式表以进行样式设置。

然后是JavaScript,它将生命带入了网页。就像孩子们使用滑板四处走动一样,网络也在JavaScript的帮助下运动。

JavaScript的好处

有这么多开发人员喜欢使用JavaScript的原因,这是有原因的。嗯,使用JavaScript开发Web应用程序有很多好处,这里有一些好处:

它易于学习且易于实现。 它是一种弱类型编程语言,与Java和C ++等强类型编程语言不同,后者具有严格的编码规则。

在当今世界,这一切都与快速有关,并且因为JavaScript主要是一种客户端编程语言,所以它之所以非常快速,是因为任何代码都可以立即运行,而不必与服务器联系并等待答案。

诸如AngularJS,ReactJS之类的 丰富框架集可用于构建Web应用程序并执行不同的任务。

 

建立交互式网站: 我们都被设计精美的网站所吸引,而JavaScript是吸引如此诱人的网站和应用程序的原因。

 

 

JavaScript是一种解释型语言,由于Web可以解释JavaScript,因此不需要编译器。您只需要一个浏览器,例如Google Chrome或Internet Explorer,就可以在浏览器中进行各种操作。

 

JavaScript是独立于平台的, 并且所有主要浏览器(例如Internet Explorer,Google Chrome,Mozilla Firefox,Safari等)都支持JavaScript。 

JavaScript基础知识

在这个什么是JavaScript博客中,我们将介绍JavaScript的以下基本原理 

  1. Variables
  2. Constants
  3. Data Types
  4. Objects
  5. Arrays
  6. Functions
  7. Conditional statements
  8. Loops
  9. Switch case

变量  

变量是赋予存储位置的名称,该存储位置用作临时存储数据的容器。它们不过是保留存储值的存储位置而已。

什么是JavaScript-变量

什么是JavaScript –变量

要在JavaScript中声明变量,请使用'let'关键字。例如:

let age;
age=22;

在上面的示例中,我通过使用'let'关键字声明了一个变量'age',然后在其中存储了一个值(22)。因此,此处将一个存储位置分配给了“年龄”变量,并且该变量包含一个值,即“ 22”。

常量

常量是固定值,在执行期间不会更改。

要在JavaScript中声明常量,请使用'const'关键字。例如:

const mybirthday; 
mybirthday='3rd August'; 

数据类型

您可以将不同类型的值分配给变量,例如数字或字符串。在JavaScript中, 有两类数据类型:

什么是JavaScript-数据类型

什么是JavaScript –数据类型

对象

对象是具有属性和类型的独立实体,非常类似于现实生活中的对象。例如,假设一个女孩的名字叫Emily,年龄是22岁,眼睛颜色是棕色。在此示例中,对象是女孩,她的名字,年龄和眼睛颜色是她的属性。

什么是JavaScript-对象示例

什么是JavaScript –对象示例

对象也是变量,但是它们包含许多值,因此可以声明一个存储所有这些属性的对象,而不是为每个属性声明不同的变量。

要在JavaScript中声明一个对象,请使用'let'关键字,并确保 使用大括号以使所有属性值对都在大括号。 例如:

let girl= {
name: 'Emily',
age: 22,
eyeColour: 'Brown'
};

在上面的示例中,我声明了一个名为“ girl”的对象,它具有3个具有值(Emily,22,Brown)的属性(名称,年龄,眼睛的颜色)。

数组

数组是一种数据结构,其中包含一系列元素,这些元素在单个变量中存储多个值。

例如,让我们考虑一下您去购物以购买艺术品的情况。您购买的物品清单可以放入一个数组中。

什么是JavaScript-数组示例

什么是JavaScript –数组示例

要在JavaScript中声明数组,请在方括号中使用'let'关键字,并且所有数组元素都必须括在其中。例如:

let shopping=[];
shopping=['paintBrush','sprayPaint','waterColours','canvas'];

在上面的示例中,我声明了一个名为“购物”的数组,并在其中添加了四个元素。  

同样,数组元素从零开始编号。例如,这是您访问第一个数组元素的方式:

shopping[0];

方法

函数是一组有组织的可重用代码,用于执行单个相关操作。

让我们创建一个函数来计算两个数字的乘积。

要在JavaScript中声明函数,请使用'function'关键字。例如:

function product(a, b) {
        return a*b;
}

在上面的示例中,我声明了一个名为“ product”的函数,并向该函数传递了两个参数“ a”和“ b”,这两个变量是其乘积由该函数返回的变量。 现在,为了调用函数并将值传递给这些参数,您必须遵循以下语法:

product(8,2);

在上面的代码片段中,我使用一组值(8和2)调用product函数。这些是变量“ a”和“ b”的值,它们被称为函数的参数。

条件语句–if

条件语句是在满足特定条件时执行的一组规则。仅当指定的条件成立时,“ if”语句才用于执行代码块。

什么是JavaScript-如果流程图

什么是JavaScript –if流程图

要在JavaScript中声明if语句,请使用'if'关键字。语法为:

if(condition) {
        statement;
}

现在让我们看一个例子:

let numbers=[1,2,1,2,3,2,3,1];
if(numbers[0]==numbers[2]) {
        console.log('Correct!');
}

在上面的示例中,我定义了一个数字数组,然后定义了一个if块。在此块中有一个条件和一个语句。条件为'(numbers [0] == numbers [2])',语句为'console.log('Correct!')'。如果满足条件,则仅将执行该语句。

条件语句-else

如果相同条件为false,则使用Else语句执行代码块。

什么是JavaScript-否则流程图

什么是JavaScript –else则流程图

语法为:

if(condition) {
        statement a;
}
else (condition) {
        statement b;
}

现在让我们来看 举个例子:

let numbers=[1,2,1,2,3,2,3,1];
if(numbers[0]==numbers[4] {
        console.log("Correct!");
}
else {
        console.log("Wrong, please try again");
}

在上面的示例中,我定义了一个if块以及一个else块。因此,如果if块中的条件为false,则执行else块。自己尝试一下,看看会得到什么!

循环 

循环用于重复特定的块,直到满足某些结束条件为止。JavaScript中有三类循环:

  1. while循环
  2. do while循环
  3. for循环

While循环

条件为true时,将执行循环内的代码。 

什么是JavaScript-While循环流程图

什么是JavaScript – while循环流程图

语法为:

while(condition) {
        loop code;
}

现在让我们看一个例子:

let i=0;
while(i < 5) {
        console.log("The number is " +i);
        i++;
}

do while循环

此循环将首先执行代码,然后检查条件,并在条件成立时重复执行。

什么是JavaScript-执行while循环流程图

什么是JavaScript –do while循环流程图

请参考语法以更好地理解它:

do {
        loop code;
} while(condition);

该循环在检查条件是否为真之前执行一次代码块,然后只要条件为真,就会重复执行该循环。

现在让我们看一个例子:

do {
        console.log("The number is " +i);
        i++;
}
while(i > 5);

上面的代码与while循环代码相似,不同的是,首先执行do循环中的代码块,然后才检查while循环中的条件。如果条件成立,则再次执行do循环。

for循环

当给定条件为TRUE时,for循环重复执行循环代码。它在执行循环体之前测试条件。

什么是JavaScript-for循环流程图

什么是JavaScript – for循环流程图

语法为:

for(begin; condition; step) {
        loop code;
}

在以上语法中:

  • begin语句在循环代码执行之前执行一次
  • 条件定义执行循环代码的条件
  • 每次执行代码块后,都会执行step语句 

例如:

for (i=0;i<5;i++) {
        console.log("The number is " +i);
}

在上面的示例中,我定义了一个for循环,在其中定义了begin,condition和step语句。begin语句是“ i = 0”。执行begin语句后,for循环中的代码将执行一次。接下来,检查条件,如果“ i <5”,则执行循环内的代码。此后,将执行最后一步语句(i ++)。试试这个,看看会得到什么!

switch

switch语句用于根据不同的条件执行不同的操作。

什么是JavaScript-切换案例流程图

什么是JavaScript –switch案例流程图

让我们看一下切换大小写的语法:

switch(expression) {
        case 1:
                code block 1
                break;
        case 2:
                code block 2
                break;
        default:
                code block 3
                break;
}

它是如何工作的?

  • switch表达式被求值一次
  • 将表达式的值与每种情况的值进行比较
  • 如果匹配,则执行相关的代码块

让我们用一个例子来尝试一下:

let games='football';
switch(games) {
        case "throwball":
                console.log("I dislike throwball!");
                break;
        case "football":
                console.log("I love football!");
                break;
        case "cricket":
                console.log("I'm a huge cricket fan!");
                break;
        default:
                console.log("I like other games");
                break;
}

在上面的示例中,switch表达式为“ games”,游戏的值为“ football”。将“游戏”的价值与每种情况的价值进行比较。在此示例中,将其与“ throwball”,“板球”和“ football”进行比较。“ games”的值与大小写“ football”相匹配,因此将执行“ football”大小写内的代码。自己尝试一下,看看会得到什么!

至此,我们结束了本博客的结尾。我希望您发现此博客内容丰富,也希望您对JavaScript有基本的了解。在我的下一个关于JavaScript的博客中,我将介绍深入的概念,请继续关注。

(完)