@function规则原文：https://www.studytonight.com/sass/sass-function-atrule
SASS @function AT 规则用于定义具有复杂操作****的函数，接受参数并返回结果**。SASS 函数用于声明复杂的公式和行为，然后可以在整个样式表中使用。**
**## SASS @function:语法和@returnat-规则
SASS 函数是使用@函数 AT 规则定义的。以下是语法，
@function <name>(<arguments...>) { ... }
与 SASS mixins 不同，SASS 函数必须有一个返回语句，该语句是使用@returnat-规则指定的，用于返回函数调用的结果。
所以整个语法是这样的，
@function <name>(<arguments...>) {
// function definition
@return <somevalue>
}
@return AT 规则只能在函数定义中使用，函数的执行在遇到@return语句时结束，用@return AT 规则指定的函数结果返回给调用语句。
就像我们可以在 SASS mixins 中提供参数一样，我们也可以在定义 SASS 函数时这样做。
让我们定义一个简单的函数，将提供给它的两个参数相加，并返回相加的结果。
@function add($var1, $var2) {
$var3 : $var1 + $var2;
@return $var3;
}
这个函数可以在样式表中使用正常的 CSS 函数语法，如下所示，
div{
height: add(300, 400) * 1px;
}
正如您在上面的 CSS 代码中看到的，我们必须在调用函数时为参数指定值。
我们还可以在定义函数时设置参数的默认值，这样如果用户没有传递任何值，就会使用参数的默认值。让我们修改上面使用的同一个例子:
@function add($var1, $var2: 400) {
$var3 : $var1 + $var2;
@return $var3;
}
在调用函数时，我们可以传递一个或两个参数。如果传递了一个参数，则其他参数将采用默认值。如果在调用函数时传递了这两个参数，那么函数调用时提供的值将覆盖 defualt 值。
div {
height: add(300) * 1px;
}
在调用函数时，我们可以提供参数的值以及函数定义中指定的参数名称。因此，除了按顺序或数量传递参数，还可以按名称传递参数。
让我们看看如何调用上面定义的add函数，方法是在调用函数时提供关键字参数。
div {
height: add($var2: 300, $var1: 400) * 1px;
}
有时我们需要在不同的场景中向一个函数传递不同数量的参数。对于这种情况，我们可以定义我们的函数接受任意数量的参数，这可以用我们在 mixins 中看到的相同方式来完成，即当最后一个参数以三个点 (ex: $abc...)结束时，这被称为参数列表。因此，当调用这个函数时，在函数调用时提供的所有参数都可以在函数参数中作为值列表使用，然后可以在函数中使用。
让我们举个例子，
@function min($numbers...) {
$min: null;
@each $number in $numbers {
@if $min == null or $number < $min {
$min: $number;
}
}
@return $min;
}
.micro {
width: min(50px, 30px, 100px);
}
因此，在本教程中，我们了解了 SASS 函数，并涵盖了各种不同的示例，在这些示例中，我们传递了参数、带有默认值的参数以及任意数量的参数。
@extend规则的继承原文：https://www.studytonight.com/sass/sass-extend-atrule-sass-inheritance
SASS @extend AT 规则允许在样式表中继承样式规则。如果您希望在样式表中用另一个类的所有样式规则以及它自己特定的样式规则来定义一个类，我们可以使用 SASS @extend AT 规则。
SASS @extend AT 规则将让你在另一个选择器中使用一个选择器的 CSS 属性。
@extend:语法要使用@extend AT 规则，我们应该遵循以下语法:
@extend <selector>
让我们举一个简单的 SASS 例子，试着理解它的用法。
让我们为错误、警告和成功消息编写一些样式规则。下面写的课。message-shared保存基本的样式规则，然后是。消息，。成功。错误和。警告
.message-shared
{
border: 1px solid #ccc
padding: 10px
color: #333
}
现在让我们将扩展到其他类。
.message
{
@extend .message-shared
}
.success
{
@extend .message-shared
border-color: green
}
.error
{
@extend .message-shared
border-color: red
}
.warning
{
@extend .message-shared
border-color: yellow
}
@extend和占位符选择器占位符选择器的名称前面有一个%符号。当我们定义占位符选择器时，我们不能在我们的 HTML 中使用它，但它只能用于继承，这意味着其他选择器可以使用@extend AT 规则继承它的样式。
让我们举一个简单的例子:
%btn
{
border: 1px solid #ccc
padding: 10px
color: #333
}
.btn-success
{
@extend %btn
background-color: green
}
.btn-error
{
@extend %btn
background-color: red
}
编译后的 CSS 代码看起来像，
.btn-success
{
border: 1px solid #ccc;
padding: 10px;
color: #333;
background-color: green;
}
.btn-error
{
border: 1px solid #ccc;
padding: 10px;
color: #333;
background-color: red;
}
正如您所看到的，在编译后的 CSS 中，我们没有占位符选择器，只有它在扩展了它的样式类中的样式规则。
我们甚至可以在 SASS 中通过添加一个-连字符或一个下划线** _作为选择器名称的前缀来定义私有占位符。这种占位符选择器变成私有的，只能通过在同一个样式表中编写样式类来扩展。**
**## SASS @extend:可选扩展
如果您使用@extendat-规则来扩展任何选择器，并且如果它不存在于样式表中，那么 SASS 将给出错误。因此，在使用@extend AT 规则时应该小心，因为如果更改被扩展的选择器的名称，那么可能会导致错误。
为了解决这个问题，如果您希望样式表代码不会出错，您可以使用！@extend 语句末尾的可选。这将使样式规则的继承成为可选的，如果被扩展的选择器不可用，SASS 仍然不会给出错误。
@extend与@mixin AT 规则SASS mixins 也是用来定义 SASS 中的可重用样式，就像 SASS 扩展一样，那么什么时候应该使用@mixin AT 规则，什么时候应该使用@extend AT 规则呢？
答案是，当我们想要使用参数配置样式规则时，在这种情况下，我们应该使用 SASS mixins，而如果我们的需求是重用静态样式规则(只是一大块样式)，那么在这种情况下，我们可以在样式表中使用 SASS 扩展。
@if，@else和@else if规则原文：https://www.studytonight.com/sass/sass-if-else-and-else-if-atrule
SASS 还通过提供@if、@else和@else if AT 规则来支持流控制，这些规则可以在 SASS 中通过在样式表中实现条件来编写复杂的代码。
在编写 SASS 函数或 SASS 混合函数时，我们可以根据包含混合函数或调用函数时提供的参数值定义不同的样式规则。这可以使用 SASS @if和@elseAT 规则 s来完成，这使得编写更动态的样式规则变得容易。
SASS @if AT 规则可用于根据条件控制样式块的执行。
@if:语法使用@if AT 规则的语法非常简单，
@if <expression> {
/* statements */
}
这里，如果表达式评估为真，则评估与@ifat-规则相关联的块，编译成 CSS 样式规则，如果表达式评估为假，则跳过块。
@if:示例让我们举个例子来看看@if AT 规则的作用。
@mixin borderstyle($color, $round: false) {
border-color: $color;
}
@if $round {
border-radius: 5px;
}
.blue-border {
@include borderstyle(blue, $round: false);
}
.red-border-round {
@include borderstyle(red, $round: true);
}
这将被编译成以下 CSS:
.blue-border {
border-color: blue;
}
.red-border-round {
border-color: red;
border-radius: 5px;
}
SASS @else AT 规则与@if AT 规则一起用于提供替代块，如果@if表达式返回 false ，则执行**。@else AT 规则是可选的，其不是强制的与@if AT 规则一起使用。**
@else:语法使用@else AT 规则的语法非常简单，
@else {
/* statements */
}
注意: 如果没有@if AT 规则，就不能使用 SASS @else AT 规则。它应该始终遵循@if的 AT 规则。
@else:示例让我们举个例子来看看@else AT 规则的作用。
$light-background: #fefefe;
$light-text: #000000;
$dark-background: #000000;
$dark-text: #fefefe;
@mixin theme-colors($light-theme: true) {
@if $light-theme {
background-color: $light-background;
color: $light-text;
} @else {
background-color: $dark-background;
color: $dark-text;
}
}
.banner {
@include theme-colors($light-theme: true);
}
这将被编译成以下 CSS:
.banner {
background-color: #fefefe;
color: #000000;
}
要定义多个条件流，我们可以使用@else if AT 规则和@if AT 规则。可以在@if AT 规则和@else AT 规则之间使用 SASS @else if AT 规则来包含多个条件样式块。
@else if:语法@ else if-AT 规则的语法类似于@ if-AT 规则的语法:
@else if <expression> {
/* statements */
}
就像@if AT 规则一样，@else if AT 规则也取一个表达式作为条件，如果@if AT 规则的表达式求值为 false ，而@else if表达式求值为 true ，则编译@else if样式块。
此外，@else if应该始终与@if AT 规则一起使用，就像@else AT 规则一样。
@else if:示例让我们举个例子来看看@else if AT 规则的作用。
@mixin text-effect($val)
{
@if $val == danger
{
color: red;
}
@else if $val == alert
{
color: yellow;
}
@else if $val == success
{
color: green;
}
@else
{
color: black;
}
}
在上面的例子中，我们使用$val作为参数来确定的颜色是否应该是危险、警告等。
下面我们再举一个例子，这里我们用了一个 SASS mixin 为不同的边框样式:
$light: 1px solid black;
$medium: 3px solid black;
$heavy: 6px solid black;
$none: none;
@mixin border-stroke($val)
{
@if $val == light
{
border: $light;
}
@else if $val == medium
{
border: $medium;
}
@else if $val == heavy
{
border: $heavy;
}
@else
{
border: $none;
}
}
#box
{
width: 150px;
height: 150px;
background-color: red;
/* calling the mixin */
@include border-stroke(heavy);
}
上面的 SASS 代码将被编译成下面的 CSS 代码:
#box
{
width: 150px;
height: 150px;
background-color: red;
border: 6px solid black;
}
因此，在本教程中，我们学习了如何在 SASS 中使用样式表中的@if、@else和@else ifat-规则来实现流控制，以使样式表更加动态。
@for、@each和@while规则原文：https://www.studytonight.com/sass/sass-for-each-and-while-atrule
SASS 提供了像@for、@each和@while这样的 AT 规则，用于在样式表中实现循环。如果你想为 HTML 列表等定义重复的样式规则，那么我们可以使用 SASS 循环。
正如本教程的标题所表明的，在 SASS 中有 3 个 AT 规则可用于设置重复的样式规则创建:
让我们一个接一个地介绍它们，包括它们的语法和一些例子。
SASS @for AT 规则的工作方式与任何编程/脚本语言中的循环的工作方式相同。它用于迭代和编译每次具有不同值的样式块。
@for:语法以下是在 SASS SASS 中使用@for AT 规则的语法:
@for <variable> from <expression> to <expression> { ... }
/* or */
@for <variable> from <expression> through <expression> { ... }
正如您在上面的语法中看到的，在 SCSS/SASS 中有两种使用@for AT 规则的方式:
如果我们指定from <exp> to <exp>，那么从第一个表达式的结果到第二个表达式的结果的每个数字都被分配给变量，但是最终数字被排除在外。
如果我们指定from <exp> through <exp>，那么从第一个表达式的结果开始到第二个表达式的结果的每个数字都被分配给变量，但是的最终数字包括。
@for:示例让我们举一个简单的例子来理解如何使用它。下面我们有一个简单的带有段落标签的 HTML 代码。
<p class="paragraph-1">Sassy way</p>
<p class="paragraph-2">Sassy way</p>
<p class="paragraph-3">Sassy way</p>
<p class="paragraph-4">Sassy way</p>
<p class="paragraph-5">Sassy way</p>
现在如果需要为段落标签中使用的几乎相同的样式类编写一些样式，那么总共应该编写 5 个样式块。
在这种情况下，如果使用用于循环的**，则该任务需要较少的努力。另外，在样式规则中，我们需要通过将 10px 乘以段落编号来增加每个段落的字体大小。**
**查看以下 SCSS 代码:
@for $i from 1 to 6
{
.paragraph-#{$i}
{
font-size: 10px*$i;
}
}
上面的例子使用了开始到结束方法，所以变量$i从 1 到 5 。如果相同的@for AT 规则以开始到结束的形式编写，那么变量$i将从 1 到 6 取值。
从上面的 SCSS 代码生成的 CSS 看起来像:
.paragraph-1
{
font-size: 10px;
}
.paragraph-2
{
font-size: 20px;
}
.paragraph-3
{
font-size: 30px;
}
.paragraph-4
{
font-size: 40px;
}
.paragraph-5
{
font-size: 50px;
}
SASS SASS@each AT 规则也类似于@for AT 规则，唯一的区别在于它是用来迭代一个列表的值并映射。
@each:语法以下是使用@each AT 规则的语法:
@each <variable> in <expression> { ... }
表达式返回一个列表，并为列表中的每个元素计算样式块，这些元素被一个接一个地分配给给定的变量名。
@each:示例让我们借助一个例子来理解这一点。考虑三个 div 元素，其中每个 div 的背景颜色需要借助@each AT 规则来设置。
<div class="blue-background"></div>
<div class="black-background"></div>
<div class="yellow-background"></div>
首先，让我们通过使用一个列表来完成这个任务:
@each $color in blue, black, yellow
{
.#{$color}-background
{
background-color: $color;
}
}
映射方式与列表有点不同，如下所示:
/* $colors is a map here */
$colors: (color1: blue, color2: black, color3: yellow);
@each $key, $value in $colors
{
.#{$color}-background
{
background-color: $value;
}
}
这两种情况的编译后的 CSS 如下所示:
.blue-background
{
background-color: blue;
}
.black-background
{
background-color: black;
}
.yellow-background
{
background-color: yellow;
}
SASS @while类似于任何其他编程/脚本语言中的 while 循环。它一直执行到指定的表达式计算结果为真。
@while:语法以下是@while AT 规则的语法:
@while <expression> { ... }
用@while AT 规则定义的样式块将被求值，直到表达式求值为 true 。在使用@ while-AT 规则进行循环时，我们应该小心，因为这很容易导致无限循环。
@while:示例让我们考虑在@for中使用的具有五个段落标签的 HTML 的同一个例子。
<p class="paragraph-1">Sassy way</p>
<p class="paragraph-2">Sassy way</p>
<p class="paragraph-3">Sassy way</p>
<p class="paragraph-4">Sassy way</p>
<p class="paragraph-5">Sassy way</p>
现在每个段落的字体大小需要根据段落编号来增加。这可以使用**@同时使用**来完成，如下图所示:
$x: 1;
@while $x < 6
{
.paragraph-#{$x}
{
font-size: 10px*$x;
}
$x: $x + 1;
}
生成的 CSS 会是这样的:
.paragraph-1
{
font-size: 10px;
}
.paragraph-2
{
font-size: 20px;
}
.paragraph-3
{
font-size: 30px;
}
.paragraph-4
{
font-size: 40px;
}
.paragraph-5
{
font-size: 50px;
}
因此，在本教程中，我们在 SASS/SCSS 中学习了 3 种不同的循环技术来迭代生成样式规则。如果你有一种情况，你必须定义几乎相似的样式类，在样式上做一些改变，比如 **h1、h2、h3、**等等，你可以使用这些类。标签或者在 bootstrap CSS 的情况下，我们有列 col-1、col-2、col-3 等。有许多用例可以使用它们。
@error、@warn和@debug规则原文：https://www.studytonight.com/sass/sass-error-warn-and-debug-atrule
当我们在 SASS/SCSS 中编写可以接受参数的 mixins 和函数时，参数类型不匹配的几率会增加，我们必须以某种方式处理这种情况。我们可以使用 SASS/SCSS @error、@warn和@debug AT 规则向用户显示消息，指出提供的参数类型不正确。
在本教程中，我们将介绍以下 AT 规则:
@errorat-规则
@warnat-规则
@debugat-规则
让我们从@error AT 规则开始。
SASS/SCSS @error在混搭和功能中都有帮助。假设我们需要确保在函数或 mixins 中传递的参数是正确的，为此，我们可以使用@error at-rul 来显示错误消息，以防证明了错误的数据类型，并且停止代码的编译。
使用@error AT 规则的语法是:
@error <expression>
让我们看一个例子，我们需要传递一个参数来决定 float 属性应该是左还是右。
mixin setcssfloat($floatvalue) {
@if $floatvalue !=left or $floatvalue !=right {
@error "Property #{$property} must be either left or right.";
}
}
$top: top;
@include setcssfloat($top);
显示的错误消息如下所示:
错误:“属性顶部必须是左侧或右侧。”
？
3？@错误“属性#{$property}必须是左侧或右侧。”；
？^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
？
示例. scss 3:5 setcssfoard()
示例. scss 19:3 根样式表
SASS @warn AT 规则用于向用户显示警告，如果用户正在发送一些不正确的值，或者可能是一些不再被 mixin 或函数接受的值。@warn AT 规则并没有完全停止 SASS 样式表的编译。
使用@warn AT 规则的语法与@error 的语法相同。
让我们举个例子来看看这是如何实现的。以下是带有 mixin 和@warn AT 规则的 SCSS 代码:
$known-prefixes: webkit, moz, ms, o;
@mixin prefix($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if not index($known-prefixes, $prefix) {
@warn "Unknown prefix #{$prefix}.";
}
-#{$prefix}-#{$property}: $value;
}
#{$property}: $value;
}
.tilt {
// Oops, we typo'd "webkit" as "wekbit"!
@include prefix(transform, rotate(15deg), wekbit ms);
}
这将被编译成以下 CSS:
.tilt {
-wekbit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
除显示以下警告消息外:
警告:未知前缀 wekbit。
示例. scss 6:7 前缀()
示例. scss 16:3 根样式表
在某些情况下，在编写 SCSS 代码时检查变量的值是有用的，这样可以调试您正在编写的代码，并查看它在不同输入值下的表现。
SASS SASS 规则帮助我们解决了这个问题。@debug AT 规则的语法也类似于@error AT 规则。
要了解用法，最好看一个例子。假设一个混合将两个数字相加，并将其设置为填充到一个 div :
@mixin div-padding($x, $y) {
$z : $x + $y;
padding: $z * 1px;
@debug "width is: #{$z}";
}
@include div-padding(100,200);
调试消息如下所示:
test.scss:3 调试:宽度为:300px
在本教程中，我们介绍了 SASS/SCSS 中的@error、@warn和@debug AT 规则。您必须使用它们来使您的样式表更加详细，以便任何使用它们的人都可以在它们使用任何 mixin 或功能不正确时看到消息。
@at-root规则原文：https://www.studytonight.com/sass/sass-atroot-atrule
SASS/SCSS @at-root AT 规则在 SASS 或 SCSS 中并不常用，但在使用选择器功能实现高级嵌套时有所帮助。我们可以将这个 AT 规则用于任何选择器(通常是定义在另一个选择器的花括号内的嵌套选择器)来将它们编译为样式表中的根选择器，而不是嵌套选择器。
它在文档的根位置发出文档中的所有内容，而不是使用普通的嵌套。
让我们看看它的语法，然后我们将举一个例子来帮助您理解。
下面是它的语法，
@at-root <selector> {
...
}
其实@at-root <selector> { ... }只是@at-root { <selector> { ... } }的简写
@at-root:示例让我们看一个例子来更好地理解这一点。
div{
margin: 0px;
@at-root .column {
background-color: black;
}
}
编译完 CSS 后会是这样的:
div{
margin: 0px;
}
.column{
background-color: black;
}
假设我们从上面的 SCSS 中去掉@at-root，即
div{
margin: 0px;
.column{
background-color: black;
}
}
现在生成的 CSS 如下图所示:
div{
margin: 0px;
}
div .column{
background-color: black;
}
所以这一切都是关于 SASS/SCSS 规则。
原文：https://www.studytonight.com/sass/sass-nested-rules-and-nested-properties
SASS 嵌套规则使我们能够编写嵌套规则**，使用花括号来包围嵌套元素**的样式规则，就像在 HTML 中一样。
嵌套规则使编写 CSS 代码更容易，并使样式规则更易读。
在 HTML 中，我们有嵌套和可视化的层次结构。例如，如果我们创建一个列表，我们使用<li>标签在<ul>或<ol>标签内创建列表项。但是 CSS 不支持这样的嵌套语法。因此，如果我们必须用下面的 HTML 代码来设计网页边栏中的列表及其项目的样式，
<div id="sidebar">
<ul>
<li>Tutorials</li>
<li>Q & A Forum</li>
<li>Flashcards</li>
<li>Tests</li>
<li>Collaborate</li>
</ul>
</div>
我们将编写如下 CSS 代码:
#sidebar {
float:left;
width:25%;
background-color:lightblue;
padding: 30px 10px;
}
#sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#sidebar li {
padding: 6px;
margin-bottom: 10px;
background-color: #10A2FF;
color: #ffffff;
}
但是在 SASS/SCSS 中，我们可以使用嵌套规则以一种更易读的方式做到这一点，
#sidebar {
float:left;
width:25%;
background-color:lightblue;
padding: 30px 10px;
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
padding: 6px;
margin-bottom: 10px;
background-color: #10A2FF;
color: #ffffff;
}
}
看，比 CSS 好。
每当有 CSS 属性属于相同的名称空间时，就会使用这种方法。考虑背景命名空间，我们在其中具有如下属性:
背景色
背景图像
背景-重复
背景-附件
背景位置
在 CSS 的情况下，如果我们想使用它们，我们需要分别键入所有这些属性。但是 SCSS 为我们提供了的速记嵌套方式，这使得我们编写名称空间后跟所有属性的工作变得更加容易，即以嵌套的方式。
让我们看一个例子，
body
{
background:
{
color: yellow;
attachment: fixed;
repeat: no-repeat;
}
}
这将被编译为:
body
{
background-color: yellow;
background-attachment: fixed;
background-repeat: no-repeat;
}
类似地，在字体命名空间的情况下，
.funky
{
font:
{
family: fantasy;
size: 30em;
weight: bold;
}
}
这将被编译成下面的 CSS 代码，
.funky
{
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
在本教程中，我们详细介绍了嵌套规则和嵌套属性的概念，因为这是您在编写 SCSS 风格代码时必须使用的一个很好的特性，因为这将使您的工作变得更容易，也将使您的样式表更易读，体积更小。
&符号原文：https://www.studytonight.com/sass/sass-parent-selector-using-ampersand
在 SASS/SCSS 语法中，我们可以使用&符号(和符号)来表示父类，并定义进一步的嵌套规则。SASS 中的这个&符号(&)代表父选择器，我们可以用它轻松编写嵌套属性。
在样式表的嵌套选择器中使用父选择器的语法非常简单。你所要做的就是使用&(和符号)作为前缀，后跟一些文本，当你将 SCSS 代码编译成 CSS 代码时，和符号将被父选择器的名称替换。
#someclass {
/* nested property using parent selector */
&-body {
/* this will be compiled as #someclass-body */
}
}
&符号应该在复合选择器的开头，但是它后面可以跟一个后缀，这个后缀将被添加到父选择器中。
让我们举个例子来理解这一点。考虑下面的 HTML 代码，
<div id="studytonight">
<div id="studytonight-body">
/* Some HTML code */
</div>
</div>
正如我们在上面的嵌套规则示例中所看到的，我们可以使用 Sass 嵌套规则来定义#studytonight和#studytonight-body的样式，但是 Sass 使使用父选择器语法更加容易。
#studytonight {
/* styling for #studytonight div */
&-body {
/* styling for #studytonight-body div */
}
}
当 SCSS 代码转换为 CSS 代码时，&符号被编译为父选择器值。当我们必须在主元素中使用类似:hover、:selected等伪选择器时，这就派上了用场。因此，如果您有一个<a>标签，并且想要为鼠标悬停定义样式，您可以在 Sass 中这样做，
a {
text-decoration: none;
color:black;
// using parent selector
&:hover {
color:red;
}
}
这相当于下面的 CSS 代码，
a{
text-decoration: none;
color:black;
}
a:hover
{
color:red;
}
父选择器是 SASS/SCSS 的一个小特性，但它为我们提供了进一步简化的方法，在这种方法中，我们必须编写更少的代码来表达更多的意思。当我们为嵌套的 HTML 组件编写样式代码时，这种方法非常有用，比如使用列表或导航条的菜单等。
原文：https://www.studytonight.com/sass/sass-partials
SASS/SCSS 部分是 CSS 文件，包含特定样式的小型 CSS 代码，与主样式表分离，以便更好地管理 CSS 代码。这些文件可以在另一个 SASS 或 SCSS 文件中使用，而不是使用 @use AT 规则 或 @forward AT 规则 再次编写相同的样式，这两个文件都包括具有不同可见性的样式表。
SASS Partials 提供了一个很好的方法来组织不同文件中的 CSS 代码，然后在任何需要的地方使用它们。
在 SASS 中一定要把样式表做成 Partial，它的名字应该总是以_ 下划线字符开头，例如**_ Partial . SCS，**等。
作为样式表名称前缀的下划线字符表示这是 CSS 的一小块，因此不需要单独将它编译成 CSS。
Partials 用于将样式代码管理为功能性划分的样式规则，这些规则被划分为独立的文件，可以使用@use AT 规则在主样式表中使用。这样做有很多好处，
您的主样式表将变得不那么庞大，并且您将能够更好地管理样式表。
不编译部分代码，因此可以快速将 SASS 代码整体编译成 CSS。
您可以根据自己的需求，使用@use AT 规则或@forward AT 规则来控制 Partials 中定义的样式代码的可见性。
考虑 main.scss 文件，它是样式的主文件，现在 _partial.scss 需要导入。
/* In the main.scss file */
@use 'partial'
注意导入时不使用 _字符和文件扩展名。一旦我们包含了文件，那么部分中的所有内容都可以在主文件中使用。
是的，当一个样式表包含在另一个样式表中时，SASS 允许我们控制它的成员的可见性。控制可见性有两种不同的方法:
首先是通过在 Partials 中定义私有成员
其次，当我们使用@use AT 规则在样式表中包含分部时，如果该样式表(在其中导入分部)被任何其他样式表包含，则分部中定义的成员将不可见。在这种情况下，为了使分部成员可用，我们必须使用@forward AT 规则。
在 SASS/SCSS 中，我们可以通过在样式表中添加一个连字符(-) 或下划线(_) 作为名称前缀来定义私有成员。私有成员通常在其定义的样式表(部分)中工作，但是对于包含该部分的样式表，它们是不可见的。
让我们举个例子，
/* src/_corners.scss */
$-radius: 3px;
@mixin rounded {
border-radius: $-radius;
}
现在如果我们将这个样式表导入到另一个样式表中，
/* style.scss */
@use "src/corners";
.button {
@include corners.rounded;
/* This is an error! $-radius isn't visible
outside of `_corners.scss`.
*/
padding: 5px + corners.$-radius;
}
@use和@forward导入 SASS当我们使用@use AT 规则在样式表中包含分部时，如果该样式表(在其中导入分部)被任何其他样式表包含，则分部中定义的成员将不可见。在这种情况下，为了使分部成员可用，我们必须使用@forward AT 规则。
如果我们使用@useat-规则，我们可以隐藏分部的成员以避免进一步使用。
在使用@forward AT 规则时，也允许在进一步的导入中使用样式表中包含的部分。
就这样，我们结束了 Partials。SASS Partials 为我们提供了一种技术来更好地管理我们的样式代码和有意义地隔离样式规则。
原文：https://www.studytonight.com/sass/converting-from-scss-to-sass-and-vice-versa
SASS 和 SCSS 是同一枚硬币的两面。它们的语法有一些小的不同，比如 SCSS 使用分号，而 SASS 使用缩进，这是你想要的选择。
无论你选择什么，你总能把一种风格转换成另一种风格。
是的，如果你的样式表是用 SCSS 写的，你可以把它转换成 SASS 代码，如果你的样式表是用 SASS 写的，你可以把它转换成 SCSS 代码。
这两种语法都可以导入用另一种语法编写的文件。此时，没有必要用另一种语法重写文件。这些文件可以使用一些简单的命令行工具进行转换，例如sass-convert。
/* to convert Sass syntax to SCSS syntax */
$ sass-convert style.sass style.scss
/* To convert SCSS Syntax to Sass syntax */
$ sass-convert style.scss style.sass
其中命令后的第一个文件是源文件，第二个文件表示目标文件。
原文：https://www.studytonight.com/sass/sass-buildin-modules
SASS 附带了许多内置模块，就像预定义的样式表一样，可以直接包含/导入到样式表中并使用。我们可以使用 @use AT 规则导入 SASS 内置模块，然后可以访问其成员。
所有内置 SASS 模块的 URL 都以sass:开头，因此如果您想要导入颜色内置模块，您必须在样式表中添加以下语句:
@use "sass:color"
一旦我们导入任何内置模块，我们就可以使用它的成员混合、变量、函数等。使用模块名称，后跟点运算符，然后是成员的名称。
让我们举个例子，
@use "sass:color";
.button {
$primary-color: #6b717f;
color: $primary-color;
/* using the funciton scale */
border: 1px solid color.scale($primary-color, $lightness: 20%);
}
该 SCSS 代码将被编译为以下内容:
.button {
color: #6b717f;
border: 1px solid #878d9a;
}
默认情况下，SASS/SCSS 提供以下内置模块:
sass:数学模块，为我们提供对ciel、clamp、floor、max、min等数字进行各种操作的功能。
sass:color 模块，提供各种功能对颜色执行各种操作，比如基于现有颜色创建新颜色，例如创建现有颜色的更浅色调，因此该模块在设计主题时非常有用。这个预装了scale、lighten、saturation、opacity、alpha等功能。
sass:string 模块提供拆分、合并或搜索字符串的功能。它预装了quote、unquote、index、insert、length、slice等功能。
sass:列表模块用于对列表值类型进行不同的操作。这个有append、join、length等功能。
sass:map 模块为我们提供了使用get、keys、has-key、merge等函数对 SASS map 值类型进行操作的功能。
sass:选择器模块让我们可以访问用于检查和操作选择器的 sass 的选择器引擎。
sass:meta 模块公开了 sass 的内部工作方式。
借助内置模块，SASS/SCSS 的开发人员朝着让网页设计师的生活变得更加轻松的方向又迈进了一步，因为有了所有这些预定义的模块和功能，开发人员所要做的就是阅读这些模块及其功能，并在样式表中简单地使用它们。
原文：https://www.studytonight.com/javascript/introduction-to-javascript
JavaScript 是一种客户端、基于对象的脚本语言，用于处理和验证客户端数据。JavaScript 还用于使网页的用户界面更加动态，使其对诸如鼠标移动、鼠标点击某个 HTML 元素、按钮点击等事件做出响应，使用它我们可以改善用户体验。
JavaScript 是基于 ECMAScript 标准的轻量级脚本语言。它在浏览器上执行，因此减少了服务器上的负载。JavaScript 还可以用来创建跨平台应用程序或 SaaS 应用程序，或者通过使用节点来创建后端服务器端应用程序。
它是一种解释语言，意思是在 Javascript 里面写的脚本是一行一行处理的，处理之前不编译。这些脚本由 JavaScript 解释器解释，这是网络浏览器的内置组件。虽然最近这种情况有所改变，但是随着 Chrome 和 NodeJS 中 V8 引擎的引入，现在及时编译也用于 JavaScript。
JavaScript 是 P latform Independent ，也就是说你只需要写一次脚本，就可以在任何平台或者浏览器上运行，而不影响 Script 的输出。
JavaScript，以前被称为 LiveScript，由网景和太阳微系统公司开发。它也被称为 ECMAScript，因为它是由欧洲计算机制造商协会(ECMA)标准化的。最近的升级是 ECMAScript6 、 ES7 、 ES8 、 ES9 、 ES10 以及今年年初最新的 ECMAScript2020 。尽管您应该用所有新功能来更新自己，但 ECMAScript6 是最重要的变化，我们将在本教程系列的最后介绍更多内容。
浏览器使用自己的 JavaScript 引擎来执行 JavaScript 代码。下面列出了一些常用的浏览器:
Chrome 采用的是 V8 发动机。
火狐使用蜘蛛猴引擎。
微软边缘使用查克拉核心引擎。
Safari 使用 SquirrelFish 引擎。
如果你是初学者，我们建议你先学 HTML学 CSS 然后你会更容易理解 JavaScript。在 web 开发中，HTML 是可以用来开发基本网页的基本构件，基本网页可以有超链接、图像、表单等。然后是 CSS，它用于设计各种 HTML 元素的样式，使它们看起来很好。CSS 是为你的 HTML 元素提供样式的标准，现在没有一个网站是没有它的。
学习 SASS/SCSS 这是一种新的语言，它使我们能够像任何其他编程语言一样编写动态样式规则，这些规则可以转换成 CSS 代码，然后在 HTML 页面中使用。
然后是 JavaScript，正如我们提到的，它是一种脚本语言，用于处理和验证客户端数据，基于事件使网页动态化，启用 cookies、本地存储等功能，等等。
让我们看看 JavaScript 的一些特性。
以下是 JavaScript 最有用的一些特性:
轻量
动态类型
基于对象的
功能的
独立于平台
基于原型的
解释
异步的
让我们看看所有这些特性意味着什么:
轻量级: JavaScript 是一种轻量级脚本语言，因为它仅用于浏览器级别的数据处理。因为它不是一种通用语言，所以它有一组有限的库。
动态类型化: JavaScript 支持动态类型化，这意味着变量的类型是基于存储值定义的。例如，如果您声明了一个变量x，那么您可以存储一个字符串或一个数字类型的值。这就是所谓的动态打字。
**基于对象的语言:**JavaScript 是一种基于对象的脚本语言，提供字符串、数学、日期等内置对象。
Functional Style: 这意味着 JavaScript 使用了一种函数方法，甚至对象都是从构造器中创建的，每个构造器代表一个唯一的对象类型。
**平台无关:**这意味着 JavaScript 是平台无关的或者我们可以说是可移植的；这意味着您只需编写一次脚本，就可以随时随地运行它。一般来说，您可以编写您的 JavaScript 应用程序，并在任何平台或任何浏览器上运行它们，而不会影响脚本的输出。
基于原型: JavaScript 是一种基于原型的脚本语言。这意味着 javascript 使用原型而不是类。在 JavaScript 中，每个构造器都与一个原型对象相关联。这是一个有点混乱的概念，但是这样考虑，就像我们在 Java 中有一个类，它就像一个蓝图，然后我们为这个类创建对象(理解类、对象和 OOP 的概念)，在 JavaScript 中，我们定义对象原型，它用于创建其他对象。不要担心，如果你现在不明白这一点，你会明白这一点，因为你会随着教程的进展。
explored:javascript 是一种解释语言，意思是在 JavaScript 里面写的脚本是一行一行处理的，在执行之前是不会编译的(虽然这个变化比较慢，不同的浏览器会创建不同的 JavaScript 引擎)。这些脚本由 JavaScript 解释器解释，该解释器是网络浏览器的内置组件。
**异步:**可以用 JavaScript 异步做复杂的处理，这意味着整个页面都不用等待 JavaScript 的处理，一旦脚本处理完成，我们就可以轻松修改 HTML 代码来显示或隐藏数据。此外，我们还可以使用 JavaScript 向服务器发送异步 HTTP 请求，供服务器端处理。
作为一种脚本语言，JavaScript 具有各种优势，非常有用，下面列出了一些优势:
JavaScript 使网页更具交互性和动态性。
通过使用 JavaScript，您可以让您的网页立即向用户提供反馈，这样他们就不必重新加载页面。
您可以使用 JavaScript 根据用户如何与您的网页交互来执行动作，使用鼠标点击、表单提交、按钮点击等生成的事件。
JavaScript 甚至可以在向服务器发送数据之前，通过验证用户输入来节省服务器流量。
JavaScript 可以用来存储客户端 cookie在客户端存储数据，然后读取或删除。
JavaScript 可以用来进行异步 HTTP 调用从服务器加载数据。
JavaScript 也有一些限制，如下所示:
像 Java 和其他通用编程语言一样，JavaScript 不能编写多线程或多处理器代码。
核心 JavaScript 不能用于开发网络应用程序，尽管有一些像 NodeJS 这样的框架可以用于此。
JavaScript 只能在客户端使用**，即用于前端开发。**
JavaScript 在浏览器中处理，如果有人在自己的浏览器中禁用了 JavaScript，则不会处理任何 JavaScript 代码。因此，如果您正在使用 JavaScript 验证表单值，并且您的网站的任何用户在他/她的浏览器中关闭了 JavaScript，那么您的表单验证将停止工作。
JavaScript 为安全研究人员和黑客打开了许多门窗，让他们可以随意摆弄网页。
至此，您已经对 JavaScript 有了一个简单的介绍。在接下来的教程中，我们将涵盖 JavaScript 的所有基础知识，然后我们将继续讨论它的更复杂的部分。
原文：https://www.studytonight.com/javascript/javascript-features
JavaScript 是最流行的语言之一，在 web 开发中包含了许多特性。根据 Github，它是顶级编程语言之一，我们必须正确了解 JavaScript 的特性，才能理解它的功能。
一些特性是轻量级的、动态的、功能性的和可解释的。现在我们将讨论 JavaScript 的一些重要特性。
轻量级脚本语言
动态打字
面向对象编程支持
功能风格
独立于平台
基于原型的
解释语言
异步处理
客户端验证
浏览器中的更多控制
让我们详细看看所有这些特性，以便您能够理解它们。上面指定的一些特性是旧的 JavaScript 特性，而一些是新特性。
JavaScript 是一种轻量级脚本语言，因为它仅用于浏览器的数据处理。因为它不是一种通用语言，所以它有一组有限的库。此外，由于它只适用于客户端执行，也适用于 web 应用程序，因此 JavaScript 的轻量级特性是一个很好的特性。
JavaScript 支持动态类型，这意味着变量的类型是基于存储的值定义的。例如，如果你声明了一个变量x，那么你可以存储一个字符串或者一个数字类型的值或者一个数组或者一个对象。这就是所谓的动态打字。
为了理解这一点，在像 Java 这样的语言中，我们明确提到特定的变量将存储特定类型的数据，而在 JavaScript 中，我们在声明变量时不必提供数据类型。在 JavaScript 中，我们只需要在变量名前使用var或let关键字来声明一个变量，而不用担心它的类型。
从 ES6 开始，类和 OOPs 的概念更加细化。同样，在 JavaScript 中，JavaScript 中 OOP 的两个重要原则是对象创建模式(封装)和代码重用模式(继承)。虽然 JavaScript 开发人员很少使用这个功能，但它的存在让每个人都可以探索。
这意味着 JavaScript 使用一种函数方法，甚至对象也是从构造器创建的，每个构造器代表一个唯一的对象类型。此外，JavaScript 中的函数可以用作对象，也可以传递给其他函数。
这意味着 JavaScript 是独立于平台的，或者我们可以说它是可移植的；这意味着您只需编写一次脚本，就可以随时随地运行它。一般来说，您可以编写您的 JavaScript 应用程序，并在任何平台或任何浏览器上运行它们，而不会影响脚本的输出。
JavaScript 是一种基于原型的脚本语言。这意味着 javascript 使用原型而不是类或继承。在像 Java 这样的语言中，我们创建一个类，然后为这些类创建对象。但是在 JavaScript 中，我们定义了对象原型，然后可以使用这个对象原型创建更多的对象。
javascript 是一种解释语言，这意味着在 JavaScript 中编写的脚本是逐行处理的。这些脚本由 JavaScript 解释器解释，该解释器是网络浏览器的内置组件。但是现在浏览器中的许多 JavaScript 引擎，比如 chrome 中的 V8 引擎，使用的是 JavaScript 代码的及时编译。
JavaScript 支持 Promise，它支持异步请求，在异步请求中，请求被启动，JavaScript 不必等待响应，这有时会阻止请求处理。同样从 ES8 开始，JavaScript 中也支持异步函数，这些函数不一一执行，而是并行处理，对处理时间有积极的影响，很大程度上减少了处理时间。
这是一个可以在 JavaScript 中永远使用的特性，并且仍然被广泛使用，因为每个网站都有一个用户输入值的表单，为了确保用户输入正确的值，我们必须在客户端和服务器端进行适当的验证。JavaScript 用于实现客户端验证。
作为一种客户端语言，JavaScript 提供了许多功能，帮助开发人员在浏览器和服务器之间划分处理，从而通过在浏览器本身进行基本处理、验证、使用 cookies 临时保存数据等来减轻服务器的负载。
除了所有这些特性之外， JavaScript 还提供了以下有用的特性:
检测客户端的浏览器类型、名称、操作系统版本等信息进行分析。
丰富的内置库，具有许多用于验证、数据类型转换、字符串操作等的有用功能。
这是一种以对象为中心的语言，窗口对象是 JavaScript 中最重要的对象，它还支持多态性。
支持常用的复杂数据类型，如数组、地图、列表等。在内置功能的支持下对其进行操作。
另读:-Java vs JavaScript:Java 和 JavaScript 有什么区别？
原文：https://www.studytonight.com/javascript/include-javascript-in-html
可以使用 HTML <script>标签将 JavaScript 代码插入到 HTML 文件中。当网页浏览器中加载了带有<script>标签的 HTML 文档时，浏览器会将包含在<script> 标签中的内容作为 JavaScript 代码进行处理。
<script> 标签可以包含脚本语句，也可以引用外部 JavaScript 文件。<script> 标签提供了一个 src 属性，允许我们添加对外部脚本文件的引用。
JavaScript 是大多数浏览器的默认脚本语言。
<script> 标签属性及其用途以下是使用<script>标签的基本语法:
<script src="JS_FILE_URL" type="..."></script>
同样，我们也可以使用<script>标签直接添加 JavaScript 代码，如下所示:
<script type="text/javascript">
// JS code here
</script>
脚本标签有五个属性，如下表所示:
| 属性 | 值 | 描述 |
| async |
True
Wrong
| 它指定脚本是否应该异步执行。 |
| type |
ā412/ecmascript
ā412/JavaScript
王路/ecmascript
王路/JavaScript
ā381/VBScript
| 它指定脚本的多用途互联网邮件扩展(MIME)类型。一般使用文本/javascript 值。 |
| charset | 字符集 | 它指定脚本中使用的字符编码类型 |
| defer |
True
Wrong
| 它指定浏览器是否继续解析网页。 |
| src | 统一资源定位器 | 它指定包含脚本的文件的统一资源定位符。 |
现在我们已经知道了用于在网页中包含 JavaScript 代码的
您可以在 HTML 网页中使用脚本标记，以下列方式添加 JavaScript 代码:
在头元素(<head>…</head>)
在体内元素(<body>…</body>)
包含外部 JavaScript 文件
让我们一个接一个地介绍所有这些，并附上代码示例来帮助您理解它们。
<head>元素中用 JavaScript 代码编写<script> 标签让我们把脚本标签放在 HTML 头元素里面。放置在头元素中的脚本会加载到网页中，并在任何定义的事件发生时执行。
下面给出的代码展示了如何使用 HTML 文档的<head>元素中的<script>标签来添加一些 JavaScript 代码。
<body>元素中用 JavaScript 代码编写<script> 标签您也可以在 HTML 文档的正文元素中放置一个脚本标签。当网页开始在 web 浏览器中加载时，body 元素中的脚本标记会运行。下面是展示如何在 HTML 文档的<body>元素中放置<script>元素的代码:
每当我们在 HTML 文档中放入冗长的 JavaScript 代码时，都会影响 HTML 文档的可读性和可维护性。此外，有时需要在几个网页中使用相同的 JavaScript 代码。在这种情况下，我们可以将 JavaScript 代码存储在一个外部文件中，并用保存该文件。js 分机。所有的 JavaScript 代码文件都应该有一个扩展名**。JS** 别的都没有。
要链接外部文件，我们可以在<script> 标签的 src 属性中提供它的位置(URL)。
我们可以通过这种方式将外部 JavaScript 文件添加到我们的 HTML 文件中:
<script src="jsfile.js" type="text/javascript"></script>
在上面的代码示例中，type属性是可选的。
使用外部 JavaScript 文件有它自己的优点。
它将 HTML 和 JavaScript 代码分开，使代码看起来干净易懂。
外部 JavaScript 代码可以在多个 HTML 网页中重用。
外部 JavaScript 代码可以缓存在浏览器中。一旦被缓存，浏览器就不会一次又一次地加载 JavaScript 文件，而是会使用它的缓存版本。这将使您的网页加载速度更快。
下面给出的代码向您展示了如何将外部 JavaScript 文件与 HTML 文档链接起来。
<html>
<head>
<title>my first JavaScript</title>
<script src="jsfile.js"></script>
</head>
<body>
<p id="script">this is the old text</p>
<button type="button" onclick="text()">Click this button to use JavaScript</button>
</body>
</html>
存储在名为 jsfile.js 的文件中的 JavaScript 代码
function text()
{
document.getElementById("script").innerHTML = "This text has been written inside the JavaScript.";
}
在上面的代码中，我们已经在 JavaScript 中定义了一个简单的函数，我们将在接下来的教程中了解 JavaScript 函数。
在大型项目中，JavaScript 代码可能非常庞大，每个 HTML 页面中可以包含多个使用多个<script>标签的外部 JavaScript 文件。是的，我们可以使用多个<script>标签来包含任意多的外部 JavaScript 文件。
例如，如果我们有 3 个 JavaScript 文件，名称分别是 one.js 、 two.js 和 three.js ，我们必须将所有这些都包含在我们的 HTML 页面中。在这种情况下，我们将使用 3 个<script>标签，
<script src="one.js" type="text/javascript"></script>
<script src="two.js" type="text/javascript"></script>
<script src="three.js" type="text/javascript"></script>
现在的问题是，我们应该把上面的代码放在我们的 HTML 页面的什么地方。是应该放在 HTML 代码的 HEAD 部分，还是应该放在 HTML 页面的 BODY 部分？
嗯，如果我们把它放在 HEAD 部分，那么当我们的网页加载的时候，所有的 JavaScript 文件都会先加载，这样会减慢我们的网页加载，这是不好的。
所以，我们应该加载一个网页中使用的外部 JavaScript 文件，最后的意思是要么就在关闭 </body> 标签之前，要么就在关闭 </body> 标签之后，这样首先加载我们完整的网页，然后加载外部 JavaScript 文件。这样，即使我们有大的 JavaScript 文件，我们的网页也不会因此而变慢。
<html>
<head>
...
</head>
<body>
<!-- body of HTML page -->
</body>
<script src="one.js" type="text/javascript"></script>
<script src="two.js" type="text/javascript"></script>
<script src="three.js" type="text/javascript"></script>
</html>
因此，本教程涵盖了将 JavaScript 代码包含到 HTML 网页中的所有方法以及最佳实践。在下一个教程中，我们将学习如何从 JavaScript 代码中获得输出，这样我们就可以开始进行一些编码，并看到 JavaScript 代码正在运行。
原文：https://www.studytonight.com/javascript/javascript-syntax
JavaScript 有自己的语法和编程风格。语言的语法定义了用该语言编写代码的规则，什么是正确的方式，什么不是。在本教程中，我们将学习用 JavaScript 编写代码的基本语法。
JavaScript 使用自己的语法来创建变量、函数、语句等。但是如果你有任何编程语言的知识，比如 C、C++或 Java，那么你理解 JavaScript 的语法就不会很困难。
分号用于终止 JavaScript 代码语句。代码语句是一行代码，我们可以通过添加一个分号来标记每一行代码的结尾。在 C、C++、Java 等语言中。我们在每个代码语句的末尾使用分号。
在 JavaScript 中，语句后面通常跟一个分号(;)，表示语句结束。
但是没有必要在语句末尾使用分号 ( ;)。
下面的示例显示了 JavaScript 语句的两个有效声明:
var var_name = value;
var var_name = value
在本例中，第一条语句用分号结束，而第二条语句不用分号结束。这两个语句在 Javascript 中都有效。
JavaScript 解释器忽略脚本中出现的制表符、空格和换行符，字符串和正则表达式除外。
下面我们有一个简单的代码示例，其中我们在每个代码语句后添加了一个额外的换行符，然后代码中没有任何空格。两者在 JavaScript 中都是可以接受的。
var i = 10;
var j = 20;
var a = i+j; var b = i-j;
您可以通过使用多个空格来编写更干净、更易读的 JavaScript 代码，因为 JavaScript 会忽略多个空格。
JavaScript 是一种区分大小写的语言，这意味着所有的关键字、函数名、变量名或标识符都应该用一致的字母大小写键入。一般来说，文字应该以一个小字母开头，为了组合长名字，我们也可以使用驼色的大小写。
让我们举个例子，在下面的代码中，所有三个变量都是不同的，因为第一个变量是小写的，第二个变量以大写字母开头，第三个变量是大写的。
var marks;
var Marks;
var MARKS;
在驼色字体中，除了单词的起始字母外，所有字母都很小，第一个字母总是很小。因此，如果我想将一个变量或函数命名为 myfirstvariable ，驼色的样式将是 myFirstVariable 。
注释是指在执行程序时被忽略的程序中的文本或代码。注释是用来在代码中提供附加信息**，比如代码的描述。在代码中添加注释被认为是的好做法。**
类似于 C、C++等其他编程语言。，JavaScript 还定义了两种类型的注释。
单行注释
多行注释
让我们举一个例子，了解如何在我们的 JavaScript 代码中添加这些内容。
<html>
<head>
<title>JavaScript Comment Example</title>
<script>
// This is an single line comment and it will not be executed
/*
This is a multiline comment and everything written
inside this block will not be executed.
*/
var x = 10;
var y = 2*x;
</script>
</head>
<body>
<!-- Some HTML code - This is HTML comment -->
</body>
</html>
在任何编程语言中，语句被称为指令，这些语句被设置为由计算机作为计算机程序执行。
JavaScript 代码只不过是这些编程语句的列表，这些语句是值、运算符、表达式、关键字和注释的集合。
<html>
<head>
<title>JavaScript Statement</title>
</head>
<body>
<script>
document.write("this is a text") ; // JavaScript statement
var a = 10+20; // Another Statement
document.write(a);
</script>
</body>
</html>
在本教程中，我们借助示例解释了基本 Javascript 语法及其用法。这将有助于您对编写 JavaScript 代码有一个基本的了解。我们将在接下来的教程中学习更多不同的 JavaScript 特性，如定义变量、使用运算符、定义函数，并将在相应的教程中介绍它们的语法。
原文：https://www.studytonight.com/javascript/output-in-javascript
我们可以在一个网页上用 4 种简单而不同的方法获得 JavaScript 输出，下面给出了这些方法。我们可以根据应用需求使用它们。在本教程中，我们将学习从 JavaScript 代码中获取输出的以下四种不同方式，就像我们在 C 语言中使用printf()，在 C++中使用cout等一样。
使用innerHTML属性
使用document.write()方法
使用警告框
通过登录控制台
我们将借助示例来介绍所有这些内容。此外，如果您不理解这些语法，也不要担心，我们将在接下来的教程中详细介绍这些语法。
innerHTML属性JavaScript 允许您使用 innerHTML 属性写入 HTML 元素。我们可以添加任何我们想要的东西，它可以是一条文本消息，一些 HTML 元素或其他任何东西。
要做到这一点，首先你需要为你想要通过 JavaScript 代码访问的 HTML 元素提供一个特定的 Id。
要访问一个 HTML 元素，JavaScript 使用document.getElementById(id)方法，其中 id 是 HTML 标签的id属性的值。
举个例子，在这个例子中，id属性用来标识 HTML 元素，innerHTML属性用来给它设置内容。
这样，如果您正在编写 JavaScript 代码来进行一些处理，或者如果您有任何逻辑，您可以轻松地在 HTML 网页中显示输出。
document.write()的 JavaScript 输出JavaScript 允许您使用document.write()方法将任何输出写入到 HTML 网页中。通过使用这种方法，您可以直接将输出写入 HTML 页面。
write()方法将 HTML 表达式或 JavaScript 代码写入文档。这种方法主要用于测试目的。
举个例子，在这个例子中，我们使用的是document.write()方法，用来直接写入网页。
某些网站会在您访问它们或执行某些操作时向您发出警告消息，您会在警告框中看到输出消息。你也可以用 JavaScript 让你的网页发送提醒信息通知用户一些事情，要使用这个功能你需要使用window.alert()方法。
让我们举一个例子，在这个例子中，我们使用警报框来编写一条消息并展示给用户。
JavaScript 还允许您创建控制台日志，可以在浏览器的开发人员工具(Console) 中看到这些日志，以便进行调试。写在控制台日志中的语句将被执行，但不会显示在浏览器中，而是显示在浏览器的控制台中。
用于控制台记录的功能是console.log(SOME-EXPRESSION-OR-STRING)，可以用来记录浏览器控制台中的任何内容。
在 Chrome 浏览器中打开开发者工具，在 Windows 中按 F12，在 MacOS 中按命令+选项+ I。下图显示了它的外观:
让我们举个例子来看看在控制台中打印日志的 JavaScript 代码:
<html>
<head>
<title>JavaScript console example</title>
<script>
console.log(2+3);
</script>
</head>
<body>
<!-- HTML body -->
</body>
</html>
5
在本教程中，我们学习了如何使用 JavaScript 以各种不同的方式向用户显示输出。所有的例子都包括在内，以便更好地理解这个主题。
原文：https://www.studytonight.com/javascript/javascript-variables
变量的名称唯一标识变量，
值是指存储在变量中的数据，并且
换句话说，我们可以说变量是一个可以用来存储值的容器，在使用它之前你需要声明一个变量。
在 JavaScript 中，var关键字用于声明一个变量。另外，从 ES6 开始，我们也可以使用let关键字来声明变量。
以下是声明变量时要记住的一些规则。
变量名不能包含空格。
变量的首字母可以是[a-z，A-Z]，美元符号($)或下划线(_)，名字首字母后任意数字[0-9]都可以。
变量名区分大小写。比如:var a和var A都不一样。
我们可以使用var或let关键字来定义变量。
我们不能在 JavaScript 中使用保留字作为变量的名称。
以下是声明变量并为其赋值的语法。
var variable_name;
// or
let variable_name;
我们也可以不用分号来定义变量。此外，当我们必须定义多个变量时，我们可以这样做:
// declaring 3 variables together
var x, y, z;
正如我们已经了解到的，动态类型化是一个 JavaScript 特性，所以我们不必担心指定我们将存储在变量中的值的数据类型。JavaScript 会自动检测到这一点。
现在让我们举一个简单的例子，我们将声明一个变量，然后给它赋值。
var employeeName; // Declaring a variable
var employeeName = "Rahul"; // Declaring and assigning at the same time
您可以在声明变量时初始化变量或为变量赋值，也可以只声明变量并在以后初始化它。
JavaScript 支持两种类型的变量，它们是:
局部变量
全局变量
您可以根据应用程序中的要求使用它们。让我们通过例子来了解 JavaScript 局部变量和 JavaScript 全局变量。
JavaScript 局部变量是在代码块或函数体内部或循环体内部声明的变量**，它在代码块或函数内有作用域。简单来说，当在代码块或函数体中声明和定义时，局部变量的范围在左大括号和右大括号{ }之间。**
从 ES6 开始，在声明局部变量时建议使用let关键字。
让我们举个例子。
JavaScript 全局变量是一个在脚本中任何地方声明的变量**，并且有完整脚本执行的范围。全局变量不在任何块或函数中声明，但可以在任何函数或代码块中使用。**
建议我们使用var关键字来声明全局变量，从 ES6 开始。
举个例子吧。
在本主题中，我们学习了 JavaScript 变量的概念以及 JavaScript 变量的两种类型，即局部变量和全局变量。我们还介绍了通过使用var关键字和let关键字来声明变量的两种不同语法，以及示例。
let关键字原文：https://www.studytonight.com/javascript/javascript-let-keyword
在 JavaScript 中，let是一个关键字，用于声明一个具有块作用域的局部变量。与 var关键字声明全局范围变量不同的是， ECMAScript2016 (ES6)引入let关键字来定义局部范围变量，因为定义全局范围内的所有变量会导致在编写大型 JavaScript 应用程序时出现很多问题。
它允许您声明有限范围变量，这些变量不能在范围之外访问。
让我们举个例子来理解let关键字在 JavaScript 中已经有var关键字创建变量时的需求。假设您正在编写一个包含多个循环、函数和变量的大型 JavaScript 代码，像往常一样，在所有循环中，您为计数器使用了相同的变量名i，并且您使用了var关键字来定义变量i，现在将发生的是，变量 I 将在整个脚本中携带其更改的值，因为它是一个全局变量，如果您忘记在任何地方将其重新初始化为零，它将导致错误，并且您的代码将会中断。你将不得不付出额外的努力来寻找错误。
然而，如果您使用let关键字定义计数器变量i，其范围将仅限于循环，并且当第一个循环结束时，计数器变量也将结束。这样，使用 let 关键字更有意义，因为我们在一般编程实践中使用很少的全局变量和许多局部变量。
让在全局声明时不创建窗口对象的属性。
let关键词:语法使用let关键字定义变量的语法与var关键字相同。
let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN];
如上面的语法所示，是的，我们可以使用单个let关键字来定义多个变量，但是这并不新鲜，我们也可以使用var关键字来定义。
我们来看几个例子，看看这个let关键词是怎么用的，怎么用的。
let:如果我们已经使用let关键字定义了变量，那么在块 { }内部声明的 JavaScript 变量不能从块外部访问。请参见下面的示例:
{
let x = 2;
}
alert(x) // not accessible
未捕获的引用错误:x 未定义
在上面的例子中，变量只能在块内部访问。请看下面的例子，可以看到:
{
let x = 2;
alert(x) // accessible
}
Two
let:它更适合于循环，在循环中，我们声明局部变量用作计数器。因此，变量不会与在循环外编写的代码冲突。请参见下面的示例:
let i = 5;
for(let i = 0; i < 10; i++) {
// code
}
alert(i); // print 5
5
正如您在输出中看到的，它显示了 5 ，即使循环将i变量的值增加到了 10 ，这是因为for循环中的局部变量i的范围以循环本身结束，因此在循环之外是不可访问的。
let:我们知道，let关键字声明了局部范围变量。所以在函数内部声明的变量将保留在函数范围内。如果我们试图从函数外部访问这样的变量，我们会得到一个错误。请参见下面的示例:
function show() {
let amount = 2500; // Function Scope
}
alert(amount) // not accessible
未捕获参考错误:金额未定义
let vs var关键词我们已经在介绍中介绍了两者的区别，但是让我们看一些代码示例来看看两者之间的区别。
let和var，这两个关键词都是用来声明变量的，但主要区别是声明变量的范围。
使用var在块内声明的变量可以在块外访问，因为它具有全局范围，但是使用let关键字声明的变量具有局部范围。让我们看一个例子:
{
let amount = 2500; // block Scope
var withdraw = 2000; // global scope
}
document.write(withdraw) // accessible
document.write(amount) // not accessible
2000
未记录参考错误:金额未定义
let关键词示例:让我们再举一个例子，在这个例子中，我们将编译上面的所有例子，看看使用let关键字定义的变量是如何工作的。
如您所见，在顶部定义的变量x具有全局范围，并且在脚本结束之前将保持可访问，而在代码块和函数内部定义的变量x具有范围，直到代码块或函数结束。
在本教程中，我们已经介绍了用于在 JavaScript 中定义变量的 let 关键字。它是在 ECMAScript2016 中引入的，建议用于定义变量，而不是使用 var 关键字创建 JavaScript 变量。
原文：https://www.studytonight.com/javascript/javascript-literals-and-keywords
JavaScript 字面值是不可更改的固定值，您不需要指定任何类型的关键字来编写字面值。在编程中常使用字面值来初始化变量，变量的名称是字符串字面值。
JavaScript 字面值可以是数字、字符串、浮点值、布尔值甚至是对象。简单来说，任何值都是字面值，如果你写一个字符串**“study now”**就是字面值，任何像 7007 这样的数字都是字面值，等等。
JavaScript 支持下面列出的各种字面值:
数值字面值
浮点字面值
布尔字面值
字符串字面值
数组字面值
正则表达式字面值
对象字面值
它可以用十进制(以 10 为基数)、十六进制(以 16 为基数)或八进制(以 8 为基数)格式表示。
十进制数值由一系列数字(0-9)组成，没有前导 0(零)。
十六进制数字字面值包括数字(0-9)、字母(a-f)或(A-F)。
八进制数字字面值包括数字(0-7)。数字字面值中的前导 0(零)表示八进制格式。
120 // decimal literal
021434 // octal literal
0x4567 // hexadecimal literal
它包含一个小数点(。)
分数是浮点字面值
它可能包含一个指数。
6.99689 // floating-point literal
-167.39894 // negative floating-point literal
布尔字面值仅支持两个值，即真或假。
true // Boolean literal
false // Boolean literal
字符串字面值是包含在单引号(')或双引号(")中的零个或多个字符的组合。
"Study" // String literal
'tonight' // String literal
字符串字面值也可以有一些特殊的字符，如下表所示。
字符串特殊字符:
| 字符 | 描述 |
|---|---|
\b | 它代表退格。 |
\f | 它代表一个表单源。 |
\n | 它代表一条新的线。 |
\r | 它代表回车。 |
\t | 它代表一个标签。 |
\v | 它代表一个垂直标签。 |
\' | 它代表撇号或单引号。 |
\" | 它代表一个双引号。 |
\\ | 它表示反斜杠字符。 |
\uXXXX | 它表示由四位十六进制数指定的 Unicode 字符。 |
数组字面值是一个由零个或多个表达式组成的列表，这些表达式表示括在方括号([])中的数组元素。
每当您使用数组文本创建数组时，它都会使用方括号中指定的元素进行初始化。
var emp = ["aman","anu","charita"]; // Array literal
正则表达式是一种模式，用于匹配某些文本中的字符或字符串。它是通过将正则表达式字符串括在正斜杠之间来创建的。
var myregexp = /ab+c/; // Regular Expression literal
var myregexp = new RegExp("abc"); // Regular Expression literal
它是用花括号({})括起来的键值对的集合。键值对由逗号分隔。
var games = {cricket :11, chess :2, carom: 4} // Object literal
每种编程语言都有自己的关键词和保留词。创建每个关键字是为了执行特定的任务，编译器或解释器已经知道内置关键字和保留字。JavaScript 支持下表中列出的一组丰富的关键字。
| 关键词 | 描述 |
|---|---|
| 为 | for 关键字用于创建 for 循环。 |
| 做/当 | do 和 while 这两个关键字都用于在 JavaScript 中创建循环。 |
| 如果/否则 | if 和 else 关键字用于创建条件语句。 |
| 继续 | continue 关键字用于恢复循环。 |
| 破裂 | 它用来打破循环。 |
| 功能 | function 关键字用于声明函数。 |
| 调试器 | 它用于调用调试器函数 |
| 班级 | class 关键字用于声明类。 |
| 返回 | Return 关键字用于从函数中返回函数。 |
| 漂浮物 | 它用于声明浮点类型变量。 |
| （同 Internationalorganizations）国际组织 | 它用于声明 int 类型变量。 |
| 私人的 | 它是一个访问修饰符。 |
| 公众的 | Public 是一个访问修饰符，它赋予类公共访问权。 |
| 定义变量 | Var 用于声明变量。 |
| 转换 | 开关创建各种语句块，并根据条件或情况只在块上执行。 |
| 尝试/捕捉 | 它为语句的错误处理创建一个块。 |
注意: 在定义任何函数或变量的名称时，不应使用任何关键字或保留字。
在本教程中，我们学习了 JavaScript 字面值、不同类型的字面值以及示例。我们还介绍了 JavaScript 关键字和保留字。
原文：https://www.studytonight.com/javascript/javascript-data-types
JavaScript 数据类型用于标识脚本执行期间存储在变量中的数据类型。因为我们已经指定了动态类型 JavaScript 特性，所以我们在声明变量时不必指定它的数据类型。
所以 JavaScript 数据类型基本上是为了识别目的，知道变量中存储了什么，什么时候存储的，而不是之前。
动态类型语言是在运行时推断数据类型的语言。它允许在编程过程中为变量存储不同类型的值。
下面我们有一个基本的例子，我们用一个数值定义了一个变量，然后更新它来存储一个字符串值。所以 JavaScript 允许这样做。
var x = 5; // x is a number
x = "studytonight"; // x is string here.
JavaScript 广泛支持三种类型的数据类型，它们是:
原语类型
参考类型
特殊数据类型
让我们一个接一个地讨论每一个，同时看看哪个类别有所有的数据类型。
JavaScript 原语数据类型可以进一步分为以下类型:
字符串数据类型
布尔数据类型
数字数据类型
这些是最常见的数据类型，分别用于存储字符序列、真/假和数值。让我们用例子一个接一个地讲述它们。
每当我们在单引号或双引号内写一个字符或字符序列时，它就变成了字符串。比如“今晚学习”。
我们可以使用单引号或双引号来创建字符串类型值。
var str = "Ferari F60"; // string using double quotes
var str1 = 'Volvo S60'; // string using single quotes.
要将单引号作为字符串的一部分，我们应该使用双引号将字符串值括起来，反之亦然。如果您想在字符串中包含单引号，而该字符串是通过仅用单引号括起来定义的，在这种情况下，我们必须使用反斜杠来转义单引号，同样，我们也可以在字符串值中转义双引号。
让我们看一个例子:
var str1 = "Ferari's F60"; // Output: Ferari's F60
var str2 = 'Volvo "S60"'; // Output: Volvo "S60"
var str3 = 'Ferari\'s F60'; // Output: Ferari's F60
我们已经详细介绍了 JavaScript 字符串，也介绍了 JavaScript 中的各种字符串方法。
布尔数据类型用于基于条件的编程。它可以有两个值，或者真或者假。
var isOn = true; // bulb is on
var isOn = false; // bulb is off
我们在比较两个数字时会得到布尔值，例如:
doument.write(4 < 2) // false
doument.write(4 > 2) // true
我们将在 JavaScript If else 流控制教程中看到这一点。
数字数据类型可以有小数点，也可以没有小数点，可以有负值和正值。
var x = 45; // Number without decimal point
var y = 45.90; // Number with decimal point - floating point
var z = -10; // Number with negative value
JavaScript Number 数据类型还表示一些特殊的值，如Infinity、-Infinity和Nan。当正数被零除时(这是运行时错误的一种常见情况)，在 JavaScript 中它被表示为Infinity。同样，当负数被零除时，我们会得到-Infinity。
var a = 100;
var b = -100;
var c = 0;
alert(a/c); // Infinity
alert(b/c); // -Infinity
而Nan的意思是不是一个数字，如果我们试图在一个数值和一个非数值之间执行任何操作，比如字符串，我们会得到这个作为输出。
var a = "Studytonight";
var b = 7;
alert(a/b); // Nan
这些数据类型可以保存值和更复杂实体的集合。它进一步分为对象、数组和函数。
对象数据类型
数组数据类型
函数数据类型
在 JavaScript 中，对象数据类型用于存储数据集合。对象的属性被写成键:值对，用逗号和隔开，用花括号 {}括起来。
键(名称)必须始终是字符串，但是值可以是任何数据类型。这非常类似于许多编程语言中的映射数据结构，它也像这样存储键值对。
var name = { }; // It will create an empty object.
var emp = {firstname="ram", lastname="singh", salary=20000};
我们已经在单独的教程中用例子介绍了 JavaScript 对象。
JavaScript Array 数据类型写在一对方括号[]内，用于存储相同数据类型的多个值，如字符串、数字等。JavaScript 数组中的项目也是以逗号分隔的方式编写的。
数组中的每个元素都有一个数字位置，称为其索引。数组索引从 0 开始，或者我们可以说数组索引是从零开始的，所以第一个数组元素是arr[0]而不是arr[1]。
让我们举一个 JavaScript 数组的例子:
// Creating an Array
var cars = ["Ferrari", "Volvo", "BMW", "Maseratti"];
我们已经在单独的教程中用例子介绍了 JavaScript 数组。
你一定在想，函数怎么可能是数据类型。但是在 JavaScript 中函数作为一种数据类型，可以分配给一个变量。JavaScript 函数只不过是代码块中的一组语句，用于执行特定的操作这个数据类型本质上是可调用的。因此，您可以随时在程序中的任何地方调用它。
因为函数是对象，所以可以将它们赋给一个变量。
函数可以存储在变量、对象和数组中。函数也可以作为参数传递给其他函数，也可以从其他函数返回。
var welcome = function() {
return "Welcome to StudyTonight!";
}
我们已经在单独的教程中用例子介绍了 JavaScript 函数。
JavaScript 也有一些特殊的数据类型，尽管将被调用的函数视为数据类型对您来说已经很特殊了。但是还有两个。
未定义的数据类型
空数据类型
让我们一个接一个地讨论它们。
当一个变量刚刚被声明并且没有被赋予任何值时，它的值为未定义。是的，未定义在 JavaScript 中是一个有效的数据类型，它只能有一个值未定义。
我们甚至可以在做一些比较时使用这个值。让我们举个例子:
var a; // Undefined
alert(a == undefined); // returns true
JavaScript Null 数据类型用于表示无值。它不类似于未定义，也不类似于空值或零值。空数据类型意味着变量已经定义，但它不包含任何值。
Null 数据类型只能有一个值，即 null 。让我们举一个例子:
var a = null;
alert(a); // Output will be null
typeOf运算符JavaScript 中的typeOf运算符可以用来检查任何变量的数据类型。虽然它是一个运算符，但我们在这里提到它，因为它通常用于检查任何变量的数据类型。
让我们举几个例子来看看这是如何工作的:
// Function datatype
var welcome = function() {
return "Welcome to StudyTonight!";
}
typeOf welcome; // function
var a = null;
typeOf a; // null
// Array datatype
var cars = ["Ferrari", "Volvo", "BMW", "Maseratti"];
typeOf cars; // array
您也可以尝试其他数据类型。
在本主题中，我们解释了 javascript 中使用的变量的数据类型。所有的主题和副主题都用实例来解释，这样我们可以更好地理解主题。
原文：https://www.studytonight.com/javascript/javascript-operators
在本教程中，我们将学习 JavaScript 运算符，JavaScript 中各种不同类型的运算符，并将有几个例子来看看它们的工作原理。
运算符是为特殊任务或操作保留的符号。运算符用于对操作数执行操作。操作数可以是变量或数值或字符串。一个运算符可以处理一个或多个操作数。
运算符对于通过操作相应的变量来修改或更改数据非常有用。例如，有两个变量a和b，我们希望将这两个变量的值相加，为此，我们可以使用算术运算符+来执行这两个变量的相加。
JavaScript 支持一组丰富的运算符。这些操作符执行特定的任务，每个操作符都有不同的属性。操作员列表如下:
算术运算符
关系运算符
按位运算符
逻辑运算符
赋值运算符
字符串运算符
让我们逐一介绍上述每一种运算符类型，并看看 JavaScript 中支持的不同运算符。
JavaScript 算术运算符用于执行算术运算，如加法、减法、**乘法、**等。下表列出了所有的算术运算符。
| 操作员 | 描述 | 例 |
|---|---|---|
+ |
Add two numbers
to connect two strings
|
45+20 // output 65
"My"+"Name" // MyName
(也可用于字符串连接) |
| **-** |
minus two numbers
means negative number
|
45-20 // output 25
|
| * | 将两个数字相乘 |
20*5 // output 100
|
| / | 将两个数相除 |
45/10 // output 4.5
|
| % | 将两个数相除，然后返回余数 |
45%10 // output 5
|
| ++ | 将该值增加 1 |
a = 10
a++; // output will be 11
|
| -- | 将该值减 1 |
x = 9
x--; // output will be 8
|
这些运算符用于在两个操作数之间进行比较。我们将在介绍JavaScript if else Flow Control时使用这些操作符。
| 操作员 | 描述 | 例 |
|---|---|---|
== | 如果两个操作数相等，则返回真，否则返回假。 |
45==10 // output false
|
| != | 如果两者不相等，则返回真，否则返回假。 |
45!=10 // output true
|
| === | 是一个严格相等的算子。如果类型转换时操作数严格相等(相同的值和相同的数据类型)，则返回真否则返回假。 |
3===3 // output true
|
| !== | 如果该运算符两侧的操作数不相等/不是同一类型，则返回 true 。 |
3!=='3' // output false
|
| > | 如果左侧操作数大于右侧操作数，则返回真，否则返回假。 |
45>10 // output true
|
| >= | 如果左侧操作数大于或等于右侧操作数，则返回真，否则返回假。 |
45>=10 // output true
|
| < | 如果左侧操作数小于右侧操作数，则返回真，否则返回假。 |
10<45 // output true
|
| <= | 如果左侧操作数小于或等于右侧，则返回真，否则返回假。 |
45<=10 // output false
|
JavaScript 支持以下对操作数执行按位运算的按位运算符。
| 操作员 | 描述 | 例子 |
|---|---|---|
&(与) | 如果两位都为 1，则将每个位设置为 1 |
5&1 // returns 1
0101&0001 // returns 1
|
| |(或) | 如果两个位中的一个为 1，则将每个位设置为 1 |
5|1 // returns 5
0101 | 0001 // returns 5 in decimal or 65 in octal
|
| ^(异或) | 如果两位中只有一位为 1，则将每个位设置为 1。 |
5^1 // returns 4
0101^0001 // returns 4 in decimal or 64 in octal
|
| ~(否) | 反转所有位 |
~5 // output 6
~0101 // output 66 in octal
|
| <<(零填充左移位) | 通过从右边压入零向左移动，让最左边的位脱落 |
5<<1 // returns 10
0101<<1 // returns 10 in decimal and 130 in octal
|
| >>(带符号填充右移) | 通过从左边推入最左边位的副本来向右移动，并让最右边的位脱落。 |
5>>1 // returns 2
0101>>1 // returns 2
|
| >>>(零填充右移) | 通过从左边压入零向右移动，并让最右边的位脱落 |
5>>>1 // returns 2
0101>>>1 // returns 2
|
逻辑门的功能在 JavaScript 中用作逻辑运算符。这些运算符也用于控制流。
| 操作员 | 描述 | 例 |
|---|---|---|
&& | 只有当两个操作数都为真时，它才返回真，否则返回假 |
true&&false // returns false
|
| || | 如果任一操作数为真，则返回真。当两个操作数都为假时，它返回假 |
true||false // returns true
|
| ! | 否定操作数，如果操作数为假则返回真，反之亦然 |
!true // returns false
|
这些是在给变量赋值时使用的运算符。
| 操作员 | 描述 | 例 |
|---|---|---|
= | 它将值赋给左侧变量。 |
x = 90;
|
| += | 它将右侧操作数与左侧操作数相加，然后将结果赋给左侧操作数。 |
x = 45;
x += 20; // x = 65
|
| -= | 它从左侧操作数中减去右侧操作数，然后将结果分配给左侧操作数。 |
x = 45;
x -= 10; // x = 35
|
| *= | 它将右侧操作数乘以左侧操作数，然后将结果赋给左侧操作数。 |
x = 45;
x *= 10; // x = 450
|
| /= | 它将左侧操作数除以右侧操作数，并将结果赋给左侧操作数。 |
x = 45;
x /= 10; // x = 4.5
|
| %= | 它将左侧操作数除以右侧操作数，然后将余数赋给左侧操作数。 |
x = 45;
x% = 10; // x = 5
|
运算符优先级决定运算符的求值顺序。具有较高优先级的运算符首先被求值。例如，表达式(3+4*5)返回 23 ，因为乘法运算符(*)的优先级高于加法运算符(+)。因此*必须先评估。
运算符关联性决定了处理具有相同优先级的运算符的顺序。比如赋值运算符是右关联，可以写a=b=5，用这个语句，给a和b赋值 5 。
下表显示了运算符的优先级和关联性。在这个表格中，优先级是从下到上的，也就是说，位于底部的项目优先级较低，当我们移动到表格顶部时，优先级会增加。
| 操作员类型 | 操作员(符号) | 关联性 |
|---|---|---|
| 成员 | 。[] | 从左向右 |
| 新的 | 新的 | 从右向左 |
| 函数调用 | () | 从左向右 |
| 增量 | ++ | |
| 减量 | - | |
| 逻辑非 | ！ | 从右向左 |
| 按位非 | ~ | 从右向左 |
| 一元+ | + | 从右向左 |
| 一元否定 | - | 从右向左 |
| 类型 | 类型 | 从右向左 |
| 空的 | 空的 | 从右向左 |
| 删除 | 删除 | 从右向左 |
| 增加 | * | 从左到右 |
| 分开 | / | 从左到右 |
| 系数 | % | 从左到右 |
| 添加 | + | 从左到右 |
| 减法 | - | 从左到右 |
| 逐位移位 | <<>>>>> | 从左到右 |
| 有关系的 | <<=>>= | 从左到右 |
| 在 | 在 | 从左到右 |
| 实例 | 实例 | 从左到右 |
| 平等 | ！！ | 从左到右 |
| 按位“与” | & | 从左到右 |
| 按位异或 | ^ | 从左到右 |
| 按位或 | | | 从左到右 |
| 逻辑与 | && | 从左到右 |
| 逻辑或 | || | 从左到右 |
| 有条件的 | ？： | 从右向左 |
| 作业 | =+=-=*=/=%=<<=>>=>>>=&==|= | 从右向左 |
| 逗号 | , | 从左到右 |
下面我们有一个真实的例子，其中我们使用了上面指定的一些操作符。
在本主题中，我们解释了 JavaScript 运算符及其在 JavaScript 中的用法。运算符是任何编程语言的一个非常重要的组成部分，因为它们是执行操作所必需的，用于条件、比较等。