JavaScript学习
2022/9/4 1:25:16
本文主要是介绍JavaScript学习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
一、什么是JavaScript
JavaScript世界上最流行的脚本语言
一个合格的后端人员，必须精通JavaScript
二、快速入门
2.1、引入JavaScript
-
内部引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> alert('hello,JavaScript'); </script> </head> <body> </body> </html> -
外部引入
alert('hello,JavaScript');<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/1.第一个JavaScript.js"/> </head> <body> </body> </html>
2.2、基本语法
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1.定义变量 变量类型 变量名 = 变量值；
var num = 80;
// alert(num);
// 2. 条件语句
if (num>70&&num<=100){
alert("70~100");
}else if(num>60&&num<=70){
alert("60~70");
}else{
alert("other");
}
</script>
</head>
<body>
</body>
</html>
2.3、数据类型
number数
js不区分小数和整数，Number
123//整数123 123.1//浮点数123.1 1.123e3//科学计数法 -99//负数 NaN // not a number信用证不是数字 Infinity //表示无限大
字符串
'abc' "abc"
布尔值
true , false
逻辑运算
&& 两个都为真，结果为真 || 一个为真，结果为真 ! 真即假，假即真
比较运算符！！！重要！
= ==等于（类型不一样，值一样，也会判断为true) ===绝对等于(类型一样,值一样，结果true)
浮点数问题
避免使用浮点数进行运算，存在精度的问题
Math.abs(1/3-(1-2/3))<0.00000001
null和undefined
- null空
- undefined未定义
数组
Java一些列相同类型的对象 ~，JS中不需要这样!
var arr = [1,2,3,4,5, 'he11o',nu11,true]
2.4、严格检查模式
'use strict'
局部变量建议都用let去定义
三、数据类型
3.1、字符串
1、多行字符串编写
var msg = `hello 你好呀 world `
2、模板字符串
'use strict';
let name = '小菜';
let msg = `你好呀，${name}`;
alert(msg);
3、substring
[) str.substring(1)//从第一个字符串截取到最后一个字符串 str.substring[1，3)//从第一个字符串截取到第三个字符串，前面可以取到
3.2、数组
Array可以包含任意的数组类型
var arr = [1,2,3,4,5]
1、长度
arr.length
注意：加入给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
2、indexOf，通过下标索引
3、slice（）截取Array的一部分，返回一个新的数组
4、push，pop
push//往数组最后面加入值 pop//往尾部剔除值
5、unshift() shift
unshift//往数组头部加入值 shift//往头部剔除值
6、排序
str.sort()
7、原数反转
str.reverse()
8、拼接concat()
str.concat([1,2,3])//生成一个新数组
9、连接符join
["c"，"B"，"A"]
arr.join('-')
"C-B-A"
3.3、对象
var person = {
name: "kuangsnen",
age: 3,
emai1: "24736743@qq.com",
score: 0
}
Js中对象，{..…}表示一个对象，键值对描述属性xxxx: xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号!
1、对象赋值
person.name = "qinjiang" >"qinjiang" person.name >"qinjiang"
2、使用一个不存在的对象属性，不会报错！undefined
person.haha undefined
3、动态的删减属性
delete person. name true person
4、动态的添加，直接给新的属性添加值即可
person. haha = "haha" "haha" person
5、判断属性值是否在这个对象中!xxx in xxx!
'age' in person true //继承 'tostring' in person true
6、判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person. hasownProperty('tostring')
false
person.hasownProperty( 'age')
true
3.4、流程控制
if
while
for
do...while
3.5、Map和Set
ES6新特性
map:
//Es6 Map
//学生的成绩，学生的名字
// var names = ["tom" , "jack" , "haha"];
// var scores = [100, 90,80];
var map = new Map([[ 'tom' ,100],[ 'jack ' ,90], [ 'haha',80]]);
var name = map.get('tom');//通过key获得value
map.set('admin',123456)//新增或修改
map.delete("tom")
Set：无序不重复的集合
var set = new Set([3,1,1,1]);//set去重 set.add(2);//添加set.delete(1);//删除 console.log(set.has (3));//是否包含某个元素
3.6、iterator
迭代Map和Set
遍历map：var x of map
var map = new Map([[ "tom" ,100],["jack",90], [ "haha",80]]);
for ( let x of map){
console.log(x)
}
遍历set
var set = new set([5,6,7]);
for (let x of set) {
console. log(x)
}
四、函数及面向对象
4.1、函数定义及变量作用域
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return代表函数结束，返回结果!
如果没有执行return，函数执行完也会返回结果，结果就是undefined
4.2、变量的作用域
局部函数：
这个是在JavaScript建立之初就存在的特性。养成规范:所有的变量定义都放在函数的头部，不要乱放，便于代码维护;
全部变量：
都可以使用
规范
如果内外函数重名，由内向外查找
由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~>如果能够减少冲突?
//唯一全局变量
var KuangApp = {};
//定义全局变量
KuangApp.name = 'kuangshen ';
KuangApp.add = function (a,b) {
return a + b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~
局部作用域 let
function aa(){
for(var i = 0;i < 100; i++){
console.log(i)
}
console.log(i+1)
}
解决问题：
function aa(){
for(let i = 0;i < 100; i++){
console.log(i)
}
console.log(i+1)
}
建议let
常量 const
定义一个常量用const来定义，例如：const PI='3.14';
const PI='3.14';
4.3、方法
方法就是把函数放在对象的里面，对象只有两个东西:属性和方法
let Aaron = {
name: '小菜',
birth: 2001,
age: function () {
let nowAge = new Date().getFullYear();
return (nowAge - this.birth);
}
}
//属性
Aaron.name
//方法,带括号
Aaron.age()
Apply应用
通过使用apply，改变this的指代
function getAge() {
let nowAge = new Date().getFullYear();
return (nowAge - this.birth);
}
let Aaron = {
name: '小菜',
birth: 2001,
age:getAge
}
getAge.apply(Aaron,[])
五、常用对象
标准对象
5.1、Date
console.log(now)
5.2、JSON
早期，所有数据传输习惯使用XML文件!
- JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript一切皆为对象、任何js支持的类型都可以用SON来表示; number，string...
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对都是用 key : value
let user = {
name: "Aaron",
age: 21,
sex: '男'
};
//对象转化为json字符串{"name":"Aaron","age":21,"sex":"男"}
let jsonUser = JSON.stringify(user);
let obj = JSON.parse(jsonUser);
结果
console.log(user)
VM62:1 {name: 'Aaron', age: 21, sex: '男'}
undefined
console.log(jsonUser)
VM110:1 {"name":"Aaron","age":21,"sex":"男"}
六、面向对象编程
class继承
class关键字，ES6引入的
1、定义一个类，属性方法
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello')
}
}
class pupil extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小学生')
}
}
var xiaoming = new Student("xiaoming");
本质：看原型
七、操作Bom对象（重点）
document代表当前的页面，HTML DOM文档树
document.title "百度一下，你就知道" document.title='狂神说' "狂神说"
获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>javaEE</dd>
</dl>
<script>
var dl = document. getElementById( 'app ' );
</script>
劫持cookie原理
服务器可以设置cookie：httpOnly来防止被劫持
history浏览器的历史记录
history.back//后退 history.forward//前进
7.1、操作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>
//对应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;//获取父节点下的所有子节点
后期jQuery代替
7.2、更新Dom
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id');
</script>
操作文本：
- id1.innerText='456' 修改文本的值
- id1.innerHTML='123' 可以解析HTML文本标签
操作JS
id1.style.color = 'yellow'; id1.style.fontSize = '20px'; id1.style.padding = '2em';
7.3、删除Dom
删除节点的步骤：
先获取父节点，再通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self)
//删除是一个动态的过程;
father.removechi1d(father.chi7dren[0])
father.removechild(father.children[1])
father.removechild(father.children[2])
</script>
注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！
7.4、插入Dom节点
追加
<p id="js">javascript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me ">avaME</p>
</div>
<script>
var js = document.getElementById( 'js ');
var list = document.getElementById( ' list' );
list.appendchild(js);
</script>
创建一个新的标签
<script>
var js = document.getElementBy1d('js');//已经存在的节点
var list = document.getElementById('list');
//通过js 创建一个新的节点
var newP = document.createElement('p');//创建一个p标签
newP.id = 'newP' ;
newP.innerText = 'He11o,Kuangshen';
//创建一个标签节点(通过这个属性，可以设置任意的值)
var myscript = document.createElement('script');
myscript.setAttribute( 'type' , 'text/javascript')
</script>
八、操作表单（验证）
8.1、表单
表单是什么form DOM树
- 文本框 text
- 下拉框 < select>
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
目的：提交信息
8.2、提交表单(加密算法)
普通算法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<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 a()">
<p>
<span>用户名:</span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span> <input type="password" id="input_password">
</p>
<input type="hidden" id="md5_password" name="password">
<!--绑定事件-->
<button type="submit">提交</button>
</form>
<script>
function a() {
alert(1);
var username = document.getElementById('username');
var password = document.getElementById('input_password');
var md5_password = document.getElementById('md5_password');
//console.log(username.value);
password.value = md5(password.value);
//MD5 算法
md5_password.value = md5(password.value);
//console.log(md5_password.value);
return true;
}
</script>
</body>
</html>
MD5算法表单优化
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<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 a()">
<p>
<span>用户名:</span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span> <input type="password" id="input_password">
</p>
<input type="hidden" id="md5_password" name="password">
<!--绑定事件-->
<button type="submit">提交</button>
</form>
<script>
function a() {
alert(1);
var username = document.getElementById('username');
var password = document.getElementById('input_password');
var md5_password = document.getElementById('md5_password');
//console.log(username.value);
//MD5 算法
md5_password.value = md5(password.value);
//console.log(md5_password.value);
return true;
}
</script>
</body>
</html>
两者比较
优化后取消下面这一个代码，减少密码提交一瞬间，输入框加密时密码显示变多，用户体验不好！！！
password.value = md5(password.value);
九、jQuery库
1、引入
在线链接
<script !src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
导入包
2、公式
$(selector).action()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->
<a href="" id="test_jQuery">点我</a>
<script>
$('#test_jQuery').click(function () {
alert('hello,jQuery');
})
</script>
</body>
</html>
3、选择器
文档工具栈：
jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)
<script>
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器
</script>
4、事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--
公式：$(selector).action()
-->
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[class=python]').text();
$('#test_ul').html();
css的操作
$('#test_ul li[class=python]').css("color","blue");
这篇关于JavaScript学习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-27数据结构与算法面试题详解及练习
- 2024-12-27网络请求面试题详解与实战
- 2024-12-27数据结构和算法面试真题详解与实战教程
- 2024-12-27网络请求面试真题解析与实战教程
- 2024-12-27数据结构和算法大厂面试真题详解与实战指南
- 2024-12-27TS大厂面试真题解析与应对策略
- 2024-12-27TS大厂面试真题详解与解析
- 2024-12-27网站安全入门：如何识别和修复漏洞
- 2024-12-27SQL注入基础教程
- 2024-12-27初学者指南：理解和修复跨域漏洞
