JavaScript - 基础语法

admin2024-09-05  6

1. 前言

JavaScript - 基础语法,第1张

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

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

2. 数据类型与变量

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

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

使用var进行赋值

JavaScript - 基础语法,第2张

2.1 声明 

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.2 函数

2.2.1 函数定义

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

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

2.2.2 函数调用

• 直接调用

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

myFunction();
•表达式中调用

常见于函数具有返回值

function isLeapYear(x)
{
    return x++
}
document.write(isLeapYear(2010));
• 事件中调用

在HTML中调用

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

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

2.3 字符串

• 字符串属性

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

• 字符串方法

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

2.4 对象

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

JavaScript - 基础语法,第3张

一辆汽车是我们的对象。

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

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

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网页设计》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!