web前端开发 - 3 JavaScript基本语法

JavaScript基本语法

a. JavaScript 是一种轻量级的、基于对象和事件驱动的、跨平台的客户端脚本语言。

b. JavaScript 是用来制作web页面交互效果，提升用户体验(具有简单易用, 解释执行,基于对象等特点)

1.引入方式

序号	语法	功能
1	< script type=”text/javascript” src=”main.js”>< /script>	导入外部js文件
2	< script type=”text/javascript”>< /script>	写在body的最下方

2.输出方式

序号	语法	功能
1	window.alert()	弹出对话框提示
2	document.write()	将内容写入到 HTML 文档中
3	console.log()	从浏览器控制台输出
4	document.getElementById(‘p1’).innerHTML = ‘innerHTML’;	显示在指定的标签中

3.变量

语法格式：var 变量名 = 变量值

变量的命名规则:
a. 变量名可以包含字母、数字、下划线、美元符号$。

b. 变量名不能以数字开头，可以以字母或下划线开头。如：var _name;（正确） var 3abc;（语法错误）

c. 变量名不能是系统关键字，如：var、switch、try、case、else、while等。

d. JS中的变量名是区分大小写的。如：name和Name是两个变量。

e. JS中变量的名称一定要有意义，也就是常说的语义化。

f. 驼峰式命名。

g. 下划线式命名。

4.数据类型

typeof() : 查看数据类型

序号	类型	语义
1	String	字符串
2	Number	数字型
3	Boolean	布尔型
4	Array	数组型
5	Object	对象型
6	Null	空型
7	Undefined	未定义型

5.运算符

序号	功能	运算符
1	算术运算符	+、 -、 *、 /、 %、 ++、 –
2	赋值运算符	=、 +=、 -=、 *=、 /=、 %=
3	比较运算符	>、 <、 >=、 <=、 !=、 !==、 ==、 ===
4	逻辑运算符	&& (and)、 || (or)、 ! (not)

6.条件语句

序号	语法	功能
1	if 语句	只有当指定条件为 true 时，使用该语句来执行代码
2	if…else 语句	当条件为 true 时执行代码，当条件为 false 时执行其他代码
3	if…else if….else 语句	使用该语句来选择多个代码块之一来执行
4	switch 语句	使用该语句来选择多个代码块之一来执行
5	条件表达式？结果1：结果2	三元运算符 ( 三目运算符 )

基本结构形式如下:

(1). if单分支选择结构：
if条件判断----只判断true，不判断false。
语法结构：
if(条件判断，结果只要两个true或false)
{
    条件为true，将执行该代码
}


(2).  if...else双分支选择结构：
语法结构-----既判断true，又判断false。
if(条件判断：结果只有两个true或false)
{
    条件为true，将执行该代码
}else
{
    条件为false，将执行该代码
}


(3).  if...else if...else多分支选择结构：
语法结构语句来选择多个代码块之一来执行
if (条件1)
{
    当条件 1 为 true 时执行的代码
}
else if (条件2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}


(4)switch 语句是用来选择要执行的多个代码块之一
switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}


(5)三元运算符(三目运算符)
语法：条件表达式？结果1：结果2
语法：操作数！？操作数2：操作数3
含义：如果条件为true，则执行"结果1"的代码；如果条件为false，则执行"结果2"的代码。
其实：三元运算符，就是if else的变形形式

7.循环结构

序号	语法	功能
1	for循环	循环代码块一定的次数
2	for in循环	循环遍历对象的属性
3	while循环	当指定的条件为 true 时循环指定的代码块
4	do while循环	同样当指定的条件为 true 时循环指定的代码块

基本循环结构语法如下:

(1) for循环:
for (变量初始化; 条件判断; 变量更新)
{
    循环体代码
}


(2)for in 循环:
var person={name:"hanbo", age:23}; 
for (x in person)    // x 为属性名
{
    txt=txt + person[x];
}


(3)while循环:
while(条件判断)
{
    如果条件为true，则执行循环体代码
}

(4)do while循环:  先斩后奏，先执行一次
表达式1;             //表达式1：从哪里开始
    do
    {  
        语句组;       //当我们满足循环时要执行的语句
        表达式3;      //步长（步进）
    }
    while()表达式2：  //到哪里结束（循环条件）

注意：循环体中，应有结束循环的条件，否则会造成死循环。

在循环中break是终止循环, continue是跳过本次循环继续循环

8.函数

语法:
function foo（形参1, 形参2, ...）
{
     函数功能代码
     return 参数(表达式);
}
foo（实参1, 实参2, ...）;    //调用函数


prototype:给类添加方法:
类名.prototype.方法名 = 函数
Number.prototype.sum = function(num) 
{
    // body...
    // js中this就相当于python中的self;谁调用当前这个方法，this就指向谁
    return this+num;
};
var a = 20
var b = a.sum(30);
console.log('b:',b);  >>>b:50