前端一点点

Posted 2022-12-02 小田mas

javascript

JavaScript

1、一血简单介绍

跟java没啥关系。
ECMAScript可以理解为是JavaScript的一个标准。
常用的是es6。
多行注释 /* */,快捷键ctrl + shift +/
单行注释 / /,快捷键ctrl+/

2.1 第一个JS程序

1.内部标签

<script> 
	alert("Hello world!!");
</script>

2.外部引入

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

2.2 基本语法入门

万物皆可var 

console.log();//控制台打印。

调试打开网页，点击F12或右击网页选择检查，找相应的即可。

2.3 数据类型

number，js不区分小数和整数。
NaN,不是一个数字。
Infinity，表示无限大。

字符串

布尔值

逻辑运算
&& || !

比较运算符
=     赋值
==   值一样就返回true
=== 绝对等于
NaN与所有的数都不相等，包括他自己。
只能通过IsNaN（）判断
尽量避免使用浮点数进行运算，存在精度问题。`console.log((1/3)===(1-2/3))`的返回结果是false。
可以通过判断两数相减之后的绝对值来进行比较。`console.log(Math.abs((1/3)-(1-2/3))<0.0000001)`

空指针 null

undefined 未定义

数组
java一系列相同的对象，js不需要。需要保证代码的可读性，用中括号[ ].
取数组下标，如果越界了就会出现undefine。

对象是 。

	var person=
		name:"qinjiang",
		age:3,
		tags:['df',123,23]
	

取对象的值，对象名.属性

$、_符号在定义名称时是可以作为开头的
es6中用let定义局部变量。

严格检查模式

只要写代码，尽量把这句话加上，‘user strict’;
预防js的随意性产生的一些问题。局部变量建议使用let定义。前提：idea需要设置在es6语法的支持下。

2.4 数据类型详解

2.4.1字符串

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

2. 注意转义字符 \\
   ’ \\n \\t
   \\u#### unicode字符
   \\x41 ascall字符

3. `` 为tab键上面的字符，可以包裹多行字符串，长字符串

4. 模板字符串

let name = 'misa'
let msg = '我ai,$name'

msg = 我aimisa

5. 字符串长度 string.length
6. 可以通过下标取到每个字符串的值，string[0],string不可变
7. 小写到大写，string.uppercase(),注意就是要用方法，而不是属性。
8. 到小写，string.lowercase()
9. string.indexOf(char),获取指定字符的下标
10. substring(1,3),左闭右开
    substring(1),从第一个到最后一个

2.4.2 数组类型

1.Arrays可以有任意类型的数据
2.数组可变，可以直接赋长度（数组大小就会发生变化），元素等
3.如果赋值过小，元素就会丢失
4.数组越界，返回undifine
5.arr.indexof(2)通过元素获得下标的索引
字符串的1和数字1是不同的。
6.slice（）截取数组的一部分，返回一个新的数组。slice(3),slice(1,5),类似于substring
7.arr.push()推到尾部，arr.pop()弹出尾部的一个元素
8.unshift()压到头部,shift()弹出一个头部的元素
9.排序用sort(),小到大
10.翻转用reverse()
11.concat()并没有修改数组，只是会返回一个新的数组
12.连接符 join(char)，使用特定的字符串拼接，打印新的数组
13.多维数组类似

3.1 对象

js中对象，以键值对描述属性。
用大括号括起来，多个属性之间使用逗号隔开，最后一个不加逗号。

js中所有键都是字符串，对应的值是任意类型。

//举个例子
var person = 
	name:mimi,
	age:18

