1.JS语句
JavaScript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
JavaScript是脚本语言,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
分号用于分隔 JavaScript 语句,通常我们在每条可执行的语句结尾添加分号,使用分号的另一用处是在一行中编写多条语句。例如:👇👇👇
(您也可能看到不带有分号的案例。在 JavaScript 中,用分号来结束语句是可选的。)
a=5; b=10; c=a+b; 等价于: a=5;b=10;c=a+b;
JavaScript代码是 JavaScript 语句的序列,浏览器按照编写顺序依次执行每条语句。
JavaScript可以分批地组合起来,代码块以左花括号开始,以右花括号结束,代码块的作用是一并地执行语句序列。
JavaScript会忽略多余的空格。可以向脚本添加空格,来提高其可读性。
JavaScript可以在文本字符串中使用反斜杠对代码行进行换行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <script> document.write("你好 \ 世界!!!"); </script> </body> </html>
2.JS语句标识符
语句 |
描述 |
break |
用于跳出循环。 |
catch |
语句块,在 try 语句块执行出错时执行 catch 语句块。 |
continue |
跳过循环中的一个迭代。 |
do ... while |
执行一个语句块,在条件语句为 true 时继续执行该语句块。 |
for |
在条件语句为 true 时,可以将代码块执行指定的次数。 |
for ... in |
用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 |
function |
定义一个函数 |
if ... else |
用于基于不同的条件来执行不同的动作。 |
return |
退出函数 |
switch |
用于基于不同的条件来执行不同的动作。 |
throw |
抛出(生成)错误。 |
try |
实现错误处理,与 catch 一同使用。 |
var |
声明一个变量。 |
while |
当条件语句为 true 时,执行语句块。 |
3.JS输出显示数据
JavaScript没有任何打印或者输出的函数。
JavaScript可以通过不同的方式来输出数据:
· 使用 window.alert() 弹出警告框。
· 使用 document.write() 方法将内容写到 HTML 文档中。
· 使用 innerHTML 写入到 HTML 元素。
· 使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>JS简单学习</title> </head> <body> <h1>我的第一个页面</h1> <p>使用 window.alert() 弹出警告框</p> <script> window.alert("请继续浏览其他网页!!!"); </script> </body> </html>
3.2 document.write()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p>我的第一个段落</p> <script> document.write(Date()); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">我的第一个段落</p> <script> document.getElementById("demo").innerHTML="段落已被修改!!!"; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p> 浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。 </p> <script> a=5; b=7; c=a+b; console.log(c); </script> </body> </html>
4.JS语法
数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。例如:3.14,1024,512e5。
字符串(String)字面量 可以使用单引号或双引号。例如:'Hello',"Hello"。
表达式字面量 用于计算。例如:5+6,6*7。
数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]。
对象(Object)字面量 定义一个对象:{Name: "zhangsan", Sex: "男", age: 25, Hobby: "sleep"}
函数(Function)字面量 定义一个函数:function myFunction(a, b) { return a * b;}
4.2 JS变量
在编程语言中,变量用于存储数据值。JavaScript 使用关键字var来定义变量,使用等号来为变量赋值。
var x,y; x=50; y=60;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p id="Number1"></p> <p id="Number2"></p> <p id="String"></p> <p id="Array"></p> <p id="Object"></p> <script> var length = 16; // Number 通过数字字面量赋值 var points = length * 10; // Number 通过表达式字面量赋值 var name = "zhangsan"; // String 通过字符串字面量赋值 var color = ["red", "green", "blue"]; // Array 通过数组字面量赋值 var web = {first:"HTML", second:"CSS", third:"JS"}; // Object 通过对象字面量赋值 document.getElementById("Number1").innerHTML=length; document.getElementById("Number2").innerHTML=points; document.getElementById("String").innerHTML=name; document.getElementById("Array").innerHTML=color; document.getElementById("Object").innerHTML=web.first + " " + web.second + " " + web.third; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p id="demo"></p> <script> var a,str,x; a=666; str="中国"; x=str + a; document.getElementById("demo").innerHTML=x; </script> </body> </html>
4.3 JS操作符
类型 |
实例 |
描述 |
赋值,算术和位运算符 |
= + - * / |
在 JS 运算符中描述 |
条件,比较及逻辑运算符 |
== != < > |
在 JS 比较运算符中描述 |
4.4 JS关键字
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.5 JS字母大小写
JavaScript对大小写是敏感的。当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数getElementById与getElementbyID是不同的。同样,变量myVariable与MyVariable也是不同的。
4.6 JS字符集
JavaScript使用 Unicode 字符集。Unicode 覆盖了所有的字符,包含标点等字符。
5.JS注释
JavaScript不会执行注释,我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。注释用于阻止其中一条代码行的执行(可用于调试)
单行注释以 // 开头。
// 输出标题: document.getElementById("myH1").innerHTML="Welcome to my Homepage"; // 输出段落: document.getElementById("myP").innerHTML="This is my first paragraph.";
多行注释以 /* 开始,以 */ 结尾。
/* 下面的这些代码会输出 一个标题和一个段落 并将代表主页的开始 */ document.getElementById("myH1").innerHTML="欢迎来到我的主页"; document.getElementById("myP").innerHTML="这是我的第一个段落。";
var length = 16; // Number 通过数字字面量赋值 var points = length * 10; // Number 通过表达式字面量赋值