JavaScript
介绍
什么是javaScript?
一门世界上最流行的脚本语言-用浏览器就能运行
一个合格的后端人员，一定要精通javaScript
javaScript引入
内部标签引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert("Hello, World!");
</script>
</head>
<body>
</body>
</html>
外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/qj.js"></script>
</head>
<body>
</body>
</html>
浏览器控制台使用
基本语法
java定义变量是严格按照左边变量的类型，例如int number=3,变量number就是int类型，同时右边的值也会判断是什么类型，左右类型是否匹配
而js变量由于没有类型，例如var num=3，所以变量类型是依靠右边的值决定的，现在是3，所以num是整数类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script >
//1.定义变量 变量类型 变量名 = 变量值，变量类型都是var
var num=1;
var age = 20;
//2.条件控制
if(2>1){
alert("2大于1");
}
//console.log()在浏览器控制台上打印变量
</script>
</head>
<body>
</body>
</html>
数据类型
1,number
js不区分小数和整数
2、字符串
"abc"
3、布尔值
true\false
4、比较运算符!!!!重要
1、=
2、== 等于（类型不一样，值一样，也会判断为true）
3、=== 绝对等于（类型一样，值一样，才会判断为true）
尽量避免用浮点数进行运算，存在精度问题，和java一样，用判断
5、null和undefined 空和未定义
6、数组
java的数组需要同个类型，js不用
var arr=[1,2,"hello"]
如果越界，会显示underfined
7、对象-用，号隔开，不用像JAVA一样要定义类，才能new对象，
var person={
name:"jjf",
age=3,
}
取对象的值：person.name
开户检查模式strict
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script >
"use strict"//写在第一行，启用严格模式,预访JS的随意性导致报错，不加的话num=1都不会报错，加了你要加上var关键字
//局部变量建议使用let
var num=1;
</script>
</head>
<body>
</body>
</html>
字符串
多行字符串
//多行字符，可以实现不用加转义字符就能多行
var name =`我是
你你`
console.log(name);
模板字符串
let name ="jj";
let age = 20;
let message = `Hello, ${name}`;
console.log(message);
字符串长度
console.log(str.length)
大小写转换
//注意，这里是方法了，不是属性了
student.toUpperCase()
从第一个字符串截取到最后一个字符串
student.substring(1)
数组类型
Array可以包含任意的数据类型，java不行
//定义数组
var arr=[1,2,3,4,5,6]
//长度
arr.length
注意，如果给arr.length赋值，数组大小会发生变化 ，如果赋值过小，元素就会丢失。这个java不一样，而且越界也不会报错，只会显示 undfined
//通过元素获得下标索引
arr.indexof(2)
1
//silce() 截取array的一部分，返回一个新数组,类似于srting中的substring
//push,pop(push，压入到尾部，pop,弹出尾部一个元素）
arr.push("a","b")
8
arr
(8) [1, 2, 3, 4, 5, 6, 'a', 'b']
arr.pop()
'b'
arr
(7) [1, 2, 3, 4, 5, 6, 'a']
//unshift(),shift(),压入到头部，头部弹出一个元素
//排序
arr.sort
//元素反转
arr.reverse()
//拼接
concat()-concat()并没有修改数组，只是会返回一个新的数组
arr.concat([1,2])
(9) [1, 2, 3, 4, 5, 6, 'a', 1, 2]
arr
(7) [1, 2, 3, 4, 5, 6, 'a']
//连接符join
拼接数组，使用特定的字符串连接
//多维数组
arr=[[1,2],[3,4]];
(2) [Array(2), Array(2)]0: (2) [1, 2]1: (2) [3, 4]length: 2[[Prototype]]: Array(0)
arr[1][1]
4
对象
1\java的对象是new出来的，js就是若干个键值对
所有的键都是字符串，值是任意对象person['age']
var person={
//属性名：属性值
name:"John",
age:30,
city:"New York"
}
//js的对象，用{}表示一个对象，多个属性用逗号隔开，最后一个属性不加逗号
使用不一个不存在的对象属性，不会报错，只会undefined
2\可以动态的添加或删除对象的属性
delete person.name
true
person
{age: 30, city: 'New York'}age: 30city: "New York"[[Prototype]]: Object
person.xixi="haha"
'haha'
person
{age: 30, city: 'New York', xixi: 'haha'}
3\判断属性是否在这个对象中
"age" in person
true
流程控制-分支和循环
if判断
var age=3;
if(age>=18){
console.log("You are old enough to vote.");
}else{
console.log("You are not old enough to vote.");
}
while
var age=3;
while(age<18){
console.log("You are not yet 18.");
age++;
}
console.log("You are 18 or older.");
for
var age=3;
for(var i=0;i<age;i++){
console.log("Hello World");
}
数组循环
var age=[1,2,3,4,5];
//js叫做函数，java叫做方法
age.forEach(function(element){
console.log(element);
});
Map和Set
MAP
//es6
var map=new Map([['tom',100],['jerry',200],['alice',300]]);
var name=map.get('tom');//通过key获取value
map.set('admin',400); //通过key设置value
map.delete("tom");
console.log(name);
Set:无序不重复的集合
var set =new Set([1, 2, 3, 2, 1]); // Set [1, 2, 3]会去重
set.add(4); // Set [1, 2, 3, 4]
set.delete(2); // Set [1, 3, 4]
console.log(set.has(2)); // false
遍历map
var map = new Map([["apple", 1], ["banana", 2], ["orange", 3]]);
for(var x of map){
console.log(x);
}
函数
方法：java，对象（属性、方法）
函数：js
定义函数
java:public 返回值类型 方法名{}
函数-funtion 方法名
//第一种方式
funtion abs(x){
if(x>0){
return x;
}else{
return -x;
}
}
//第二种方式
var abs =function(x){
}
一旦执行到return,代表函数结束，返回结果
如果没有执行return,函数执行完也会返回结果，结果就是undefined
调用函数
abs(10)//10
参数问题：js可以传任意参数，也可以不传递参数，不会报错，最多undefind
只能在方法中定义判断，手动抛出异常
arguments是获得所有传进来的参数
var abs=function(x){
console.log(x);
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
rest,获取除了定义参数之后的参数
function aaaa(a, b,...rest) {
console.log(a );
console.log(b);
console.log(rest);
}
//aaaa(2,4,5,5)
变量的作用域let const
在js,var定义的变量是有作用域的，假设在函数中声明，在函数外是不能使用的（如果要实现，得用闭包）
如果在函数使用了相同的相同变量名，只要在函数内部，就不冲突
//变量在函数外就用不了
function qj(){
var x=1;
x=x+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined
function qj(){
//内部函数可以访问外部函数的成员，反之不行
var x=1;
function y(){
var y=x+1;//2
}
var z=y+1;//y is not defined
}
function qj(){
//函数会直接从自身函数找变量开始，由内向外查找，假设内外有相同的变量，会自动屏蔽外部的变量
var x=1;
function y(){
var x=2;
console.log(x);//2
}
console.log(x);//1
}
//由于js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值，所以会报错
//所以养成规范，变量的定义都放在函数的头部，不要乱放，便于阅读和维护
function qj(){
var y;
var x="x"+y;
console.log(x);
y="y";
//正确的写法
function qj2(){
var x=1,
y=x+1;
z,i,async
//后面随便用
}
全局变量
//全局变量，内部外部都可以访问
var x = 10;
function myFunction() {
console.log(x);
}
myFunction();
console.log(x);
全局对象window
var x = "10";
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定到window对象上
全局变量和全局对象window的解释说明
// var定义的全局变量成为window属性
var message = "Hello";
console.log(window.message); // "Hello"
js实际只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错refrennceerror
规范
如果全局变量都绑定在window上，如果不同的js文件，使用了全局变量，如何减少冲突？？
//通过重新定义一个全局对象来替换window对象
//降低全局命名冲突的问题
//唯一全局变量
var jj={
}
//定义全局变量
jj.name="jj";
jj.add=function(a,b){
return a+b;
}
局部作用域let
解决局部作用域冲突问题
function myFunction() {
for (var i = 0; i < 10; i++) {
console.log(i)
}
console.log(i+1);//在同一个函数中，i是可以被能被访问的
}
function myFunction() {
for (let i = 0; i < 10; i++) {
console.log(i)
}
console.log(i+1);//用了let声明的变量i，只能在for循环中使用，
}
所以定义局部作用域的变量都用let
常量const
const pi="3.14";
方法
方法就是把函数放在对象里面，对象只有两个东西：属性和方法
补充：
一、JavaScript 的灵活性：“直接调用”的真相
JavaScript 更偏向动态语言，对象的创建和方法调用方式更灵活，但需要理解其底层机制。
1. 方法直接定义在对象上
你可以直接通过对象字面量创建对象并调用方法，无需 new：
javascript
// 直接定义对象和方法
const dog = {
name: "Buddy",
bark() {
console.log("Woof!");
}
};
dog.bark(); // 直接调用 → "Woof!" ✅
2. 动态添加方法
JavaScript 对象可以随时扩展方法：
javascript
const cat = {};
// 动态添加方法
cat.meow = function() {
console.log("Meow~");
};
cat.meow(); // "Meow~" ✅
3. 构造函数与 new 的使用
如果你需要复用对象模板（类似 Java 类），仍需通过 new 创建实例：
javascript
class Bird {
constructor(name) {
this.name = name;
}
fly() {
console.log(`${this.name} is flying!`);
}
}
const eagle = new Bird("Eagle");
eagle.fly(); // "Eagle is flying!" ✅
// 不用 new 会报错
const wrong = Bird("Eagle"); // ❌ 抛出错误：Class constructor cannot be invoked without 'new'
二、Java 的严格性：必须通过实例调用
Java 是静态类型语言，方法调用严格依赖于类与对象的关系，设计更为严谨。
1. 类与对象的强制绑定
必须通过 new 创建对象实例后才能调用实例方法：
java
public class Dog {
private String name;
public Dog(String name) { this.name = name; }
public void bark() { System.out.println("Woof!"); }
}
public static void main(String[] args) {
Dog myDog = new Dog("Buddy");
myDog.bark(); // "Woof!" ✅
// Dog.bark(); ❌ 直接通过类调用会报错
}
2. 静态方法的特殊规则
仅有静态方法（static 修饰）可通过类直接调用，无需实例：
java
public class MathUtils {
public static int add(int a, int b) {
return a + b;
}
}
public static void main(String[] args) {
int sum = MathUtils.add(2, 3); // ✅
}
开始
var jj={
name:"John",
birth:"1990-01-01",
//方法
age:function(){
var r=new Date().getFullYear()-new Date(this.birth).getFullYear();
return r;
}
}
//属性
jj.name
//方法,一定要带（）
jj.age()
apply
在js中可以控制this指向，否则直接调用方法，一般this是指window这个对象
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var jj={
name:"John",
birth:"1990-01-01",
//方法
age:getAge
};
//jj.age()//是可以的，
getAge.apply(jj,[]);//任何一个方法都有apply方法，可以将this绑定到另一个对象上
内部对象
Date
var now = new Date();//Sat Mar 22 2025 10:30:01 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getTime();//时间戳//174261077
补充：json
早期，都是用xml文件进行数据传输，现在是用json
在javascript中，一切都是对象，任何js支持的类型都可以用json来表示
--格式
---对象都用{}
---数组都用【】
---所有的键值对都用key:value
var user={
name:"John",
age:30,
city:"New York"
}
console.log(user);//{name: "John", age: 30, city: "New York"}是对象,在控制台是可以展开的
//将对象转换为JSON字符串
var jsonStr=JSON.stringify(user);
console.log(jsonStr);//'{"name":"John","age":30,"city":"New York"}'是字符串
//将JSON字符串转换为对象
var obj=JSON.parse('{"name":"John","age":30,"city":"New York"}');
console.log(obj);//{name: "John", age: 30, city: "New York"}是对象
json和js对象的区别
var obj={a:"hello",b:"aa"};
var json='{"a":'hello',"b":'aa'}；
Ajax
-原生的js写法 xhr异步请求
-jQuey封闭好的方法，$("#name").ajax("")
-axios请求
面向对象编程
js，java,c++都是面向对象编程
--类：模板
--对象：具体的实例
在JS中，如果需要使用另一个对象的方法或属性，是原型继承，直接对象继承另一个对象-两种写法，class是ES6引入的
proto 原型
而java中，是得用类继承类
var user={
name:"John",
age:30,
run:function(){
console.log(this.name+" is running");
}
}
var xiaoMing= {
name: "XiaoMing",
}
xiaoMing.__proto__=user;//xiaoming的原型指向user,这样就能用run方法了,
class继承-主流
//ES6之后
//定义一个学生的类
class Student {
constructor(name) {//就像java中的构造方法
this.name = name;
}
hello() {
alert("hello")
}
}
var xiaoming=new Student("xiaoming");
xiaoming.hello()
继承
//ES6之后
//定义一个学生的类
class Student {
constructor(name) {//就像java中的构造方法
this.name = name;
}
hello() {
alert("hello")
}
}
class XiaoStdent extends Student {
constructor(name, grade) {
super(name);
this.grade = grade;
}
myGrade() {
alert("my grade is " + this.grade);
}
}
let xiao = new XiaoStdent("xiao", 3);
xiao.hello();
xiao.myGrade();
继承本质还是原型
存在原型链
操作BOM对象（重点）
js和浏览器的关系？
网景公司-js诞生就是为了能在浏览器中运行，js脚本可以操作浏览器
BOM：浏览器对象模型
--IE
--chrome
--safari
--firefox
以上浏览器指的是内核，通常360，QQ都是用了上面的内核
window
window代表是浏览器窗口
window.outerHeight对象的属性
852
window.alert(1);对象的方法
navigator浏览器的信息
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0'
screen代表屏幕尺寸
screen.height
900
screen.width
1440
loction重要-代表当前页面的URL信息
location
Location {ancestorOrigins: DOMStringList, href: 'https://www.baidu.com/', origin: 'https://www.baidu.com', protocol: 'https:', host: 'www.baidu.com', …}
ancestorOrigins
:
DOMStringList {length: 0}
assign
:
ƒ assign()
hash
:
""
host
:
"www.baidu.com"
hostname
:
"www.baidu.com"
href
:
"https://www.baidu.com/"
origin
:
"https://www.baidu.com"
pathname
:
"/"
port
:
""
protocol
:
"https:"
reload
:
ƒ reload()
replace
:
ƒ replace()
search
:
""
toString
:
ƒ toString()
valueOf
:
ƒ valueOf()
Symbol(Symbol.toPrimitive)
:
undefined
[[Prototype]]
:
Location
document代表当前的页面,HTML DOM文档树
document.title
'百度一下，你就知道'
document.title='cjf'
'cjf'
获取具体的文档节点
<body>
<dl id="app">
<dt>JavaScript</dt>
<dd>javase</dd>
<dd>javascript</dd>
</dl>
<script>
var dl=document.getElementById("app");
</script>
document.cookie
'BAIDUID_BFESS=22416490A8C3DA5B751AD353A293781A:FG=1; BAIDU_WISE_UID=wapp_1740788934902_328; BIDUPSID=22416490A8C3DA5B751AD353A293781A; PSTM=1742043921; BD_HOME=1; BD_UPN=12314753; ZFY=qf5Tg1icJLsJBNtLPA:B5N2fJ0:Ax5siQv8HejvxF6O7I:C; H_PS_PSSID=61027_61673_62080_62325_62347_62427_62473_62484_62500_62456_62454_62452_62450_62602_62637_62674; BA_HECTOR=850h242121a0ak000ha4a1250t0g6c1jts9b523'
劫持cookie原理-一般出现病毒网页
上着正常网页，弹出一个新网页，植入了他的js文件，通过劫取的你的cookie上传到他的服务器
登陆淘宝，刷新天猫就可以直接登陆，就是因为拿了你的cookie信息
history
history.back()//后退
history.forward()//前进
获得DOM节点
整个浏览器网页就是一个dom树形结构
--更新：更新dom节点
--遍历dom节点：得到Dom节点
--删除：删除一个dom节点
--添加：添加一个新的节点
要操作一个dom节点，就一定要获得这个dom节点
<div id="father">
<h1>JavaScript</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//css选择器
var h1 = document.getElementsByTagName('h1')[0]; // 获取第一个 h1 元素
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2')[0]; // 获取第一个类名为 'p2' 的元素
var father = document.getElementById('father');
// 使用 father.children 获取 father 的所有子元素
console.log(father.children);
// 使用 father.firstChild 获取 father 的第一个子元素
console.log(father.firstChild);
// 使用 father.lastChild 获取 father 的最后一个子元素
console.log(father.lastChild);
</script>
这是原生代码，后面都是用jQuery
更新DOM节点
<div id="id1">
</div>
<script>
var id1= document.getElementById('id1');
id1.innerHTML = "Hello World";//修改文本的值
//id1.innerHTML += "<strong>Welcome to JavaScript</strong>";//添加HTML代码
id1.style.color = "red";//修改文本颜色
id1.style.backgroundColor = "yellow";//修改背景颜色
</script>
删除DOM节点
步骤：先获取父节点，再通过父节点删除自己
father.removeChild(p1)
或者通过子元素找到父元素，再通过父元素删除自己
删除是一个动态的过程，删除多个节点的时候，children是一直在变化的
插入节点
我们获得了某个节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，就会覆盖了
所以一般会用追加
//移动标签
<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>
//创建标签
var js = document.getElementById("js");//已经存在的节点
var list = document.getElementById("list");
list.appendChild(js);
//通过js创建节点并添加到list中
var newP = document.createElement("p");//创建新的节点
newP.id="newP";//设置id
newP.innerText="newP";//设置内容
list.appendChild(newP);//添加到list中
骚操作，在文件中加入是script标签，同时也是创建标签的另一种写法，这个方法好点，创建标签的时候也赋值
//创建一个标签节点(通过这个属性，可以设置任意的值）
var myScript = document.createElement("script");
myScript.setAttribute("type","text/javascript");//设置src属性
list.appendChild(myScript);//添加到list中
insert插入到前面
操作表单（验证）
<body>
<form action="post">
<p>
<span>密码</span><input type="password" id="password">
</p>
</form>
<script>
var username = document.getElementById("username");
//得到输入框的value值
var usernameValue = username.value;
//修改输入框的value值
username.value = "2233";
</script>
表单提交验证及MD5加密!
<form action="#" method="post" >
<p>
<span>用户名</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码</span><input type="password" id="password" name="password">
</p>
<!--绑定事件-->
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa() {
var username = document.getElementById("username");
var password = document.getElementById("password");
//MD5加密
console.log(username.value);
console.log(password.value);
//MD5加密
password.value = md5(password.value);
}
</script>
JQuery学习
Jquery库，里面存在大量JS方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<srcipt src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></srcipt>
<!-- 可以引入链接，链接挺慢的，还是建议本地导入，也可以导入本地文件，但是要到官网-->
</head>
<body>
<!--
公式：$(selector).action()
selector：选择器，可以是标签名、类名、ID、属性、内容等
action：动作，可以是click、mouseover、mouseout、change等
-->
<a href="#" id="test">点我</a>
<script>
//选择器就是css选择器
$('#test').click(function(){
alert("你点击了我");
});
$('p').click(); //点击所有p标签
//事件
//鼠标，键盘
$('p').mouseover(function(){
$(this).css('background-color','red');
});
</script>
补充，如果jquery不通过文件导入，那一定要在head中加script标签注明jquery的链接，这样在body的script写的jQueyt才能生效
浙公网安备 33010602011771号