1. 对象赋值 对象.name = “sxd”
2. 使用一个不存在的对象属性不会报错，是undefine
3. 可以动态的删减属性 `delete person.name
4. 可以添加
5. 判断属性值是否在这个条件中 xxx in xxx

'age' in person
'toString' in person

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

person.hasOwnProperty("age");

3.2流程控制

if
else


while

for(let i =0;i<100;i++)

age.foreach( function(value)
	console.log(value);
)

for(var i in arr)//打印出来下标
for(var i of arr)//打印出来值

3.3 map set
es6的新特性

var map = new Map([['tom',100],['cat',200]]);//Map
var name = map.get('tom');//获取
map.set('admin',123456);//设置
map.delete('admin');

//set 无序不重复的集合
var set = new Set([3,1]);//可以去重
set.add(2);
set.delete(1);
console.log(set.has(3));//java contain,remove
iterator

3.4 iterator
使用其遍历 set、map

for(let x of map)
	//打印；

4.函数

定义方式1

fuction abs(x)
	if(x>0)
		return x;

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

定义方式2

var abs = function(x)
	if(x>0)
		return x;//function 没有名字，可以叫做匿名内部类

函数调用

abs(-10);
//不要隔行写，浏览器解释时会自动加上；

参数问题，JavaScript可以传很多个参数，也可以不传参数。

//对于javascript不存在参数如何规避的问题
if(typeof x !== 'number')
	throw 'not a number';//手动抛出异常

arguments

代表所有传递进来的参数，是一个数组。（是JS免费赠送的关键字。）

rest

es6引入，获取已经定义了所有参数之外的所有参数。

//以前
function aa(a,b)
	console.log(a);
	console.log(b);
	if(arguments.length>2)
		//打印
	
	console.log(rest);
//现在
function aa(a,b,...rest)
	console.log(a);
	console.log(b);
	console.log(rest);

rest参数只能写在最后面

5.变量的作用域

• var 在函数体内声明，外面不可使用，（可以研究闭包）

变量都要求先声明后引用。
就近原则，变量从内向外查找。

> 全局变量:

所有全局变量都绑定在window对象下。alert函数本身也是一个window变量。window.变量（函数）
干掉系统方法！

下面需要重点理解一下：

局部作用域let

常量

方法

定义方式
方法就是把函数放在对象的内部。对象只有属性和方法。
调用方法一定要带上()

this代表当前的对象，可以通过下面的代码理解。

直接写getAge(),代表window调用此方法，而window没有birth，所以结果出现错误。

getAge.apply(Kuangshen,[]);//Kuangshen代表this指代的对象，[]代表空参

Date日期对象

var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期
now.getHour();//时
now.getMinutes();//分
now.getSeconds();//秒

now.getTime();//时间戳，全世界唯一，1970.1.1.0：0到现在的毫秒数

new Date(时间戳);//可以将时间戳转为时间

JSON

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

js中一切皆对象，任何js支持的类型都可以用json表示。
格式：

• 对象：
• 数组: []
• 所有的键值对 都使用 key:value

var jsonuser = JSON.stringfy(user);//对象到字符串
JSON.parse();//字符串到对象

//json和js对象的区别
var obj = a:'asd',b:'123';
var json = '"a":"123"'

面向对象原型继承

就相当于直接要了另一个对象的东西
xiaoming._proto_ = user;//小明的原型是user，相当于继承

class继承
es6新引入的

//定义一个学生的类
class student
	constructor(name)
		this.name = name;
	
	
	hello()
		alert("Hel"）;
	


var student = new student("xiaoming");
var student = new student("xiaohong ");

class xiaostudent extends student
	constructor(name,grade)
		super(name);
		this.grade = grade;
	
	myGrade()
		alert("myGrade");
	

原型链

_proto_

操作BOM对象

BOM:浏览器对象模型

navigator，封装了浏览器的信息，但是大多数时候不会使用navigator对象，因为被人为修改。

screen.width,   (.height)   ，代表屏幕

重要： location代表当前页面的url信息。location.assign(网站)，跳转。

host 代表主机。"www.baidu.com"
href:当前指向的位置。"https://wwwww.baidu.com/"
protocol:协议
reload:方法，刷新网页

docunment代表当前的页面，html 文档树

document.title='fasdf'

//获取具体的文档树节点

<dl id="app">
	<dt> java</dt>//title
	<dd>JavaSE</dd>//列
	<dd>JavaEE</dd>
</dl>
<script>
	var dl = document.getElementById("app");
</script>

document.cookie;

document可以直接获取网页的cookie客户端的本地信息，发送到服务器。

劫持cookie的原理

<script src="aa.js"></script>//恶意人员获取cookie上传到服务器
//服务器端可以设置httponly，就会安全

history

history代表浏览器的历史记录。

history.back();//前进，但是这两个都不建议使用
history.forward();//后退

操作DOM对象

Dom：文档对象模型

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

• 更新：更新DOM节点，即改变标签等等

• 遍历DOM节点：得到DOM节点

• 删除：删除一个DOM节点

• 添加：添加一个新的节点
  要操作一个DOM节点，必须先获得一个DOM节点。
  

  获得DOM节点

var h1 = document.getElementByTagName('h1');
var h1 = document.getElementById('h1');
var h1 = document.getElementByClassName('h1');

var children = father.children;//获取父节点下的所有子节点
father.firstchild
father.lastchild
//这是原生代码，以后尽量使用jquery

更新节点

• id1.innnerText = '456'; //修改文本的值
• id.innerHTML = <strong123></strong>; // 可以解析html标签
• id.style.color = 'red'

删除节点

找到父节点然后删除自己。

var p1 = document.getElementById("p1");
var father = p1.parentElement;
father.removeChild(p1);//删除p1

删除是一个动态的问题，删除多个节点时，child是实时变化的。

插入节点
假设获得的DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是如果这个DOM节点已经存在元素，我们不能这样干！会产生覆盖

追加

list.appendChild(js);//追加

//创建一个新的标签然后插入

var newp= document.creatElement('p');//创建一个p标签
newp.id= 'newp';
newp.innerText = 'ks';

list.appendChild(newp);

//万能写法，可以设置任意的值
var myscript = document.createElement('script');
myscript.setAttribute("type","text/javaScript");//键值对

Tagname返回的是数组

insert

操作表单

表单的目的，提交信息。

提交表单
method是提交表单的方式post，action为url，提交目标网页。

md5 加密

<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js/script"></script>

jQuery

jQuery库，里面存在大量的JavaScipt函数。
百度搜索cdn jquery，引入jquery。栗子

公式$(selector).action()

//当网页加载完毕之后，响应事件
$(document).ready(function()
	
);

//简化成为
$(function()
	
);

<!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>

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>

操作DOM
节点文本操作

$().css(键值对)；

.hide()//隐藏 本质 display：none
.show()//显示

$(window).height()
$(window).width()
$(document).height()
$(document).width()
.toggle();//切换状态（显示和隐藏之间）