JS：语法

JavaScript值

JavaScript语句定义两种类型的值：混合值和变量值。混合值被称为字面量，变量值被称为变量

字面量

书写混合值最重要的规则是：

1、写数值有无小数点均可

2、字符串是文本，由双引号或单引号包围

例1：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数值</h2>
<p>写数值有无小数点均可。</p>
<p id="demo"></p>
<p id="demo_1"></p>

<script>
document.getElementById("demo").innerHTML = 15.90;
document.getElementById("demo_1").innerHTML = 'Bill Gates';
</script>

</body>
</html>

JavaScript变量

1、JavaScript变量是存储数据值的容器

2、在编程中，类似代数，我们使用变量来存放值：x

3、在编程中，类似代数，我们在表达式中使用变量：z = x + y

4、JavaScript使用var关键词来声明变量(python在定义变量时就不需要声明)，=号用于为变量赋值

JavaScript标识符

1、所有JavaScript变量必须以唯一的名称为标识。这些唯一的名称称为标识符(变量名)

2、标识符可以是短名称（比如x和y），或者更具描述性的名称（age、sum、totalVolume）

3、JavaScript 标识符对大小写敏感

4、构造变量名称（唯一标识符）的通用规则是：

⑴名称可包含字母、数字、下划线和美元符号

⑵名称必须以字母开头

⑶名称也可以$和_开头

⑷名称对大小写敏感：y和Y是不同的变量

⑸保留字（比如JavaScript的关键词）无法用作变量名称

例2：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 变量</h2>
<p>在本例中，x 被定义为变量。然后 x 被赋值 7：</p>
<p id="demo"></p>

<script>
var x;
x = 7;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

例2_1：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>在本例中，x、y 以及 z 都是变量。</p>
<p id="demo"></p>

<script>
var x = 7;
var y = 8;
var z = x + y;
document.getElementById("demo").innerHTML =
"z 的值是：" + z;
</script>

</body>
</html>

注：
本例中，x、y和z是变量：x存储值7，y存储值8，z存储值15

JavaScript变量补充

1、JavaScript变量可存放数值：100，以及文本值："Bill Gates"

2、在编程中，文本值被称为字符串：JavaScript可处理多种数据类型，字符串被包围在双引号或单引号中。数值不用引号

3、如果把数值放在引号中，会被视作文本字符串

例3：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>字符串用引号包围。</p>
<p>数值不用引号包围。</p>
<p id="demo"></p>

<script>
var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>

</body>

创建JavaScript变量

在JavaScript中创建变量被称为“声明”变量。可以通过var关键词来声明JavaScript变量：

var carName;

声明之后，变量是没有值的。理论上它的值是undefined，如需赋值给变量，请使用等号：

carName = "porsche";

可以在声明变量时向它赋值：

var carName = "porsche";

注：
1、在上面的例子中，我们创建了名为carName的变量，并向其赋值"porsche"，然后我们在id="demo"的HTML段落中“输出”该值：

2、在脚本的开头声明所有变量是个好习惯

例4：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>创建一个变量，向其赋值，然后显示它：</p>
<p id="demo"></p>

<script>
var carName = "porsche";
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

一条语句，多个变量

可以在一条语句中声明许多变量：以var作为语句的开头，并以逗号分隔变量且声明可横跨多行

例5：

var person = "Bill Gates", carName = "porsche", price = 15000;
//或
var person = "Bill Gates",
carName = "porsche",
price = 15000;

重复声明JavaScript变量

如果再次声明某个JavaScript变量但未赋值时将不会丢它的值；重复定义并赋值后会覆盖前面的

注：在python中定义一个变量后必须赋值，未赋值的变量是没有意义的；但是在JS中感觉定义变量后可以不赋值

例6：

<!DOCTYPE html>
<html>
<body>:
<h1>JavaScript 变量</h1>
<p>如果您再次声明某个 JavaScript 变量，那么它的值不会丢失。</p>
<p id="demo"></p>
<p id="demo_1"></p>

<script>
var carName = "porsche";
var carName;//重复定义但未赋值时不会覆盖前面的
document.getElementById("demo").innerHTML = carName;

var a = "222e";
var a = "11111";//重复定义并赋值后会覆盖前面的
document.getElementById("demo_1").innerHTML = a;
</script>

