JavaScriptjavascript前端

前端基础 03、JavaScript 入门

2022-02-09  本文已影响0人  yjtuuige

一、什么是 JavaScript

1. 概述
2. JavaScript 历史
3. ECMAScript

二、快速入门

1. 引入 JavaScript

  1. 内部标签：JS 代码可以直接嵌在网页的任何地方，通常放到 head 中；

    <script>
    // JS注释
 alert("Hello,World!")
</script>

  2. 外部引入：把 JS 代码放到一个单独的 .js 文件，然后引入；

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

  3. 测试代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个JavaScript</title>
    <!--1. 内部引用-->
    <!--    <script>-->
    <!--        alert("Hello,World!")-->
    <!--    </script>-->
    <!--script标签内写JS代码，script标签必须成对出现-->
    <!--2. 外部引用-->
    <script src="js/hello.js"></script>
    <!--不用显式定义type，默认就是JavaScript-->
    <script type="text/javascript"></script>
</head>
<body>

<!--JS代码也可以放这里-->
</body>
</html>

  4. 调试

    • 安装 Google Chrome 浏览器；
    • 打开开发者工具：快捷键 F12、Ctrl + Shift + I，或鼠标右键 检查

    • 先点击控制台(Console)，在这里可以直接输入 JS 代码，按回车后执行；

    • 要查看一个变量的内容，在 Console 中输入 console.log(a);，回车后显示的值，就是变量的内容。

    • 关闭 Console 请点击右上角的 × 按钮。

2. 基本语法入门
3. 数据类型简介

数值、文本、图形、音频、视频、网页等各种各样的数据，在 JavaScript 中定义了以下几种数据类型：

4. 严格检查模式：'use strict'

三、数据类型

1. 字符串
2. 数组

数组常用方法

  1. indexOf()：通过元素获得下标索引 
    var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2

  1. slice() ：类似于 String 中的substring()

    • 截取 Array 的一部分，返回一个新的数组。
    let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
// 不传递任何参数，它就会从头到尾截取所有元素（相当于复制一个新数组）
let aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false

  2. push()和pop()

    • push()：向 Array 的末尾添加若干元素；
    • pop()：把 Array 的最后一个元素删除掉。
    var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
arr; // []

  3. unshift()和shift()

    • unshift()：往 Array 的头部添加若干元素；
    • shift()：把 Array 的第一个元素删掉。
    let arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []

  4. sort() 排序

    • 直接修改当前 Array 的元素位置，直接调用时，按照默认顺序排序。
    let arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

  5. reverse() 元素反转

    let arr = ['one', 'two', 'three'];
arr.reverse();
arr; // ['three', 'two', 'one']

  6. splice()

    • 是修改 Array 的 万能方法；
    • 可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素。
    let arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL','Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

  7. concat()

    • 当前的 Array 和另一个 Array 连接起来，并返回一个 新的 Array。
    let arr = ['A', 'B', 'C'];
let added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']

  8. join()

    • 把当前 Array 的每个元素，用指定的字符串连接起来，返回连接后的字符串。
    // 如果 Array 的元素不是字符串，将自动转换为字符串后再连接
let arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

  9. 多维数组

    let arr = [[1, 2, 3], [400, 500, 600], '-'];
let x = arr[1][1];
console.log(x); // 500
3. 对象

  1. 定义一个对象

    var person = {
 name: '小明',
 birth: 1990,
 school: 'No.1 Middle School',
 height: 1.70,
 weight: 65,
 score: null
};

  2. 获取对象的属性：对象.属性 或 对象["属性"]

    • 使用一个不存在的对象属性，不会报错！undefined
    var person = {
 name: '小明'
};

person["name"];  // '小明'
person.age; // undefined

  3. 动态的给对象删除属性（delete）

    var person = {
 name: '小明'
};
delete person['name']; // 删除name属性
person.name; // undefined
delete person.id; // 删除一个不存在的id属性也不会报错

  4. 动态给新的属性添加值

    var person = {
 name: '小明'
};
person.age = 18; // 新增一个age属性
person.age; // 18

  5. 判断对象是否拥有某一属性：in 操作符

    var person = {
 name: '小明',
 birth: 1990,
 school: 'No.1 Middle School',
 height: 1.70,
 weight: 65,
 score: null
};
'name' in person;    // true
'id' in person;  // false

// 继承的属性也为true
'toString' in person;    // true

  6. hasOwnProperty()：判断是否是对象自身拥有的属性

    var person = {
 name: '小明'
};
person.hasOwnProperty("toString");   // false 继承属性非自身
person.hasOwnProperty("name");   // true
4. 流程控制
5. Map 和 Set

Map：K-V（K不能重复）

// 学生姓名，学生成绩
// let names = ['Michael', 'Bob', 'Tracy'];
// let scores = [95, 75, 85];

// Map 实现
let map = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
let name = map.get('Michael'); // 95 通过key获取value
map.set('admin', 100);  // 添加元素
map.delete('Bob');  // 删除元素

Set：无序不重复的集合

let set = new Set([3, 2, 1]);
set.add(5); // 增加元素
set.delete(3);  // 删除元素
set.has(1); // 判断是否包含元素
set.size;   // 长度
6. iterator

四、函数

1. 定义函数

定义方式一 ：推荐

// 求一个数的绝对值
function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

定义方式二：

let abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};
2. 调用函数
function abs(x) {
    // 判断参数是否为 number 类型
    if (typeof x !== 'number') {
        throw 'Not a number';
    }
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

arguments

rest 参数

3. 变量的作用域
  1. 变量作用域
  1. 提升变量作用域
  1. 全局函数

全局对象 window

window.alert('调用window.alert()');
// 把alert保存到另一个变量:
var old_alert = window.alert;
// 给alert赋一个新函数:
window.alert = function () {
}
alert('无法用alert()显示了!');
// 恢复alert:
window.alert = old_alert;
alert('又可以用alert()了!');

说明：

规范：

// 唯一的全局变量MYAPP:
var MYAPP = {};
// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;
// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};
  1. 局部作用域：let
  1. 常量 const
4. 方法

定义方法

apply：控制 this 的指向

五、内部对象

1. 标准对象
typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'
2. Date
var now = new Date();
now;   // Mon Feb 07 2022 10:44:36 GMT+0800 (中国标准时间)
now.getFullYear();  // 年份
now.getMonth(); // 月份：范围是0~11，值需要 +1
now.getDate();  // 日
now.getDay();   // 星期
now.getHours(); // 小时, 24小时制
now.getMinutes();   // 分钟
now.getSeconds();   // 秒
now.getMilliseconds();  // 毫秒数
now.getTime();  // 时间戳 全世界统一 1970 1.1 00:00:00 毫秒数
console.log(new Date(1644204579172));   // 时间戳转为时间
3. JSON
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
    <script>
        `use strict`
        // 编写一个js的对象
        var user = {
            name: "Tom",
            age: 20,
            sex: "男"
        };
        // 将js对象转换成json字符串
        let str = JSON.stringify(user);
        console.log(str);
        // 将json字符串转换为js对象
        let user2 = JSON.parse(str);
        console.log(user2.age, user2.name, user2.sex);
    </script>
</head>
<body>

</body>
</html>
4. Ajax

六、面向对象编程

1. 原型对象
2. class
3. 继承 extends
// 学生类
class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('hello')
    }
}

// 继承学生类
class PrimaryStudent extends Student {
    // 本类的构造函数
    constructor(name, grade) {
        // 用super调用父类的构造方法!
        super(name);
        this.grade = grade;
    }

    // 本类的方法
    myGrade() {
        alert(`I am at grade ${this.grade}`);
    }
}

// 调用父类的方法
let student1 = new PrimaryStudent("小明", 5).hello();
// 调用本类的方法
let student2 = new PrimaryStudent("小明", 5).myGrade();
4. 原型链

七、操作 BOM 对象（重点）

1. 浏览器介绍

第三方

2. window（重要）
3. navigator 浏览器信息（不建议使用）
4. screen 屏幕信息
5. location（重要）
6. document（内容 DOM）
7. history（不建议使用）

八、操作 DOM 对象（重点）

1. 核心（选择器）

获得 DOM 节点

// 对应 css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');

//获取父节点下所有的子节点
var childrens = father.children;
var childrens = father.children[index]; // 某个节点
// father.firstChild;
// father.lastChild;

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');
// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');
// 获取第一个带target属性的a元素
var node = document.querySelector("a[target]");
2. 更新 DOM
3. 插入 DOM：

插入节点

追加（末尾）：appendChild

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>
<script>
    var js = document.getElementById('js'); // 已存在节点
    var list = document.getElementById('list');
    list.appendChild(js);   // 在末尾追加
</script>

创建新的标签，实现插入（末尾追加）

var
    list = document.getElementById('list'),
    haskell = document.createElement('p');  // 创建新的节点 <p>
haskell.id = 'haskell'; // 新标签添加 id
haskell.innerText = 'Haskell';  // 新标签添加内容
list.appendChild(haskell);  // 追加

// 可以创建style、script标签
var d = document.createElement('style');
var a = document.createElement('script');
a.innerHTML = 'alert("hi!!");'
// 设置标签属性：键值对
a.setAttribute('src','js/test.js'); // 动态加载js文件
d.setAttribute('type', 'text/css');
d.innerHTML = 'body { background: red }';
// head 头部标签
document.getElementsByTagName('head')[0].appendChild(d);
document.getElementsByTagName('head')[0].appendChild(a);

节点前插入：insertBefore

var ee = document.getElementById('ee');
var py = document.getElementById('py');
var list = document.getElementById('list');
// list 插入位置的父节点，insertBefore（new，target）
list.insertBefore(a, py);
4. 删除 DOM

九、操作表单（验证）

1. 回顾
2. 获取值
3. 设置值
4. 提交表单

JavaScript 提交表单的方式：

十、jQuery （了解）

1. 什么是 jquery

获取 jquery

使用 jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<a id="test-link" href="#0">点我试试</a>
<script>
    // 获取超链接的jQuery对象:
    // 选择器就是 css 选择器
    var a = $('#test-link');
    a.on('click', function () {
        alert('Hello!');
    });
    // 方式二
    a.click(function () {
        alert('Hello!');
    });
</script>
</body>
</html>
2. 选择器
// 原生态js，选择器少，麻烦不好记
// 标签
document.getElementsByTagName();
// id
document.getElementById();
// 类
document.getElementsByClassName();

// jquery css中的选择器通用
$('p').click(); // 标签选择器
$('#id').click(); // id选择器
$('.class1').click(); // class选择器
// 公式：
$(selector).action()
3. 操作 DOM
$('#test-ul li[name=python]').text();    // 获得值
$('#test-ul li[name=python]').text('设置值');// 设置值
$('#test-ul').html();    // 获得值
$('#test-ul').html('<strong>123</strong>');  // 设置值

$('#test-ul li[name=python]').css("color","red")

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

$(window).width();
$(window).height();
// 显示、隐藏切换
$('#test-ul li[name=python]').toggle();
4. 事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        #divMove {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!-- 要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    // 当网页元素加载完毕之后，响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY)
        })
    })
</script>
</body>
</html>

小技巧

  1. 巩固 JS（看游戏源码）
  2. 巩固 HTML，CSS（扒网站，全部 down 下来，然后对应修改看效果）
  3. Element-ui等
上一篇 下一篇

猜你喜欢

热点阅读