JavaScript学习

1、什么是JavaScript

是一门流行的脚本语言

一个合格的后端人员，必须精通JavaScript

2、快速入门

2.1、引入

内部标签
```
<script>
	//...
</script>
```
外部引入

abc.js
```
//...
```
test.html
```
<script src="abc.js"></script>
```

2.2、基本语法入门

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

    <script>
        //1.定义变量 变量类型 变量名=变量值
        var score=71;
        if(score>60 && score<70){
            alert("60~70");
        }else if(score>70 && score<80){
            alert("70~80");
        }else {
            alert("other");
        }
    </script>

</head>
<body>

</body>
</html>

2.3、数据类型

数值，文本，图形，音频，视频。。。

number

js不区分小数和整数，Number

123 //整数123
123.1 //浮点数123.3
1.123e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大

字符串

‘abc' "abc"

布尔值

true,false

逻辑运算

&& 两个真，结果为真
|| 一个为真，结果为真
！ 取反

比较运算符重要

=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于 （类型一样，值一样，结果为true）

此为JS缺陷，坚持不要使用==比较

须知：

NaN===NaN，与所有数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否为NaN

null和undefined

null空
undefined 未定义

数组

Java中是一系列相同类型对象，JS中不需要

对象

对象是大括号，数组是中括号

每个属性用逗号隔开

        var person={
            name:"tiant",
            age:3,
            tags:['js','java','web','...']
        }

取对象的值

person.name
>'tiant'
person.age
>3

2.4、严格检查模式

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

<!--
        'use strict':严格检查模式，预防JavaScript的随意性导致产生的一系列问题
        必须写在JavaScript第一行
        局部变量建议使用let定义
-->

    <script>
        'use strict'
        //全局变量
        let i=1;

    </script>

</head>
<body>

</body>
</html>

3、数据类型

3.1、字符串

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

2、注意转义字符 \

\'
\n
\t
\u4e2d  \u### Unicode字符
\x41
ASCII字符

3、多行字符串编写

//tab上面 esc下面
        var msg=`
        hello
        world
        Nihao
        你好
        `

4、模版字符串

//tab上面 esc下面
let name="raottt"
let age=3;
let msg=`你好呀,${name}`

5、字符串长度

str.length

6、字符串可变性，不可变

7、大小写转换

//注意，是方法，不是属性
student.toUpperCase()

8、student.indexOf('t')

9、substring

student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)

3.2、数组

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

var arr=[1,2,3,4,5,6];//通过下标取值和赋值

1、长度

arr.length

注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素会丢失

2、indexOf，通过元素获得下标索引

arr.indexOf(2)

3、slice() 截取Array的一部分，返回一个新数组，类似于String中的substring

4、push，pop

push:压入到尾部
pop:弹出尾部一个元素

5、unshift(),shift()头部

unshift:压入到头部
shift:弹出头部元素

6、排序sort()

arr
(3) ['B', 'C', 'A']
arr.sort()
(3) ['A', 'B', 'C']

7、元素翻转reverse()

(3) ['A', 'B', 'C']
arr.reverse()
(3) ['C', 'B', 'A']

8、concat()

(3) ['C', 'B', 'A']
arr.concat([1,2,3])
(6) ['C', 'B', 'A', 1, 2, 3]
arr
(3) ['C', 'B', 'A']

注意：concat()并没有修改数组，只是会返回一个新的数组

9、连接符join

打印拼接数组，使用特定字符串连接

(3) ['C', 'B', 'A']
arr.join('-')
'C-B-A'

10、多维数组

arr=[[1,2],[3,4],["5","6"]];
arr[1][1]
4

3.3、对象

若干个键值对

var 对象名={
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}


var person={
    name:"tiant",
    age:3,
    email:"324324@qq.com",
    score:0
    }

{....}表示一个对象，多属性之间加逗号，最后一个不要

1、对象赋值

person.name="tt"
'tt'
person.name
'tt'

2、使用一个不存在的对象，不会报错

3、动态删减属性

delete person.name
true

4、动态添加，直接给新属性添加值即可

person.haha="haha"
"haha"
person

5、判断属性是否在对象中

'age' in person
true

3.4、流程控制

if判断

var age=3;
if (age>3){
	alert("haha")
}else if(age<5){
	alert("kua")
}else{
	alert("...")
}

循环

while(age<100){
    age=age+1;
    console.log(age)
}

for

for(let i=0;i<100;i++){
    console.log(i)
}

数组循环

var age=[12,3,4,51,3];
age.forEach(function(value){
    console.log(value)
})

3.5、Map和Set

3.6、iterator

4、函数及面向对象

4.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){..}匿名函数，但可以把结果赋值给前端

arguments

arguments是一个JS免费赠送的关键字

达标传递进来的所有的参数，是一个数组!

rest

4.2、变量的作用域

function qj() {
	var x=1;
	x=x+1;
}
	x=x+2;//Uncaught ReferenceError: x is not defined

两个函数相同变量名，不冲突

function qj() {
    var x=1;
    x=x+1;
}

function qj2() {
    var x=1;
    x=x+1;
}

内部函数可以访问外部函数成员

变量定义放在头部，便于维护

全局函数

全局变量window

由于所有全局变量都会绑定到window上，不同的js文件使用相同变量会冲突，所以将代码放入自己定义的唯一空间名字中

