JavaScript入门学习

_阿伟_

已于 2024-02-08 18:53:12 修改

阅读量1.1k

点赞数 28

分类专栏：前端文章标签： javascript 学习前端

于 2024-02-06 19:54:49 首次发布

本文链接：https://blog.csdn.net/2301_76556912/article/details/136010796

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript

一.什么是JavaScript与作用

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言

嵌入HTML中，与Css一样。
对浏览器事件作出响应
操作HTML元素及节点。
可以动态操作CSS样式。
在数据被提交到服务器之前验证数据。

二.两种引入方式

1.内部标签

demo.html

<script>
    alert("hello")
</script>

2.外部引入

demo.js

// 代码

demo.html

<script src="路径"></script>

三.浏览器控制台调试

四.数据类型

1.变量与严格检查格式

// 统一用 var 来声明变量。
// 在ES6新增加了let 和const来声明变量。

var fuck = "fuck";
var number = 1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
前提：Idea，设置支持ES6语法

'use strict';严格检查模式，预防JavaScript随意性导致产生的一些问题

必须写在script标签内的第一行！

局部变量建议都使用let去定义
-->
<script>
    'use strict';
    let a = 1;
</script>
</body>
</html>

2.基本变量类型

//--- number
var a  = 1;
a = 123 //整数
a = 123.1 //浮点数
a = -99 //负数
a = NaN //not a number

//--- 字符串
var b = "abc";
b = 'cba';


//--- 布尔值
var c = true;
c = false;

3.运算符

// 1.逻辑运算符

&&  //两个都为真，结果为真
||  //一个为真，结果为真
!   //真即假，假即真


// 2.比较运算符
=    //赋值预算法
==   //等于（类型不一致，值一样，也会判断为true  即判断1=='1'）
===  //绝对等于（类型一样，值一样，结果为true）

（1）NaN，与所有的数值都不相等，包括自己

NaN === NaN; //false

只能通过isNaN()来判断这个数是不是NaN。

（2）浮点数问题

(1/3)===(1-2/3) //结果为false

尽量避免使用浮点数进行运算，存在精度问题

Math.abs(1/3-(1-2/3))<0.00000001 //结果为true

4.null和undifined

null 空
undefined 未定义

5.字符串

（1）正常字符串我们使用单引号或者双引号包裹。

let a = "fuck";
let b = 'fuck';