</body>
</html>

赋值运算符

1、在JavaScript中，等号（=）是赋值运算符，而不是“等于”运算符：这一点与代数不同，如代码x = x + 5在代数中是不合理的，然而在JavaScript中它非常合理表示把 x + 5的值赋值给x（计算x + 5的值并把结果放入x中。x的值递增 5。）

2、JavaScript 中的“等于”运算符是 ==

JavaScript算术

1、与代数类似，可以通过JavaScript变量进行算术运算，使用=和+之类的运算符

2、字符串也可以使用加号，但是字符串将被级联(与python中的字符串拼接一样)

3、如果把要给数值放入引号中，其余数值会被视作字符串并被级联(与python中的字符串拼接一样)

例7：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p id="demo_1"></p>
<p id="demo_2"></p>
<p id="demo_3"></p>

<script>
var x = 3 + 5 + 8;
document.getElementById("demo_1").innerHTML = x;

var y = 3 + 5 + "8"
document.getElementById("demo_2").innerHTML = y;

var z = "Bill" + " " + "Gates";
document.getElementById("demo_3").innerHTML = z;
</script>
</body>
</html>

JavaScript运算符

JavaScript使用算数运算符（+ - * /）来计算值，使用赋值运算符（=）向变量赋值

例8：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 赋值
</h2>
<p>在 JavaScript 中，= 运算符用于向变量赋值。</p>
<p id="demo"></p>
<p id="demo_1"></p>

<script>
var x, y,z;
x = 7;
y = 8;
z = (7 + 8) * 10;
document.getElementById("demo").innerHTML = x + y;
document.getElementById("demo_1").innerHTML = z;
</script>

</body>
</html>

JavaScript表达式

1、表达式是值、变量和运算符的组合，计算结果是值

2、表达式也可包含变量值

3、值可以是多种类型，比如数值和字符串

例9：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 表达式</h2>

<p>表达式计算为值。</p>
<p id="demo"></p>
<p id="demo_1"></p>
<p id="demo_2"></p>

<script>
var x;
x = 6;
document.getElementById("demo").innerHTML = 6 * 10;
document.getElementById("demo_1").innerHTML = x * 10;
document.getElementById("demo_2").innerHTML = "Bill" + " " + "Gates";
</script>

</body>
</html>

JavaScript关键词

JavaScript关键词用于标识被执行的动作。如：var关键词告知浏览器创建新的变量(在python中就不需要声明)

例10：

<!DOCTYPE html>
<html>
<body>
<h2>var 关键词创建变量</h2>
<p id="demo"></p>

<script>
var x, y;
x = 7 + 8;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

JavaScript注释

1、并非所有JavaScript 语句都被“执行”。双斜杠//或/*与*/之间的代码被视为注释。注释会被忽略，不会被执行

2、单行注释：单行注释以//开头。任何位于//与行末之间的文本都会被JavaScript忽略（不会执行）

3、多行注释：多行注释以/*开头，以*/结尾。任何位于/*和*/之间的文本都会被JavaScript忽略

例11：

<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>

<script>
/*
下面的代码会改变
id = "myH" 的标题
以及 id = "myp" 的段落
*/
document.getElementById("myH").innerHTML = "JavaScript 注释";
document.getElementById("myP").innerHTML = "我的第一个段落。";//行尾注释
</script>

</body>
</html>

JavaScript标识符

1、标识符是名称

2、在JavaScript中，标识符用于命名变量（以及关键词、函数和标签）

3、在大多数编程语言中，合法名称的规则大多相同：在JavaScript中，首字符必须是字母、下划线（-）或美元符号（$）

4、连串的字符可以是字母、数字、下划线或美元符号

5、数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值

JavaScript 对大小写敏感

1、所有JavaScript标识符对大小写敏感：变量lastName和lastname是两个不同的变量

2、JavaScript不会把VAR或Var译作关键词var

JavaScript值

字面量

JavaScript变量

JavaScript标识符

JavaScript变量补充

创建JavaScript变量

一条语句，多个变量

重复声明JavaScript变量

赋值运算符

JavaScript算术

JavaScript运算符

JavaScript表达式

JavaScript关键词

JavaScript注释

JavaScript标识符

JavaScript 对大小写敏感

猜你喜欢