JavaScript学习

1 什么是JavaScript

JavaScript是一种解释型编程语言

---

2 变量

1）声明

JavaScript在HTML中放在 script 标签内
变量用 var 来声明

<script>
    // 变量声明
    var i =1
    var str = "你好"
</script>

2）打印

console.log(var)

<script>
    // 变量声明
    var i =1
    var str = "你好"
    console.log(i)
    console.log(str)
</script>

---

3 数组

1）数组创建和打印

<script>
	var arr = [1,2,3,4,5,6]
	console.log(arr)
	// 通过下标访问数组元素
	console.log(arr[0])
	arr[0]='a'
	console.log(arr[0])
</script>

---

4 函数

1）声明

<script>
    //
    function fun(){
        console.log('这是一个函数')
    }
</script>

2）调用

<script>
    // 声明函数
    function fun(){
        console.log('这是一个函数')
    }
    // 调用函数
    fun()
</script>

3）函数返回值

<script>
    function add(x,y) {
        return x+y
    }
    add(1,2)
</script>

---

5 对象

1）什么是对象

对象由属性和方法组成

• 属性：可以当做变量
• 方法：可以当做函数

2）对象的定义

定义对象

<script>
    // 定义对象
    var obj = {
        name:'JavaScript的对象',
        type:'object',
        number:'1',
        method:function(){
            console.log('这是一个对象')
        }
    }
    var dog = {
        name:'旺财',
        sex:'male',
        index:1,
        bark:function(){
            console.log('汪汪汪')
        }
    }
    console.log(dog.name)
</script>

通过构造函数定义对象

<script>
    // 通过构造函数定义对象
    function Dog(name,sex,index){
        this.name= name
        this.sex= sex
        this.index= index
    }
    var mydog = new Dog('二哈','male',2)
    console.log(mydog.name,mydog.sex)
</script>

---

6 事件驱动

当声明事情发生时，会执行一个函数，这个函数叫回调函数

1）点击事件

<button onclick="handleClick()"> 点击我 </button>
<script>
    function handleClick(){
        console.log("我被点了")
    }
</script>

2）事件监听

<button id="btn"> 事件监听 </button>
<script>
    document.querySelector('#btn').
    addEventListener('click',
    function(){
        console.log("click事件被监听到了")
    })
</script>

---