JavaScript语句、语法、变量

最新推荐文章于 2024-07-12 16:27:40 发布

achaoyang

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量58

点赞数

分类专栏： JavaScript 课后拓展文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/achaoyang/article/details/131920800

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

课后拓展

3 篇文章 0 订阅

订阅专栏

JavaScript语句

JavaScript是直接向浏览器发出的指令，语句的作用是告诉浏览器应该做什么。

<html>
<head>
<meta charset="utf8"
</head>
<body>
<h1>标题1</h1>
<p id=demo>哈哈哈，这是我第一个段落</p>
<script>
document.getElementById("demo").innerHTML="你好派派"
//getElementById函数引用的对象必须要打双引号，否则将无法执行
//如果没有这个语句 那么界面将只会显示 哈哈哈哈，这是我第一个段落
</script>
</body>
</html>

分号；

用于分隔JavaScript语句。
通常我们在每条可以执行的语句尾添加分号。
使用分号的另一用处是可以在一行内添加多个语句。

a=1；
b=2；
c=4；
上下形式代码中执行效果相同
a=1；b=2；c=4；

有时候也会看见不带分号的案例，在JavaScript中，分号结束语句是可选的

JavaScript代码

JavaScript代码是JavaScript执行语句的序列
浏览器按照编写顺序依次执行
下述的列子向网页输出一个标题和两个段落

<html>
<head>
<meta charset="utf8"
</head>
<body>
<h1>哈哈哈这就是标题</h1>
<p id=demo>哈哈哈，这是我第一个段落</p>
<p id=demo2>哈哈哈这是我们第二个段落</p>
<script>
document.getElementById("demo").innerHTML="你好派派"
document.getElementById("demo2").innerHTML="你好蛋黄派"
</script>
</body>
</html>

个人认为之所以要在html页面写入JavaScript语句，可就是为了灵活的改变原本已经固定写好的html页面中的内容及对应的值

JavaScript代码块

JavaScript代码块可以分批的组合起来
代码块以左花括号开始。右花括号结束
代码块的作用是一并的执行语句序列
本例向网页输出一个标题两个段落

<html>
<head>
<meta charset="utf8"
</head>
<body>
<h1>哈哈哈这就是标题</h1>
<p id=demo>哈哈哈，这是我第一个段落</p>
<p id=demo2>哈哈哈这是我们第二个段落</p>
<p>
<button type="button" onclick="myFunction()">点击这里出现变化</button>
</p>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="你好派派"
document.getElementById("demo2").innerHTML="你好蛋黄派"
}
</script>
</body>
</html>

JavaScript代码得通过按钮才能实现，按钮调用对象。button按钮建议写在p标签中

JavaScript语句标识符

JavaScript语句通常以一个语句标识符开始。并执行该语句。
语句标识符是保留关键字不能做为变量名使用。
下表列出JavaScript语句标识符（关键字）

语句	描述
break	跳出循环
catch	语句块在try语句执行出错时执行catch语句块
continue	跳过循环中的一个迭代
do… while	执行一个语句块，在条件语句为true时继续执行该语句块
for	在条件语句为true时，可以将代码块执行指定的次数
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作
function	定义一个函数
if else	用于基于不同的条件来执行不同的动作
return	退出函数
Switch	用于基于不同的条件执行不同的动作
throw	抛出（生成错误）
try	实现错误处理，与catch一同使用
var	声明出一个变量
while	当条件语句为true时，执行语句块

空格

JavaScript会忽略多余空格，可以向脚本添加空格。来提高可读性
下面两行代码是等效的

var	person=”page“；
var	person=	 ”page“

对代码进行拆行

可以在文本字符串中使用反斜杠对代码进行换行。下面的例子会正确的显示：

document.write("你好啊 \
菠萝派")

注意不能像这样拆行

document.write \
("你好啊，菠萝派")

JavaScript是脚本语言浏览器会在读取代码时，逐行的执行脚本代码。而对于传统编程来说。会在执行前对所有代码进行编译

JavaScript注释

JavaScript注释可以提高代码的可读性
JavaScript不会执行注释。可以使用注释来阻止执行。
我们可以添加注释来对JavaScript进行解释，或者提高代码的可读性。

单行注释以 // 开头
多行注释以 /* 开始 */结束
也可以在代码行结尾处使用 //进行注释

JavaScript变量

变量是用于储存信息的”容器”，也可以把变量看做存储数据的容器
实例

<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<script>
var x=1；
var y=2；
var z=x+y；
document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>
</body>
</html>

与代数一样JavaScript可以用于存放值（x=1）和表达式（z=x+y）
变量名可以使用短名称（比如x和y）。也可以使用描述性更好的名称（比如age，sum，totalvolume）
变量必须以字母开头
变量也能以$和_符号开头（不建议）
变量名对大小写敏感（y和Y是不同的变量）

JavaScript数据类型

值类型-占用空间固定，保存在栈中

string
number
boolean
null
undefined

引用类型-占用空间不固定，保存在堆中

Object 对象
Array 数组
Function 函数
Symbol类型
为变量分配文本值时，应该使用双引号或者单引号包围这个值
为变量赋值数值时，不要使用引号，否则数值会被当做文本来处理；

<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<script>
var pi=3.14;
var name="page";
var answer='yes iam!';
document.write(pi + "<br>");
document.write(name + "<br>");
document.write(answer + "<br>");
</script>
</body>
</html>

注意：document.write()方法可以将内容写到HTML中
"br"表示换行

声明（创建）JavaScript变量

在JavaScript中创建变量通常被称为“声明“变量
使用var关键词来声明变量

var carname

声明变量后，未赋值前，变量是空的，需要使用 = 向变量赋值

carname=“suzy”；
或者直接在声明变量时为其赋值
var carname=”suzy“；

知识复习
使用JavaScript改变HTML内容
document.getElementById(" “) 查找元素
.innerHTML=” 改变的内容 "
举例


<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var carname="Volvo";
	document.getElementById("demo").innerHTML=carname;
}

查找元素跟改变元素内容也可以这样用

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

代码分析
注意看，同一种目的，但是有不同的实现方式

<button onclick="myFunction()">点击这里</button>
<button type="button" onclick="myFunction()">点击这里</button>

方式一：
<p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
方式二：
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var carname="Volvo";
	document.getElementById("demo").innerHTML=carname;
}

document.getElementById(" “) 查找元素
.innerHTML=” 改变的内容 "

一条语句，多个变量

可以在一条语句中声明很多变量，var 开头，使用逗号进行分隔开即可；

var lastname="page",age=26,job="engineer"；

声明也可以横跨多行

var lastname=“page”,
age=26,
job=”engineer“；

一条语句中声明的多个变量不可以同时赋同一个值

var x,y,z=1;

其中，x y位undefined，z=1；

Value=Undefined

在计算机程序中，经常会声明无值的变量，其对应的值实际上是undefined；

重新声明JavaScript变量，

如果按照下列的方式重新声明变量，该变量的值不会丢失

var name=“page”;
var name;

重新声明后变量的值仍旧为page；

JavaScript算数

可以通过JavaScript变量来做算数，使用 =和+这类运算符；

<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<p>假设 y=5，计算 x=y+2，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var y=5;
	var x=y+2;
	var demoP=document.getElementById("demo");
	demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>