JavaScript语法

JavaScript 是一个程序语言，语法规则定义了语言结构；是一个脚本语言；是一个轻量级但功能强大的编程语言。

1、JavaScript字面量

在编程语言中，一般固定值称为字面量，如 3.14。

数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。

练习实例

.html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript语法练习</title>
</head>
<body>
<h2>1. JavaScript字面量</h2>
<h3>1.1 JavaScript数字字面量</h3>
<p>数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。</p>
<p id="demo1"></p>
<h3>1.2 JavaScript字符串字面量</h3>
<p>字符串（String）字面量 可以使用单引号或双引号:</p>
<p id="demo2"></p>
<h3>1.3 JavaScript表达式字面量</h3>
<p>表达式字面量 用于计算：</p>
<p id="demo3"></p>
<h3>1.4 JavaScript数组字面量</h3>
<p>数组（Array）字面量 定义一个数组：</p>
<p id="demo4"></p>
<h3>1.5 JavaScript对象字面量</h3>
<p>对象（Object）字面量 定义一个对象：</p>
<p id="demo5"></p>
<h3>1.6 JavaScript函数字面量</h3>
<p>函数（Function）字面量 定义一个函数：</p>
<p id="demo6"></p>



<script>

document.getElementById("demo1").innerHTML = "例如:"+314e3;
document.getElementById("demo2").innerHTML = "例如:xy";
document.getElementById("demo3").innerHTML = "例如: 5 * 10 = "+(5*10);
document.getElementById("demo4").innerHTML = "例如: 数组[1,2,3,4] 输出结果为"+[1,2,3,4];
document.getElementById("demo5").innerHTML = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo6").innerHTML = function myFunction(a, b) { return a * b;};

</script>

</body>
</html>

生成页面效果

2、JavaScript变量

编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：
变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。
变量是一个名称。字面量是一个值。
变量声明之后，该变量是空的（它没有值）。
一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
一条语句，多个变量
- 可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可
  
  var lastname="Doe", age=30, job="carpenter";
- 声明也可横跨多行
  
  var lastname="Doe",
  age=30,
  job="carpenter";
- 一条语句中声明的多个变量不可以同时赋同一个值
  
  var x,y,z=1;
  
  x,y 为 undefined， z 为 1。
在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

例如在执行过以下语句后，变量 carname 的值将是 undefined：

var carname;
如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo";
var carname;

练习实例

.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript变量练习</title>
</head>
<body>

<p id="demo"></p>
<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script>

</body>
</html>

生成页面效果

3、JavaScript操作符

类型	实例	描述
赋值，算术和位运算符	= + - * /	在 JS 运算符中描述
条件，比较及逻辑运算符	== != < >	在 JS 比较运算符中描述

JavaScript使用 算术运算符 来计算值:

(5 + 6) * 10

JavaScript使用赋值运算符给变量赋值：

x = 5
y = 6
z = (x + y) * 10

练习实例

.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript操作符练习</title>

    <style>
        h2{
            color : orange;
        }
    </style>

</head>
<body>

<h2>1. 算数运算符 例如:= + - * /</h2>
<p id="demo"></p>
<h2>2. 赋值运算符 例如:== != < > </h2>
<p>x = 5;
    y = 6;
    z = (x + y) * 10;
</p>
<p id="demo1"></p>

<script>

var x, y, z;
x = 5;
y = 6;
z = (x + y) * 10;
document.getElementById("demo").innerHTML = "(5 + 6) * 10 输出结果为:"+((5 + 6) * 10);
document.getElementById("demo1").innerHTML = "z==(x+y) 输出结果为:"+(z==(x+y));


</script>

</body>
</html>

生成页面效果

4、JavaScript一些其他语法

4.1 JavaScript 语句

在 HTML 中，JavaScript 语句向浏览器发出的命令。

语句是用分号分隔,例如：

x = 5 + 6;
y = x * 10;

4.2 JavaScript 关键字

JavaScript 关键字用于标识要执行的操作。

和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。

例如：var 关键字提示浏览器创建一个新的变量：

var x = 5 + 6;
var y = x * 10;

JavaScript 同样保留了一些关键字，以下是 JavaScript 中最重要的保留关键字（按字母顺序）：

abstract	else	instanceof	super

boolean	enum	int	switch

break	export	interface	synchronized

byte	extends	let	this

case	false	long	throw

catch	final	native	throws

char	finally	new	transient

class	float	null	true

const	for	package	try

continue	function	private	typeof

debugger	goto	protected	var

default	if	public	void

delete	implements	return	volatile

do	import	short	while

double	in	static	with

4.3 JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略：