常量const，只读

4.3、方法

方法就是把函数放在对象里面，对象只有连个对象，属性和方法

var R={
    name:'tt',
    birth:2001,
    age:function () {
        var now=new Date().getFullYear();
        return now-this.birth;
    }

}
//属性：R.name
//方法：R.age(),一定要带括号
this无法指向，是默认指向调用它的对象

5、常用对象

5.1、Date

基本使用

var now=new Date();
now.getTime();//时间戳
now.getDate();//日
now.getDay();//星期几

5.2、JSON

json是什么

早起，所有数据传输习惯使用XML文件

JSON是一种轻量级数据交换格式
简洁清晰的层次结构使得json成为理想数据交换语言
易于阅读和编写，同时易于机器解析和生成，有效提高网络传输速率

在JavaScript一切皆为对象，任何js支持的类型都可以用json表示

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

JSON字符串与JS对象转换

var user={
    name:'tt',
    age:3,
    sex:'女'
}
//对象转换成json字符串，
var jsonUser=JSON.stringify(user);

//json字符串转化为对象
var obj=JSON.parse('{"name":"tt","age":3,"sex":"女"} ');

5.3、Ajax

原生的js写法 xhr异步请求
jQuery封装好的方法
axios请求

6、面向对象编程

6.1、什么是面向对象

JavaScript，Java，c#....面向对象；JavaScript有些区别

类：模板

对象：具体实例

原型__ proto __

class继承

class关键字是在es6引入

1、定义一个类，属性，方法

class Student{
    constructor(name) {
        this.name=name;
    }
    hello(){
        alert('hello')
    }
}

class XiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert('我是一个小学生')
    }
}

var xiaoming=new Student("xiaoming")
var xiaohong=new XiaoStudent("xiaohong",1 )

7、操作Bom元素(重点)

浏览器介绍

JavaScript诞生就是为了能够让它在浏览器中运行

BOM:浏览器对象模型

IE 6-11
Chrome
Safari
FireFox

三方

QQ浏览器
360浏览器

window

window代表浏览器窗口

Navigator

Navigator，封装了浏览器信息

navigator.appVersion
'5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1'

大多是时候不会使用navigator对象，因为会被人为修改，不建议使用这些属性来判断和编写代码

screen，代表屏幕尺寸

screen.height
844
screen.width
390

location（重要）

location代表当前页面URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()
location.assign('http:....')//设置新地址

document

document代表当前页面，HTML DOM文档数

获取具体文档树节点

<dl id="appp">
    <dt>java</dt>
    <dd>javase</dd>
    <dd>javaee</dd>
</dl>

<script>
    var dl=document.getElementById('appp')
</script>

获取cookie

document.cookie

劫持cookie

服务器端可以设置cookie：httpOnly

history 表示浏览器历史记录

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

8、操作DOM对象（重点）

DOM：文档对象模型

核心

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

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

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

获得dom节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


<script>
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');
    var childrens=father.children;
</script>

此为原生代码，以后使用jQuery

更新节点

<div id="id1">

</div>

<script>
    var id1=document.getElementById('id1 ');
</script>

操作文本

id1.innerText='123'修改文本值
id1.innerHTML='123' 可以解析HTML文本标签

操作JS

id1.style.color='yellow';
id1.style.fontSize='20px';

删除节点

删除节点步骤，先获取父节点，在通过父节点删除自己

father.removeChild(p1)

插入节点

获得了某个Dom节点，假设dom节点是空的，通过innerHTML就可以增加一个元素，如果已经存在，就不能如此操作，会覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
list.appendChild(js);//追加到后面
</script>

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

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
//通过JS创建一个新节点
    var newP=document.createElement('p');
    newP.id='newP';
    newP.innerText='hello';

</script>

9、操作表单（验证）

表单是什么， form Dom树

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

表单目的：提交信息

<form action="post">
    <p>    <span>用户名：</span><input type="text" id="username"></p>

    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>

</form>

<script>
    var input_text=document.getElementById('username');
    var boy_text=document.getElementById('boy');
    var girl_text=document.getElementById('girl');

    input_text.value;//得到
    input_text.value='123';//修改

    //单选框和多选框等固定的值，boy_radio.value只能去到当前的值
    boy_text.checked;//查看返回结果，为true即选中
    girl_text.checked=true;

</script>

提交表单

10、jQuery

JavaScript

jQuery库，存在大量JavaScript函数

获取jQuery $(selector).action()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.bootcss.com/jQuery/3.4.1/core.js"></script>-->
    <script src="lib/jquery-3.6.4.js"></script>
</head>
<body>

<a href="" id="test-jQuery">dfds</a>
<script>
   // document.getElementById('id');
    $('#test-jQuery').click(function () {
        alert(1);
    })
</script>

选择器

文档工具站：http://jQuery.cuishifeng.cn/

事件

操作DOM

节点文本操作

$('#test_ul li[name=python]').text();//获得值
$('#test_ul li[name=python]').text('123');//设置值
$('#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();

posted @ 2023-04-24 00:06 尧天天阅读(20) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaWeb学习

· Java面向对象

· JavaScript 学习笔记

· JavaScript

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

昵称：尧天天
园龄： 2年8个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Rday

人生苦难重重