(2）注意转义字符

let a = '\u4e2d ' //\u#### Unicode 字符
let a = '\x41' //Ascll字符

（3）多行字符串编写 ``

var msg = `
        hello
        你好,张三。
        `

（4）模板字符串，拼接字符串

let name = '张三';
let msg = `你好呀，${name}`; //'你好呀，张三'

（5）字符串长度：

msg.length; //6

（6）大小写转换

let a = "student";
a.toUpperCase(); // 'STUDENT'
a.toLowerCase(); // 'student'

（7）字符串查找

a.indexOf(‘t’); //1

（8）截取

a.substring(2) //udent, 下标几到最后
a.substring(2,3) //u, 下标几到下标几

6.数组

Java的数组必须是相同类型的对象。JS中不需要这样！

Array可以包含任意的数据类型

// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true];//取数组下标：如果越界了，就会报undefined
arr[1]; //2
arr[9]; //undefined

（1）获取长度

arr.length; // 6
//假如给arr.length赋值，数组的大小就会发生变化，如果赋值过小，元素就会丢失
arr.length = 5; // a = [1, 2, 3, 4, 5]

（2）获得下标索引

arr.indexOf(2); // 1

（3）数组截取

arr.slice(2); //[3, 4, 5]  类似于String中的substring
arr.slice(2,4); //[3, 4]

（4）元素操作

//插入最后一位
arr.push("a"); //[1, 2, 3, 4, 5, 'a']

//插入最前一位
arr.unshift("b") //['b', 1, 2, 3, 4, 5, 'a']

//删除最后一位
arr.pop(); //['b', 1, 2, 3, 4, 5]

//删除最前一位
arr.shift(); //[1, 2, 3, 4, 5]

（5）排序

arr.sort(); //[1, 2, 3, 4, 5]

（6）反转

arr.reverse();// [5, 4, 3, 2, 1]

（7）合并

let arr2 = ['a','b','c']
arr.concat(arr2); //[1, 2, 3, 4, 5, 'a', 'b', 'c']
//返回一个新的数组，不改变原来的数组arr

（8）连接符

// join();//默认，去拼装数组。可以指定
arr.join("-");//'1-2-3-4-5'

7.对象

对象是大括号，数组是中括号，每一个属性之间使用逗号隔开，最后一个不需要加逗号

/*
var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}
*/

let obj = {
    name : "张三",
    tags : ['吃饭','睡觉','打豆豆']
}

js中的对象， {…..}表示一个对象，键值对描述属性xx : xx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

js 中的所有键都是字符串，值是任意对象！

（1）取值

obj.name;// 法外狂徒
obj.sex;// 取一个不存在的对象属性，不会报错！会显示:undefined

（2）赋值

obj.name = "法外狂徒";

（3）添加属性,直接给新的属性添加值即可

obj.sex = '男';

（4）删除属性

delete obj.sex;

（5）判断属性值是否在这个对象中 XX in XXX

"name" in obj; //true
'toString' in obj; //true,父类中有。

(6）判断属性值是否在这个对象的自身上

obj.hasOwnProperty("toString"); // false
obj.hasOwnProperty("name"); // true

五.流程控制

1.判断语句

// if 判断
let a = 1;
if (a > 1){
    console.log("判断一")
}else if (a > 5){
    console.log("判断二")
}else {
    console.log("判断三")
}

2.循环语句

// while循环
while(a < 10){
    a ++;
    console.log(a);
}

// for循环
for(let i = 0; i < 10; i++){
    console.log(i);
}

//forEach循环
let tags = ['吃饭','睡觉','打豆豆'];
tags.forEach((value,index)=>{
    console.log(value+','+index);
})

// for in 遍历下标
for (let tag in tags){
    console.log(tag[num]);
}

//通过for of遍历值
for (let tag of tags){
    console.log(tag);
}

六.Map 和 Set

1.Map

let map = new Map([['1',"小明"],['2',"小华"],['3',"张三"]]);
    map.get('3'); // 张三
    map.delete('1'); // 删除元素
    map.set('6',"kuangstudy"); // 存在就修改，不存在就添加


//遍历map
for (let x of map){
    console.log(x);
}

2.Set

无序不重复的集合

var set = new Set([3,2,1]);
set.add(5);//增加元素

set.delete(3);//删除元素

set.has(1);//判断是否包含元素

set.size;//长度

//遍历遍历set
for (var x of set){
    console.log(x);
}

七.函数

1.定义函数

定义方式一：

function abs(x){

    if(x >= 0){
        return x;
    }else{
        return -x;
    }

}

一旦执行到return 代表函数结束，返回结果！

如果没有执行return ，函数执行完也会返回结果，结果就是undefined

定义方式二：

var abs = function(x){

    if(x >= 0){
        return x;
    }else{
        return -x;
    }

}

function(x){….} 这是一个匿名函数，把结果赋值给abs，通过abs可以调用函数！

方式一和方式二等价！

2.调用与参数问题

abs(10); // 10
abs(-10); // 10

参数问题：JavaScript 可以传任意多个参数，也可以不传

（1）arguments：代表传递进来的所有参数，是一个数组


function abs(x){

    for(let i of arguments){
        console.log(i);
    }

    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

3. rest：定义参数以外的所有参数，返回一个数组


function abs(a,b,...rest){

console.log(a);
console.log(b);
console.log(rest);

}

3.局部变量

访问不存在的变量名会报XXX is not defined

function abs(x) {
    var a = 1;
}
a = a + 2; //报错：a is not defined

function abs(x) {

    //手动抛出异常
    if(typeof x!= 'number') {
        throw 'Not a number';
    }
    if(x>=0) {
        return x;
    }else {
        return -x;
    }
}

内部函数可以访问外部函数的成员，反之则不行（与Java一样内部类可以访问外部类，外部类访问不了内部类）

var a = 1;
function abs(x) {
    var b = a + 2;
}
a = b + 2;//报错：b is not defined

假设，内部函数变量和外部函数的变量重名


function f(){
var a = 1;

function d(){
    var a ="A";
}
    console.log("内部"+a); // A 从内向外查找
}
f();//内部A
console.log("外部"+a);// 1

使用闭包可以解决外部访问函数内部变量的方法。

let关键字，解决局部作用域冲突问题

function ab(){
    for(vat i = 0;i<100;i++){
        console.log(i);
    }
    console.log(i);// 100 出了作用域还可以使用
}

function ab(){
    for(let i = 0;i<100;i++){
        console.log(i);
    }
    console.log(i);//报错
}

4.全局变量

var x = 1;

function abc() {

console.log(x);// 1

}

abc()

console.log(x);// 1

全局对象

var a = "xxx";

window.alert(a); // xxx 
alert(window.a); // xxx

结论：默认所有全局变量都绑定到window对象下，alert本身属于window对象下的变量；

var a = 1;

window.alert(a); // 1

var fuck = window.alert;

fuck(a) // 1

window.alert = function() {

};

window.alert(a); // 失效

window.alert = fuck;

window.alert(a);// 1

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有函数作用范围内找到，就会向外查找，如果全集作用域都没有找到，就报错；

规范：由于我们所有的全局变量都会绑定到我们的window 上，如果不同的js文件，使用了相同的全局变量，冲突~> 如何减少冲突

// 唯一全局变量
var xxlApp={};
 
// 定义全局变量
xxlApp.name = "王小姐";

xxlApp.age = function (a,b){
    return a + b;
}

将自己的代码放入自己定义的唯一空间名字中，降低全局命名冲突问题

5.常量

var PI = 3.14
console.log(PI);

PI = 123; //可以修改
console.log(PI);

在ES6引入了常量关键字 const

const PI = 3.14; //只读变量
PI = 123;//报错 Attempt to assign to const or readonly variable
console.log(PI);

6.方法定义与调用

var fuck = {
    name:"fuck",
    bitrh:2000,
// 方法定义
    age : function() {
        var now = new Date().getFullYear();
        return now-this.bitrh;
    }
    
}

function getAge() {
    var now = new Date().getFullYear();
    return now - this.bitrh;
}

var fuck = {
    name:"nn",
    bitrh:1111,
    age:getAge
    
}


 getAge() // Nan
 fuck.age() // yes

apply:

在js中可以控制this的指向

function getAge() {
    var now = new Date().getFullYear();
    return now - this.bitrh;
}

var fuck = {
    name:"nn",
    bitrh:1111,
    age:getAge
    
}

getAge.apply(fuck,[]);// this 指向fuck，参数为空

 getAge() // Nan
 fuck.age() // yes

八. 内部对象

1.标准对象

typeof 123
'number'

typeof NaN
'number'

typeof '123'
'string'

typeof true
'boolean'

typeof []
'object'

typeof {}
'object'

typeof Math.abs
'function'

typeof nudefined
'undefined'

2.Date

一.构造
data = new Date();
Wed Feb 07 2024 11:50:49 GMT+0800 (中国标准时间)

new Date(1707277849514)
Wed Feb 07 2024 11:50:49 GMT+0800 (中国标准时间)

二.方法

data.getFullYear() // 年
2024

data.getMonth() // 月 0~11
1

data.getDate() // 日
7

data.getHours()// 时
11

data.getMinutes()// 分
50

data.getSeconds()// 秒
49

time = data.getTime();// 时间戳
1707277849514


data.toLocaleString() // 本地时间
'2024/2/7 11:50:49'

3.Json

(1).早期，所有的数据传输习惯都使用XML文件！

JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

(2).在JavaScript 中一切皆为对象，任何js支持的类型都可以用JSON来表示

(3).格式：

对象都用{}
数组都用[]
所有的键值对都用key:value

(4).JSON字符串和JS对象的转换

var user = {
    name: '王小姐',
    age: 16,
    sex: '女'
}
console.log(user);// {name: '王小姐', age: 16, sex: '女'}


let jsonUser = JSON.stringify(user);
console.log(jsonUser);// {"name":"王小姐","age":16,"sex":"女"}


let parse = JSON.parse('{"name":"王小姐","age":16,"sex":"女"}');
console.log(parse);// {name: '王小姐', age: 16, sex: '女'}

4.Ajax

原生的js写法 xhr 异步请求
jQuery 封装好的方法 $(“#name”).ajax(“”)
axios 请求

九.面向对象编程

javascript、java、c#。。。面向对象，javascript有些区别！

类：模板
对象：具体的实例

在javascript这个需要大家换一下思维方式！

1.原型对象

var user = {
    name: "ding",
    age: "3",
    run: function () {
        console.log(this.name + "run.....")
    }
};

user.run();// dingrun.....

var xiaoming = {
    name: "xiaoming"
};

xiaoming.__proto__ = user; // 继承

xiaoming.run();// xiaomingrun.....

2.class继承

class Student{
    // 构造器
    constructor(name){
        this.name = name;
    }
    // 方法
    hello(){
        console.log('fuck');
    }
}


class XiaoStudent extends Student{
    // 构造器
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    // 方法
    mygrade() {
        console.log('you fuck');
    }
}

var student = new Student("xiaoming");
var xiao = new XiaoStudent("xiao",44);

student.hello();//  fuck

xiao.mygrade();// you fuck

本质上还是原型对象

3.原型链

十.操作BOM对象（重点）

1.浏览器介绍

（1）JavaScript和游览器的关系

javascript诞生就是为了能够让他在游览器中运行

（2）BOM：游览器对象模型（内核）

IE 6~11
Chrome
Safari
FireFox
Opera

（3）第三方（搜索引擎）

QQ游览器
360
等等

2.window

window 代表游览器窗口

window.alert(1);// 弹窗
window.innerHeight;// 内高
window.innerwidth;// 内宽
window.outerHeight;// 外高
window.outerWidth;// 外宽
//大家可以调整游览器窗口

3.Navigator

Navigator，封装了游览器的信息

navigator.appName;// 返回浏览器的名称
navigator.appVersioin;// 返回浏览器的版本号
navigator.userAgent;// 返回浏览器的信息
navigator.platform;// Win32

大多数时候，我们不会使用navigator对象，因为会被人为修改~

不建议使用这些属性来判断和编写代码

4.screen

代表屏幕尺寸

screen.width // 1397px
screen.height // 911px

5.location(重要)

location 代表当前页面的URL信息

host: "www.baidu.com"

href: "https://www.baidu.com/"

protocol: "https"

reloadLf reload() //刷新网页

location.assign('地址')// 设置新的地址

6.document

document 当前的页面，HTML DOM文档树

document.title
document.title='ding'

获取具体的文档树节点

<body>
<dl id="app">
    <dt>java</dt>
    <dd>python</dd>
    <dd>ding</dd>
</dl>
</body>
<script>
    var dl = document.getElementById('app');
</script>

获取cookie，劫持cookie原理

document.cookie;

<script src="aa.js">document.cookie;</script>
<!--恶意人员：获取你的cookie上传到他的服务器 -->

服务器端可以设置cookie：httpOnly

7.history

浏览历史

history.back() //后退
history.forward() //前进

十一.操作DOM对象（重点）

1.核心

浏览器网页就是一个DOM树形结构！

增删改查

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

要操作一个Dom节点，就必须先获得这个Dom节点

2.获得Dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <var id="father">
        <h1>ffffff</h1>
        <p id="p1">fuck</p>
        <p class="p2"></p>
    </var>

<script>
//对应 css选择器
var h1 = doucment.getElementByTagName('h1');// 标签
var p1 = doucment.getElementById('p1');// id
var p2 = doucment.getElementByClassName('p2');// class
var father = doucment.getElementById('father');// id

// 获取父节点下所有的子节点
var childrens = father.children;
// 获取此节点的第一个节点
var first = father.firstChild
// 获取此节点的最后一个节点
var last = father.lastChild
// 获取父节点下任意节点
var childrens = father.children[0];

</script>
</body>
</html>

这是原生代码，之后会使用jQuery();

3.更新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <var id="father">
        <h1>ffffff</h1>
        <p id="p1">fuck</p>
        <p class="p2"></p>
    </var>

<script>
//对应 css选择器
var p1 = document.getElementById('p1');
p1.innerHTML = '88888'
p1.style.color = 'red'
p1.style.fontSize = '20px'
p1.style.padding = '2em'

</script>
</body>
</html>

4.删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

方式一:

var self = document.getElementById('p1');// 获取自己
    
var father = p1.parentElement;// 获取父类

father.removeChild(self)// 通过父类删除自己

方式二：删除时一个动态的过程

father.removeChild(father.children[0])
// 删除多个节点的时候，children时再时刻变化的，删除节点的时候一定要注意！

5.插入节点

追加：append

   var p1 = document.getElementById('p1');

   // 创建一个文本节点
   var text = document.createTextNode("fuck");

    // 将文本节点添加到p元素节点中
    p1.appendChild(text);

创建一个新的标签，实现插入

// 创建一个新的p元素节点
var p = document.createElement("p");// 也可以添加其他标签

// 创建一个文本节点
var text = document.createTextNode("这是一个新的段落");

// 将文本节点添加到p元素节点中
p.appendChild(text);

// 将p元素节点添加到body元素节点中
document.body.appendChild(p);

// 可以创建一个Style标签
var mystyle= document.createElement('style');

// 设置标签属性
mystyle.setAttribute('type','text/css');

// 设置标签内容
mystyle.innerHTML = 'body{background-color: red}'; 

// 将Style标签head元素节点中
document.head.appendChild(mystyle);

var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');
var father = document.getElementById('father');

// 将p2插入到p1前面
// 要包含的节点，insertBefore（new，target）
father.insertBefore(p2,p1);

十二.操作表单（验证）

1.表单时什么 form DOM树

文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

2.获得要提交的信息

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <!--多选框的值，就是定义好的-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="boy" id="boy"> 男
        <input type="radio" name="sex" value="girl" id="girl"> 女
    </p>
</form>
<script>
    var input_text = document.getElementById('username')
    var boy_radio = document.getElementById('boy')
    var girl_radio = document.getElementById('girl')

    // 得到输入框的值
    input_text.value
    // 修改输入框的值
    input_text.value = '123'

    //对于单选框，多选框等等固定的值，boy_radio.value 只能取到当前的值
    boy_radio.checked; //查看返回的结果，是否为true，如果为true 则这个被选中
    girl_radio.checked = true;
</script>

3.提交表单 md5加密密码，表单优化

<head>
    <meta charset="UTF-8">
    <title>mulu</title>
    <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
    <form action="https://www.baidu.com" method="post" onsubmit="return aaa()">
        <p>
            <span>用户名：</span>
            <input type="text" id="account" name="account">
        </p>
        <p>
            <span>密码：</span>
            <input type="password" name="password" id="password">
        </p>
        <input type="hidden" name="MD5" id="MD5">
        <button type="submit">提交</button>
    </form>
    <script>
        function aaa() {
            var account = document.getElementById('account');
            var pwd = document.getElementById('password');
            var md5Pwd = document.getElementById('MD5');
            md5Pwd.value = md5(pwd.value);
            return true;
        }
    </script>
</body>

十三. jQuery

javascript：jquery库，里面存在大量的javascript函数

1.获取jquery

jquery (v3.7.1) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

<!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>
</body>
</html>

文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

2.使用jquery

$(selector).action()

<a href="" id="test-jquery">点我</a>
<script>
    //选择器就是css选择器
    $('#test-jquery').click(function () {
        alert('hello,jquery')
    })
</script>

3.选择器

// 原生态js，选择器少，麻烦不好记
document.getElementsByTagName();// 标签
document.getElementById();// id
document.getElementsByClassName();// 类

// jquery css 中的选择器他全部都能用
$('p').click(); // 标签选择器
$('#id').click(); // id选择器
$('.class1').click(); // class选择器

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>

5.操作DOM

节点文本操作

$('#test-ul li[name=python]').text();    //获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();    //获得值
$('#test-ul').html('<strong>123</strong>');  //设置值

css的操作

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

元素的显示和隐藏,本质display：none；

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

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

十四.小技巧

1、巩固JS（看游戏源码）

2、巩固HTML，CSS（扒网站，全部down下来，然后对应修改看效果~）

Layer弹窗组件

Element-ui

_阿伟_

关注

28
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门学习

return x;一旦执行到return 代表函数结束，返回结果！如果没有执行return ，函数执行完也会返回结果，结果就是undefinedreturn x;function(x){….} 这是一个匿名函数，把结果赋值给abs，通过abs可以调用函数！方式一和方式二等价！// 方法定义name:"nn",age:getAgeapply:在js中可以控制this的指向name:"nn",
复制链接

扫一扫

专栏目录