h5学习（五）-- JavaScript

一、书写方式

1. 页内书写

<script type="text/javascript">  </script>

2. 外部JS

<script src="index.js"> </script>

二、基本数据类型

1. 基本语法

// 基本语法
var age = 18;
        var name = 'Tom';
            name2 = 'jary';
        var result = true; // false
        var number = null;
        var number2 = undefined;

        // 输出
        console.log(age, name, number, number2)
        // 变量的真实类型 typeof
        console.log(typeof age, typeof name, typeof number, typeof number2)

结果

18 'Tom' null undefined
number string object undefined

2. 基本数据类型的运算

** 字符串的拼接**

        var newName = name + name2
        console.log(newName)
        
        var str1 = 10 + 10 + '10'
        var str2 = '10' + 10 + 10
        var str3 = (10 + '10') + 10
        console.log(str1, str2, str3)

结果

Tomjary
08 - JavaScriptTest.html:34 2010 101010 101010

遵循的规律：

1. 运算是从左往右
2. 任何类型的变量与String类型的变量拼接就会背强转为String

3. 数组

var numbers = [-10, 'san', name , result, number, ['哈哈'， '呵呵']]

遍历数组

for(var i = 0; i<numbers.length; i++) {
            console.log(numbers[i])
        }
        for(var i in numbers) {
            console.log(i, numbers[i])
        }

数组常用属性

// 删除数组最后一个内容
        numbers.pop();
        // 最后插入一个
        numbers.push('嗷嗷')

4. 常用的类库 Math

找最大值

var numsArr = [10, 212, 2333, 43];
        var maxNum = Math.max(20, 21, 2);
        var newMaxNum = Math.max.apply(this, numsArr)

三、常见的函数

function 函数名(参数) {
函数体
}

function sum(a, b) {
            return a + b
        }
        
        var res = sum(1, 98);
        console.log(res);

匿名函数

var result3 = function () {
            console.log('匿名函数打印')
        }
        // 调用
        result3()

四、对象

1. 常见对象

var dog = {
            name: 'wang',
            age: 10,
            heigh: 1.55,
            dogFriends: ['lili', 'huaahua'],
            eat: function () {
                console.log('吃')
            },
            run: function () {
                console.log('跑')
            }
        };
console.log(dog.age)
dog.eat()

创建构造函数

var Dog = function () {
            this.name = null;
            this.age = null;
            this.heigh = null;
            this.dogFriends = []
            this.eat = function (someThing) {
                console.log(this.name + '吃' + someThing)
            },
            this.run = function (someThing) {
                console.log(this.name + '跑' + someThing)
            }
        };
        var dog1 = new Dog();
        dog1.name = '土狗';
        dog1.age = 15;
        dog1.dogFriends = ['21', '12'];

        var dog2 = new Dog();
        dog2.name = '黄狗';
        dog2.age = 10;
        console.log(dog1, dog2)

2. Window

Window的作用

1. 所有全局的变量都是window的属性
2. 所有的全局函数都是window的方法
3. 可以进行动态跳转

var age = 17;
console.log(window.age);

// 动态跳转
        window.location.href = 'login.html';
        window.location.href = 'XMG2://openCamera?user=';

3. document

作用：

1. 可以动态获取网页中所有的标签（节点）
2. 可以对获取的标签进行增删改查

document.write('Hello world');
        document.write('<input type=file>')

标签修改

<img class="icon" src="car.png" alt="">
    <p id = "word">车辆</p>
    <button onclick="changeImg();">更改图片</button>
    <button id="hidebtn">隐藏</button>


<script>
function changeImg() {
            // 1.获取网页的图片标签
            var img = document.getElementsByClassName('icon')[0];
            // 2.改变src属性
            img.src = '/Users/guoxu/Desktop/IWDigitalKey_h5/img/cat.jpg';
        }
    // 1.拿到所有要操作的标签
    var icon = document.getElementsByClassName('icon')[0];
    var p = document.getElementById('word');
    var btn = document.getElementById('hidebtn');
    btn.onclick = function () {
        // 隐藏 css属性 style display
        if (btn.innerText == '隐藏') {
            p.style.display = 'none';
            icon.style.display = 'none';
            btn.innerText = '显示'
        } else {
            p.style.display = 'block';
            icon.style.display = 'inline-block';
            btn.innerText = '隐藏'
        }
        
    }
    </script>

注：Html代码顺序执行，script在head中，document取不到标签

4. 定时器

setInterval(() => { }, interval);

五、JS中常见的事件

1. 当页面加载完毕

window.onload = function() {}

2. 鼠标进入图片

// 鼠标进入图片
        img.onmouseover = function () {
            console.log('进入图片');
        }
// 鼠标在图片上移动
img.onmousemove = function () {
            console.log('在图片上移动');
        }
        // 鼠标离开图片
        img.onmouseout = function () {
            console.log('离开图片');
        }

3. 输入框获取焦点

input.onfocus = function () {}

4. Document增删改查

增

document.write(' Hello world');
var img = document.getElementById('icon')
img.appendChild(img);

删
document.remove();
改
前文提到的取到标签修改
查
getElementById
getElementsBy…