4.4 JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

<script>
var length = 16;                  					// Number 通过数字字面量赋值
var points = x * 10;               					// Number 通过表达式字面量赋值
var lastName = "Johnson";             				// String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];       			// Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; 	// Object 通过对象字面量赋值
</script>

数据类型的概念

编程语言中，数据类型是一个非常重要的内容。

为了可以操作变量，了解数据类型的概念非常重要。

如果没有使用数据类型，以下实例将无法执行：

16 + "Volvo"

16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢？

16Volvo

答案是会输出 16Volvo

4.5 JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用：

引用一个函数 = 调用函数(执行函数内的语句)。

<script>
function myFunction(a, b) {
  return a * b;                // 返回 a 乘以 b 的结果
}
</script>

4.6 JavaScript 字母大小写

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时，请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的。

4.7 JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符，包含标点等字符。

详情请参考:完整 Unicode 参考手册。

5、JavaScript命名规则

三种变量命名规则：

var firstName='king';//小驼峰

var FirstName='queen';//大驼峰

var first_name='maizi';//下划线法

JavaScript 中，常见的是驼峰法的命名规则，如 lastName (而不是lastname)。

6、一些扩展知识点

三种变量命名规则：

var firstName='king';//小驼峰

var FirstName='queen';//大驼峰

var first_name='maizi';//下划线法
关于JavaScript变量的使用：

JavaScript是弱类型编程语言,定义变量都使用 var 定义,与 Java 这种强类型语言有区别.

在定义后可以通过 typeOf() 来获取JavaScript中变量的数据类型.

// Number 通过数字字面量赋值

// Number 通过表达式字面量赋值

// String 通过字符串字面量赋值

// Array 通过数组字面量赋值

// Object 通过对象字面量赋值

有个情况需要特别注意: typeof 不能用来判断是 Array 还是Object
```
var arr = [] typeof(arr) === 'object' // true
```
结果为 true。

当然你可以使用其他方式来判断：

1、使用 isArray 方法
```
<script>
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
// 判断是否支持该方法
if (Array.isArray) {
    if(Array.isArray(cars)) {
        document.write("该对象是一个数组。") ;
    }
}
</script>
```
2、使用 instanceof 操作符
```
<script>
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

if (cars instanceof Array) {
    document.write("该对象是一个数组。") ;
}
</script>
```
更多判断方法可以参考：
- JavaScript 判断对象是否为数组
- JavaScript 判断该对象是否为数组
关于变量命名
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
介绍JS中的let变量:

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。在Function中局部变量推荐使用let变量，避免变量名冲突。

作用域规则

let 声明的变量只在其声明的块或子块中可用，这一点，与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。
<script>
function varTest() {
    var x = 1;
    if (true) {
        var x = 2;       // 同样的变量!
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let x = 1;
    if (true) {
        let x = 2;       // 不同的变量    
        console.log(x);  // 2  
    }
    console.log(x);  // 1
}
</script>

Javascript声明变量的时候，虽然用var关键字声明和不用关键字声明，很多时候运行并没有问题，但是这两种方式还是有区别的。可以正常运行的代码并不代表是合适的代码。

<script>
// num1为全局变量，num2为window的一个属性
var num1 = 1;
num2 = 2;
// delete num1;  无法删除
// delete num2;  删除
function model(){
var num1 = 1; // 本地变量
num2 = 2;     // window的属性
    // 匿名函数
    (function(){
        var num = 1; // 本地变量
        num1 = 2; // 继承作用域（闭包）
        num3 = 3; // window的属性
    }())
}
</script>

const 关键字用来声明 JavaScript中的常量（与变量相对，不可修改，但同样是用于存储信息的"容器"。），常量的值不能通过重新赋值来改变，并且不能重新声明。
```
<script>
//定义常量a并赋值为0
const a = 0;

//报错（不能重新赋值）
a = 1;

//报错（不能重新声明）
const a = 2;

//输出0
console.log("a is: " + a);
</script>
```

posted @ 2022-04-28 11:33 无关风月7707 阅读(40) 评论(0) 编辑收藏举报

刷新页面返回顶部

xypersonal

JavaScript语法

JavaScript语法

1、JavaScript字面量

2、JavaScript变量

3、JavaScript操作符

4、JavaScript一些其他语法

4.1 JavaScript 语句

4.2 JavaScript 关键字

4.3 JavaScript 注释

4.4 JavaScript 数据类型

数据类型的概念

4.5 JavaScript 函数

4.6 JavaScript 字母大小写

4.7 JavaScript 字符集

5、JavaScript命名规则

6、一些扩展知识点

公告