对于网站开发人员来说,HTML和CSS是用来在网站上显示内容并使其看起来美观的。但是,它们无法处理网页的互动性。为此,需要另一种语言,专门处理你的网站的编程方面。这样,它就可以处理你的网站的动态和互动行为。
因此,JavaScript出现了。它是最流行的脚本语言之一,在客户端工作,处理你的网页的互动性。此外,它可以通过操纵从网络服务器接收的内容来增加网站的动态行为。有一大堆东西可以做,我们将在这篇文章中学习它,以及它是如何工作的和一些基本概念。
你可以用JavaScript做的各种功能。
- 通过添加和删除元素来修改网页内容。
- 监控各种鼠标点击、悬停事件并处理它们的动作。
- 控制各种动画和转场。
- 当用户输入一些信息时进行事件处理。
- 在提交给服务器之前验证用户提供的输入。
还有很多,你可以控制你的页面的行为方式。
为什么要学习JavaScript?
JavaScript曾被认为是一种只用于交互式网页的工具。但那些日子已经过去了,现在你可以使用JavaScript提供的各种框架建立完整的移动和网络应用,以及网络应用。
你还可以用JavaScript设计浏览器游戏。它的发展速度超过了其他语言,著名的公司都在围绕JavaScript构建他们的应用程序。现在,你知道了学习JavaScript的重要性,所以让我们看看它是如何工作的。
JavaScript代码编辑器
对于JavaScript代码,你可以使用浏览器的控制台,甚至是在线JS编辑器。但是,最好的办法是使用代码编辑器。现在有各种代码编辑器,如Visual Studio Code、Sublime Text、Atom等,你可以通过这篇文章查看各种可用的JavaScript编辑器。在这些编辑器中,我们强烈推荐Visual Studio Code,因为它是最常用的代码编辑器,其背后的原因是它对即将到来的技术的持续支持和易于使用的用户界面。
如何将JavaScript添加到你的文件中?
有两种方法可以将JavaScript添加到你的HTML文件中。
内部脚本 (使用标签在HTML文件中配置JavaScript)
外部脚本(为JS代码创建一个单独的文件并在标签中添加链接
consol.log, alerts, and document.write in JavaScript
调试和记录你的代码的一个有用的命令是console.log。它可以间接地在网络控制台中写入内容,很有用。
console.log("Hello World")。
警报用于向正在访问网页的终端用户提供警报。
alert("Hello World")。
Document.write通过向你的网页添加额外的内容来修改网页上的内容。
document.write("Welcome to the Web Page!" )。
在JavaScript中,控制台有一堆的方法。更详细的信息在这里。
如何在JavaScript中添加注释
在编程时,写注释是非常有用的。它可以帮助你记住你编码的内容,以及是否有任何额外的信息需要写给正在检查你代码的其他人。单行 和多行 的注释都可以写。要在代码(JavaScript)中使用单行注释,我们使用//。
// 这整个句子就是一个大的单行注释。
而在多行注释的情况下,在开始时使用/*,然后用*/结束它。
/* 这是一个多行评论。如果你想的话,你甚至可以在这里写你的博客。*/
JavaScript中的变量
就像其他编程语言一样,变量也被用于JavaScript中。变量的工作是在一个命名的引用中保存一个数据类型。在JavaScript中,我们可以用三种方式设置变量:var、let、const。
var 从JavaScript一开始就被使用,它是全局范围的,这意味着该页面或该程序中的所有函数都可以访问它。
varx= 15;
vary= 4;
console.log(x +y);
输出。
因为它是全局范围的,所以最好使用let 和const。原因是有时你想在if语句中声明一个变量,而在if语句之外你又想声明同名的变量。使用var会引起问题。要了解更多关于JavaScript中的全局变量,你可以查看这篇文章。
在JavaScript中,还有两种类型的变量是let 和const。使用let我们可以声明任何数据类型,而在const的情况下,只能声明常量值。
let msg="Hello World";
console.log(msg);
msg=10;
console.log(msg);
输出。
这里,我们使用let变量声明了一个字符串以及一个数字数据类型。现在,使用const,如果我们试图声明常数以外的任何值,它将给我们一个错误。
//
constpi= 3.142;
console.log(pi);
pi= 3.15;
console.log(pi).下面将导致一个错误。
JavaScript中的数据类型
JavaScript为我们提供了各种数据类型,比如数字、字符串、布尔运算、浮点运算、对象等等。如果你想阅读关于JavaScript中的数据类型,那么你可以前往官方的MDN文档。它告诉程序他们正在处理和操作的是什么类型的数据。
数字。表示正、负整数或浮点的数据类型是Number。
let num= 11;
console.log(num);
console.log(typeofnum);
num= -12;
console.log(num);
console.log(typeofnum)。
输出。
字符串。为了存储一个字符序列,使用了String数据类型。
let x= "Welcome"
console.log(x);
console.log(typeofx);
输出。
布尔型。一种数据类型,在程序中表示真和假的值。
let x= true
console.log(x);
console.log(typeofx);
输出。
对象。为了在一个变量中存储各种数据类型的集合,使用了Objects。
let movie= {
name: "Inception",
genre: "Thriller",
yearOfRelease: "2010",
numberOfCopies: 10
};
console.log(movie);
console.log(type of movie);
输出。
JavaScript中的数组
为了存储任何类型的数据的集合,我们可以使用数组。只需使用数组构造函数来初始化数组。
let months= new Array();
或者使用**[ ]**初始化。
let months=[];
或者简单地用明确的数据创建一个数组。
let months=["January", "February", "March", "April","May" ] 。
数组中的索引从零开始,要访问任何元素,你只需写下array[indexPosition]。
let months=["January", "February", "March","April","May" ];
console.log(months[3]);
输出。
为了更好地理解JavaScript中的数组概念,请查看这篇文章。
JavaScript中不同数据类型的方法
有各种方法来处理各种数据类型的值。
字符串方法。为了修改一个字符串的值,我们有许多不同的方法可用。这些方法可以用来检查字符串的长度,找到字符串中某个单词的位置,或者将其转换成不同的数据类型。
let x= "Hello, Welcome Home"
//检查字符串的长度
console.log(x.length);
//剪切字符串的特定部分
console.log(x.slice(3, 7));
//替换字符串中的一个特定单词
console.log(x.replace("Home","Here" ));
//将字符串转换为小写字母
console.log(x.toLowerCase() );
输出。
当然,还有其他一些方法,如果你想了解更多,也可以查看这篇文章。
数字方法。同样,对于操作Number数据类型的值,也有各种方法。下面是其中的一些方法。
let x= 4445.4
//将数字转换成字符串
console.log(x.toString);
//将数字转换成指数形式 console.log(x.toExponential());
//返回具有指定长度的数字
console.log(x.toPrecision(2))。
输出。
Javascript为我们提供了对象、布尔值、数组等的方法。
JavaScript中的条件
编程的另一个基本部分是做出决定并根据这些决定引起一些行动。这可以通过JavaScript中的条件语句来实现。你可以使用。
If...else:
let balance= 1200;
if(balance< 1000)
{
console.log("余额小于1000");
}
else
{
console.log( "余额大于1000");
}
输出。
如果......否则,如果......否则。
let balance= 1200;
if(balance< 1000)
{ console.log("余额小于1000");}
else if(balance>1000 &&balance< 1500)
{console.log("余额在1000-1500之间");}
else {console.log("余额超过1500 ");}
输出。
开关。
let alphabet= 'B';
switch(alphabet)
{
case 'A':
console.log("Egg");
break;
case'B':
console.log("Mango");
break;
default:
console.log("Tea!");
}
输出。
为了更好地理解这个主题,你可以查看这些关于if-else和switch条件语句的详细文章。
JavaScript中的循环
直到某个条件被满足。循环不断地重复一段代码(可以是单行,也可以是多行),JavaScript提供了for、while、do-while和for each循环。下面是它们的工作原理和例子。
For 循环
它在一个给定的代码中循环多次。
for(let i=0;i< 10;i++)
{
console.log(i + " ");
}
输出。
你可以通过这篇文章了解它的概念和工作。
While 循环
循环一个指定的给定代码,直到满足给定条件。
let i= 0;
while(i<4 )
{
console.log(i + "");
i++;
}
输出。
Do While 循环
与while循环类似,还有一个do-while循环。它的不同之处在于,这里的循环至少会被执行一次。原因是,在循环的最后会检查条件。
let i= 0;
do
{
console.log(i + " ");
i++;
}while(i < 3);
Output:
输出。
For Each 循环
为了迭代像Arrays这样的集合,可以使用for each循环。
let letter=["m", "a", "n", "g","o" ];
letter.forEach(
function(entry)
{
console.log(entry+ " ");
}
) 。
输出。
这只是给你一个基本的理解。如果你想深入了解,请查看这篇文章,或者想了解for-in循环,你也可以查看这篇文章。
JavaScript中的函数
函数是被分配来执行某些任务的代码块。例如,当你点击一个按钮时,你想显示一条信息。所以这将通过使用函数来实现。要详细了解这个概念,你可以查看这篇文章。
下面是一个工作原理的演示。
函数addition(i,j=5)
{
returni+j;
}
let result=addition(3,5);
console.log("add(3,5) is " +result);
输出。
在上面的例子中,两个数字被传入了加法()的函数中,并被存储在变量result中。
JavaScript为我们提供了各种数据类型、函数、方法以及更深入的内容。这些都是非常有用的,使我们对程序的理解变得简单。你有很多方法可以学习JavaScript,通过书籍,以及通过在线资源。
结语。
在今天的指南中,我们学习了JavaScript的基础知识。对于交互式的、有吸引力的网页来说,JavaScript已经成为必不可少的东西。现在,JavaScript为我们提供了各种框架,甚至帮助我们开发网络和移动应用程序。开发人员也在使用JavaScript创建浏览器游戏。
随着对JavaScript需求的增加,学习这种语言的资源也在增加。你可以通过在线教程、课程、甚至书籍来学习它。但是,无论你的学习媒介是什么,唯一能让你成为专家的就是练习。