JavaScript基础

最新推荐文章于 2024-09-26 01:42:12 发布

XiaoXiao金

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量167

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_46529226/article/details/125547551

版权

JS基础

在学习JavaScript基础之前，我们可以先来了解一下HTML、CSS、JS之间有什么关系，正如图显示HTML-结构、CSS-表现、JS-行为。

HTML、CSS标记语言--描述类语言

HTML决定网页结构和内容（决定看到什么），相当于人的身体。
CSS决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆。

JS脚本语言--编程类语言

实现业务逻辑和页面控制（决定功能），相当于人的各种动作。

JS有三种书写位置，分别为：行内、内嵌、外部。

JavaScript中的变量

变量是用于存储信息的"容器"。

var x=5;
var y=6;
var z=x+y;

JavaScript数据类型

简单数据类型	说明	默认值
Number	数字型，包含整数值和浮点值	0
Boolean	布尔值类型，如true、false，等价与1和0	false
String	字符串类型	“”
Undefined	Var a;声明了变量a但是没有给值，此时a = undefined	undefined
Null	Var a = null；声明了变量a为空值	null

JavaScript分支语句

if
if...else
switch

JavaScript循环语句

for
while
do...while

JS的函数和对象

JavaScript中的函数

函数：封装了一段可以被重复调用或者执行的代码块，通过这个代码块可以实现大量代码的重复使用。

如何创建函数：

1、function 函数名( [参数列表] )

{

//函数体代码

}

function 是声明函数的关键字，必须小写
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词

2、var 变量名 = function ( [参数列表] )

{

//函数体代码

}

因为函数没有名字，所以也被称为匿名函数
这个变量名里面存储的是一个函数
函数表达式方式原理跟声明变量方式是一致的

3、函数调用

函数名( [参数列表] )

JavaScript中的对象

对象：是拥有属性（事物的特征）和方法（事物的行为）的数据。

创建对象的方法：

1、使用字面量创建对象：

 var dog_1={
        //属性
        category:"柯基",
        weight:15,
        Sex:"male",
        age:2,
        name:"大黄",

        //行为
        eat:function(){
            alert(this.name+"正在吃饭");
        },
        sleep:function(){
            alert(this.name+"正在睡觉");
        }
    }

    alert(dog_1.category);
    dog_1.eat();

2、利用 new Object 创建对象：

var car=new Object();
    car.color="green";
    car.brand="玛莎拉蒂";
    car.categroy="跑车";
    car.drive="后驱";

    car.drive=function(){
        alert(this.brand+"正在行驶");
    }
    car.turn=function(direction){
        alert(this.brand+"正在转向"+direction);
    }
    car.brake=function(a){
        alert(this.brand+"刹车了"+a+"次");
    }

    car.drive();
    car.turn("left");
    car.brake(6);
    car.color="red";
    alert(car.color);

3、利用构造函数创建对象：

function car(color,brank,category){
        this.color=color,
        this.brand=brank,
        this.category=category,

        this.drive=function(){
        alert(this.brand+"正在行驶");
        }
    }
    var car2=new car("green","玛莎拉蒂","跑车");
    car2.drive();