JavaScript教程:了解基础知识
JavaScript易于学习,最受欢迎的编程语言之一,以及网络的语言。如果您有网络浏览器,则您可以在其中编写JavaScript的环境。那么为什么不开始使用这个基本的JavaScript教程?
先决条件
如果启动本教程的那些对HTTP协议的基本了解并具有一些HTML和CSS的知识,它将有助于。您可以找到Udemy的网站上这些主题的介绍资源。但是,没有必要知道任何一个来编写JavaScript代码。所以现在让我们这样做来告诉你。
写下你的第一个JavaScript代码
开始使用Javascript比任何其他编程语言都容易。您只需要一个浏览器来编写JavaScript代码。所有流行的浏览器,包括Chrome、Edge和Safari,都有一套开发工具,允许用户查看当前网页的信息、执行JavaScript、修改实时HTML等等。
让我们尝试在Chrome浏览器中写一些JavaScript。如果选择其他浏览器要使用,则唯一的区别将是您访问开发人员工具和控制台的方式。在Chrome中,您可以通过两种方式到达开发人员工具中的控制台:
- 使用快捷键Command + Option + J (Mac)或Control + Shift + J (Windows/Linux)。
- 使用Chrome菜单:选择> More Tools > JavaScript Console。
一旦你访问了你的浏览器控制台,输入以下代码并按enter:
alert(“Hello, World !”)
你现在不能完全叫自己黑客,但这很简单。在此操作之后,您应该看到一个警告弹出,说,“Hello,World”。现在让我们了解更多有关Javascript的信息,以便我们开始编写更多的代码。首先,让我们看看究竟是什么javascript。
什么是JavaScript?
布伦丹·艾奇(Brendan Eich) 1995年在网景(Netscape)当工程师时创建了JavaScript。它是一种面向对象的编程语言,可以促进浏览器内的交互,而无需为每个操作重新加载页面。JavaScript是一种脚本语言。艾奇只用了10天就写出了第一个版本的语言。
JavaScript特性
JavaScript是一种脚本语言。脚本语言不需要进行编译。它们依赖于特殊的运行时环境和相关的解释器 - 计算机程序,这些计算机程序在不通过各种方法编译的情况下执行代码。现代Web浏览器包括可以解释JavaScript代码的解释器。
浏览器外的JavaScript
您将在浏览器之外找到javascript的最受欢迎的环境是nodejs。NodeJS是一个在服务器环境中没有浏览器运行的JavaScript引擎。这意味着您可以使用JavaScript从后端构建完整的Web应用程序到前端。
此外,各种移动框架喜欢科尔多瓦,离子, 和原生允许开发人员使用Web技术构建移动应用程序,包括任何脚本的JavaScript。
JavaScript的替代品
JavaScript中有很少的替代方案用于在浏览器中执行代码。这些选项为JavaScript提供了替代语法,而是在我们在浏览器中使用它们之前编译为纯粹的JavaScript。JavaScript的一些流行替代品包括CoffeeScript,Cypescript和Dart。
当使用这些替代语言时,您的代码被翻译成Javascript,然后在浏览器中执行。
将JavaScript添加到HTML
在上面的实验中,您使用web浏览器的控制台来执行JavaScript代码。JavaScript的标准用法是向HTML页面添加脚本。为此,您需要在HTML本身中包含JavaScript。当浏览器检测到<脚本>在HTML文件中标记,它知道要执行JavaScript代码。使用此标记,您可以直接在HTML文件中嵌入JavaScript代码,或者包含单独的JavaScript源文件。
内部JavaScript.
您可以将JavaScript直接放置在HTML文件中,在<脚本>和脚本>标签。
例子:
<!doctype html> 示例网页 title> head> 示例页面 h1> <脚本> document.write(“ hello! h3>”)脚本很高兴你在这里。< / p > < /身体> < / html >
您可以将内部JavaScript放置在HTML文档的头部或正文部分。
在这种情况下,我们的JavaScript代码将直接嵌入到HTML文件中。
外部JavaScript
还可以将外部JavaScript文件链接到HTML文件。
例如:
<!doctype html> 示例网页 title> head> 示例页面 h1>
很高兴您在这里。 p> <脚本src =“js / example.js”> 脚本> body> html>
在这种情况下,脚本标记强制浏览器从外部位置获取我们的JavaScript代码。
外部JavaScript文件的路径是<脚本>标签。建议将脚本放在
元素的底部,以防止由于脚本加载阻塞HTML显示而延迟页面加载。JavaScript文件传统上使用扩展JS。除非您只是将一个小型代码添加到网页,否则将JavaScript添加到HTML的推荐方式包括外部JavaScript文件。有几个原因:
- JavaScript和HTML的分离使得两者更易于阅读和维护。
- 页面可以通过浏览器缓存JavaScript文件的缓存来加载更快,这会降低HTML文档的大小。内部JavaScript增加了HTML文档的大小,因为它会在每个HTML文档请求上下载。
- 您可以将多个HTML文档链接到同一个JavaScript文件,这可以减少由于浏览器缓存而导致的页面加载时间。
JavaScript基础知识
在您编写更多JavaScript代码之前,它需要了解基础知识。每个编程语言都有规则,javascript没有什么不同。编程语言的规则就像是口语语言的规则,除非您在代码中打破规则时,最可能的结果是您的代码无法正常工作。
JavaScript语言的以下特性对于大多数编程语言来说是通用的,但是它们处理这些特性的方式是不同的。
JavaScript语法
句法是书写语言的规则,类似于口语中的语法。
区分大小写
JavaScript的一个规则是区分大小写,这意味着如果您创建了一个特定大小写的变量,比如Car,那么您必须使用相同的大小写再次访问该变量,而不是Car。
标识符
javascript中的标识符是变量,函数,参数或类的名称。这些名称必须遵循以下规则:
- 第一个字符必须是字母(a-z或a-z),下划线(_)或美元符号($)。
- 其他字符可以是字母(a-z或a-z),数字(0-9),下划线(_)和美元符号($)。
虽然这不是JavaScript语言的规则,但大多数开发人员遵循的惯例是,这些名称应该使用CamelCase。CamelCase将名字中除第一个单词外的每个单词都大写。
例子:
const thisIsCamelCase = ";
注释
注释是代码中不执行的部分。名称定义了它自己。它们用于向代码中添加注释,有时以结构化格式编写,以便解析它们以创建代码的文档页面。JavaScript支持两种类型的注释,单行注释和块注释。
//这是一行注释。它必须在一行上。/*这是一个块注释。它可以跨任意多行。* / \ # # # JavaScript变量
语句
声明是给予计算机的指令。脚本包括一系列专门命令实现目标(如食谱)的语句。以下是关于陈述的一些事情要记住:
- 新行- 每个陈述都应该从新行开始。
- 分号- 每个陈述应该以分号结尾;这告诉解释器完成此步骤并从以下语句开始。
- 空白—空格包括制表符、空格和换行符。单词和制表符之间的空白被忽略。使用空白使代码更容易阅读。
例子:
Const Car =“丰田”;Const Car =“丰田”;//更易于阅读
- 线的长度- 将代码长度保持为80个字符或更短,以最大化可读性。
- 排队休息- 除非在声明中发现,否则忽略。对于多行语句,应在运营商(例如,=,+, - )之后使用中断。
例子:
document.getElementByID(“示例”)。innerhtml =“在此处插入新文本”;
- 代码块- 代码块在Cully括号内组织相关语句{}并使它们更容易读取。关闭卷曲括号不是分号的。JavaScript函数通常在代码块中。
例子:
函数mybirthday {警报(%u201chappy生日!%u201d);document.getElementByID(%u201cmessage%u201d).innerhtml =%u201cyou%u2019Re一年聪明!%u201d;}
表达式
表达式是代码的片段,用于评估值。
例如:
10 + 20
上面的表达式的计算结果是30。
您也可以在表达式中使用变量:
Const a = 10;Const b = 20;a + b
第三行是表达式,也评估为30。
关键词和保留单词
JavaScript针对某些自己的方法使用特定名称。因此,您无法为自己的变量,函数和类使用相同的名称。这些称为关键字或保留单词。以下是其中的列表:
抽象的 | 参数 | 等待 | 布尔 |
休息 | 字节 | 案件 | 抓住 |
char | 类 | const | 继续 |
调试器 | 默认 | 删除 | 做 |
双倍的 | 别的 | 枚举 | eval |
出口 | 延伸 | 假 | 最后 |
最后 | 浮动 | 为 | 功能 |
去 | 如果 | 实施 | 进口 |
在 | 运算符 | int | 接口 |
让 | 长 | 本国的 | 新的 |
空值 | 包 | 私人 | 受保护的 |
公共 | 返回 | 短的 | 静态 |
极好的 | 转变 | 同步 | 这 |
扔 | 抛出 | 瞬态 | 真的 |
尝试 | 类型 | var. | 空白 |
易挥发的 | 尽管 | 与 | 屈服 |
JavaScript变量
JavaScript和其他编程语言使用变量来存储值。在上面的语法部分中,我们回顾了为变量创建名称的规则。
数据类型
JavaScript变量必须具有类型。JavaScript在分配时动态地确定变量的类型。以下是JavaScript支持的数据类型:
- 未定义的—当一个变量没有值时,它被赋值为这种类型。
- 空值- 此类型的变量不存在。它与undefined不同。
- 布尔基—该类型的变量可以为true或false。
- 字符串—该类型的变量可以包含字母和其他字符。它必须用单引号或双引号包围。
- 象征- 这种类型的变量是唯一的,不变的,并在ES6版本的JavaScript中添加。
- 数量- 这种类型的变量可以是整数,十进制,负数或科学符号。
- 目的- 这种类型的变量是复合类型。它具有属性和方法。它用逗号分隔并用括号包包的键值对表示。键访问属性和方法。
- 大批—这种类型的变量是用大括号括起来的值列表,用逗号分隔。值是通过值的索引访问的。JavaScript中的数组是从零开始的,这意味着该索引从0开始。
这些例子有:
//未定义的const a;// null const b = null;// boolean const c = true;//字符串const d =“String一个”;const e ='string with';//符号const f =符号();// number const g = 10;const h = 5.5;const i = -7;Const J = 123E-5; // Object const k = {carMake: "Toyota", carModel: "Prius", year: 2012, extColor: "black"}; // Array const l = ["White", "Blue", "Green"];
JavaScript数据类型是动态的,这意味着在使用VAR或设定的定义时,可以将变量重新分配到新类型。
让x = 12;//类型是数字让x =“汽车”;//类型是字符串让x;//类型未定义
任务
您可以使用赋值运算符为变量分配一个值,该值是等号(=)。这些是在JavaScript中定义变量的三种方法:
- 在执行JavaScript之前处理使用此关键字定义的var - 变量。
- 让 - 可以重新分配使用此关键字定义的变量。它们也只能在它们中定义的块中使用。
- 无法重新分配使用此关键字定义的const - 变量。关键字代表常量。
例子是:
const a = '我不能被重新分配';让b = 'I only work in my code block';var c = '我不再经常使用';
对于大多数开发需求betwayapp下载安装,const和let是首选。
JavaScript操作符
JavaScript中的操作员是一个符号,以告诉编译器或解释器执行以下操作之一:
算术
其中一些应该熟悉。他们执行算术运算。
操作员 | 描述 | 例子 | 结果 |
+ | 添加 | x + y | x和y的总和 |
- - - - - - | 减法 | X - Y. | X和Y的差异。 |
* | 乘法 | x * y | x和y的乘积。 |
/ | 分配 | x / y | x和y的商 |
% | 模量 | x%y | x的剩余x除以y |
比较
比较操作符比较两个值并返回true或false的布尔值。
操作员 | 名称 | 例子 | 结果 |
= = | 平等的 | x = = y | 如果x等于y,则为true |
= = = | 相同的 | x === y | 如果x等于y,则为true,它们是相同的类型 |
! = | 不平等的 | x!= y | 当x不等于y时为真 |
= = ! | 不完全相同 | x!== y | 如果x不等于y,或它们不属于同一类型,则为真 |
< | 少于 | X 如果x小于y,则为true |
|
> | 比...更棒 | x > y | 如果x大于y,则为true |
> = | 大于或等于 | x> = y | 如果x大于或等于y,则为true |
< = | 小于或等于 | x < = y | 当x小于等于y时为真 |
逻辑(或关系)
逻辑运算符用于组合条件陈述。
操作员 | 名称 | 例子 | 结果 |
& & | 和 | x && Y. | 如果x和y都是真的,则为true |
|| | 或者 | x | | y | 如果x或y为真,则为真 |
! | 不是 | x ! | 如果x不是真的,则为true |
任务
JavaScript赋值操作符用于给变量赋值。
操作员 | 描述 | 例子 | 是相同的 |
= | 分配 | x = Y. | x = Y. |
+ = | 添加和分配 | x + = $ | X = X + y |
- = | 减去和分配 | x - = y | x = x - y |
* = | 乘以和分配 | x * = y | x = x * y |
/ = | 划分并指定商 | x / y = | X = X / y |
% = | 划分并分配模量 | x%= y | x = x%y |
字符串运算符
字符串运算符在字符串上运行。只有两个。
操作员 | 描述 | 例子 | 结果 |
+ | 级联 | str1 + str2. | str1和str2的连接 |
+ = | 级联任务 | str1 + = str2 | 将str2附加到str1 |
JavaScript条件
JavaScript和其他编程语言使用条件来控制程序的流程。
如果,否则,如果,还有其他
如果满足IF条件,则应运行特定的代码块。否则如果语句仅执行以前的条件,则仅执行先前的条件。如果否则如果不满足语句条件,则它将执行掉后的else语句。
例子:
if(x y){console.log('x更大');} else {console.log('这将永远不会运行。');}
转变
变量,交换值,确定要执行的情况。Switch语句生存在单个代码块中,分号分隔彼此的情况。如果交换机值与任何一个情况不匹配,则运行默认选项。在每个Switch语句之后必须使用Break语句以退出交换机语句一旦遇到条件,或者它将继续测试条件。默认情况下的代码在满足其他条件中时运行。
例如:
const问候;Const Day ='星期一';切换(日){案例'星期一':问候='星期一快乐!';休息;案例'星期五':问候='TGIF!';休息;默认:问候='早上好!';休息;}
JavaScript循环
循环允许您重复代码块,直到返回false。JavaScript支持三种类型的循环。
为
for循环是最常见的循环类型,它允许您运行特定次数的代码,并跟踪代码块中的循环次数。
例如:
for(让我= 1; i <10; i ++){console.log(i);}
在上面的循环中,循环计数器是变量I,并设置为1.第二个表达式告诉我们,在我小于10的时候,循环将运行。最终表达式为每个循环递增1递增1。
尽管
一会儿循环重复代码块,直到条件返回false。当您没有特定数量的期望循环或想要循环时,您将应用此项,而某个条件证明是正确的。
例如:
设x = 0;让y = 1;而(x <10){x ++;y--;}
上面的循环将执行,而x小于10. x以0开始,每个循环的增量1,因此循环将执行10次。
做
这种类型的循环就像一小时的循环,但将至少运行一次代码块,无论是否满足指定的条件。
例如:
让计数= 20;do {alert('循环de循环!');数+ +;} while (count < 20);
上面的循环将运行20次。
JavaScript函数
JavaScript函数包含一个可重用代码块,其中包含旨在完成特定任务的语句。在JavaScript中使用function关键字创建函数。
例如:
function areaRectangle(width, height) {alert (" The area is " + (width * height) + " feet.");} areaRectangle(10、20);//结果是“面积是200英尺。”
在上面的示例中,我们有一个功能,它将创建一个警报告诉我们名为Arearentangle的矩形区域。在此功能中,宽度和高度称为参数。在示例的最后一行中,我们执行函数。
结论
本教程应该让您开始学习JavaScript的基础知识。关于这种强大的编程语言还有很多需要学习的内容,但是有了这些知识,您应该能够理解这种语言的术语,并遵循更高级的教程开始用JavaScript构建应用程序。