JavaScript - 基础语法

1. 前言

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

1. HTML 定义了网页的内容
2. CSS 描述了网页的布局
3. JavaScript 控制了网页的行为

2. 数据类型与变量

JavaScript对大小写区分是严格的，同样的名称大小写不同则变量不同

首先我们需要确定，在JavaScript中，变量是可变的是一个名称，字面量是不变的是一个值

使用var进行赋值

2.1 数据类型

在 JavaScript 中有 6 种不同的数据类型：

• string
• number
• boolean
• object
• function
• symbol

3 种对象类型：

• Object
• Date
• Array

2 个不包含任何值的数据类型：

• null
• undefined

typeof

可以查看我们变量的类型

typeof "John"；

constructor 属性

返回所有 JavaScript 变量的构造函数。

"JavaScript".constructor()；
//返回函数string()

 类型转换

Number('JavaScript'); //转换为数字类型
(123).toString()
String(123) //转换为字符类型

2.2 声明 

var a = 5;

var surname = 'xxx'; #定义字符串
var arraylist = [1,2,3,4]; //定义数组
var objecta = {first name:'Ricardo',color='balck',age:50} //定义对象

 也可以进行多行声明

var n=10, name='Ricardo';

2.3 函数

2.3.1 函数定义

直接使用表达式function进行函数的声明

function myFunction(a,b)
{
    return a*b;
}

2.3.2 函数调用

• 直接调用

函数没有返回值的时候可以直接调用函数

myFunction();

•表达式中调用

常见于函数具有返回值

function isLeapYear(x)
{
    return x++
}
document.write(isLeapYear(2010));

• 事件中调用

在HTML中调用

常用于事件中，在某个事件发生时执行相关代码，例如用户点击

<p><input type='button' value='use' onclick='myFunction()'></p>

2.4 字符串

• 字符串属性

constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

var a = 'John';
a.length;

• 字符串方法

charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
split()	把字符串分割为子字符串数组

2.5 对象

菜鸟教程中的这个图十分的形象

一辆汽车是我们的对象。

汽车内部的元素是属性，包含名字，颜色等外部特征；油量，速度等内在特征。

方法则是对于这台车的操作，可以去运行，刹车，加速等。

var car = {name:"Fiat", model:500, color:"white"};

• 访问对象属性

//两种方法
car.color;
car['speed'];

• 定义对象方法&调用对象

let person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

// 调用方法
person.greet(); // objectName.methodName

3 运算符与表达式

3.1 输出

JavaScript没有任何直接打印或输出的函数

根据以下不同方式进行输出

• 弹出窗口显示

window.alert('xxx');

• 写入HTML文档 

document.write('xxx');

• 写入HTML元素 

innerHTML('xxx');

document.getElementById('').innerHTML='xxx';
//获取ID为xxx进行内置的信息修改

• 控制台中输出

console.log('xxx'); //控制台中调试

4 流程控制

4.1 条件语句

4.1.1 if 语句

只有当指定条件true的时候，该语句才会执行。

if (x>5)
{
    xxx;
}

if...else语句

判断不同条件下执行的语句

if (condition)
{
    xxx;
}
else
{
    xxx;
}

if (condition)
{
}
else if (condition2)
{
}
else if (condition3)
{
}
else
{
}

4.1.2 switch语句

使用switch选择多个代码块之一来执行。

switch(x)
{
    case 1:
        执行语句1;
        break;
    case 2:
        执行语句2;
        break;
    default:
        //都不满足时运行
}

4.2 循环

4.2.1 for循环

for (var i=0;i<10;i++)
{
    xxx;
}

for循环可以概括为(开始执行；循环条件；循环一次执行)

在不同情景下，这些都是可选的

4.2.2 For/In循环

循环遍历列表/对象的属性

var I = [1,2,3]
for (x in I)
{
    Console.log(x);
}

4.2.3 While循环

如果条件为真的话，就会重复这个循环

while (condition)
{
    xxx;
}

4.2.4 do/while循环

与一般while循环不一样的事，此循环会先执行do中的内容再进行判断while中的内容

do 
{
    xxx;
}
while (condition);

4.2.5 break语句

break语句可用来跳出整个循环。

跳出循环后，会继续执行该循环之后的代码。

for (I=0;i<10;i++)
{
    if (I==3)
    {
        break;
    }
}


#another way to express
for (I=0;i<10;i++)
{
    if (I==3) break; //如果只有一行，可以省略花括号
}

4.2.6 continue语句

continue中断当前的循环中的迭代，然后继续循环下一个迭代。

for (I=0;i<10;i++)
{
    if (I==5) continue;
    Console.log(I);
}

5. 参考资料

•菜鸟教程 JavaScript 简介 | 菜鸟教程

•《精通HTML5+CSS3+JavaScript网页设计》