目录
一、定义变量
var num=1;
let num=1;
const PI=3.14; //常量var let效果都是一样的 只读变量(常量) const PI=3.14 为了区分全局变量(var)和局部变量(let)
二、浏览器控制台输出
var score=1;
console.log(score);三、数据类型
1、number
js不区分小数和整数 NaN 不是number Infinity //表示无限大
2、字符串
'adf' "abc"
3、布尔值
true、false
4、比较运算
= 赋值 == 类型不一样值一样也会为true === 绝对等于 值和类型都一样才为true NaN===NaN,这个与所有的数值都不相等，包括自己 只能通过isNaN(NaN) 来判断是否NaN
5、null 和undefined
null: 空 undefined： 未定义
6、数组
js支持瞎定义数组
var arr=[1,2,3,'hell',null,true];
console.log(arr[3]); //打印数组
console.log(arr[9]); //打印数组，如果越界了会报undefined操作数组
var arr=[];//未定义大小的数组，相当于集合 数组操作
push(x) :添加x数据
splice() 功能
删除：（i,b） i:索引i为起始; b: 删除b个元素
插入：（i,0,value） i: 插入位置 ; 0 删除0个 ; value: 需要插入的数据
替换：(i,1, value) i:替换位置 ; 1 替换 1个； value ：替换成的数7、对象
对象是大括号，数组是中括号 key-value的形式 key是字符串，value是任意类型。 成员属性用逗号隔开
var per={
name:"jc",
age:3,
tags:['js','java','web']
} 取值 : per.name
动态删减属性: delete per.name
动态添加属性 : 直接赋值 per.age=20
判断某属性是否是该对象属性: 'age' in per
判断一个属性是否是这个对象自生拥有的: per.hasOwnProperty('age')
8、集合Map Set
（1）、 Map：key-value
var map=new Map([['tom',100],['jack',60],['haha',90]]); 通过key获得value: var nuber=map.get('tom');
添加或修改值：map.set('peter',60);
删除值：map.delete('tom');
遍历Map
for(var x of map){
console.log(x)
}
（2）、Set： 无序不重复的集合
var set=new Set([1,2,3,1,1]);//会自动去重 添加： set.add(4);
删除：set.delete(2);
判断是否拥有该属性： set.has(4)
遍历set
for(var x of set ){
console.log(x)
}
四、流程判断
1、if else
2、while() ,do while()
3、for 循环
这三个和javaSE一致
4、forEach循环
（1）、遍历数组(of)
var arr=[1,2,3,'hell',null,true];
for(var a of arr){ //输出数组每个值
console.log(a);
}（2）、遍历数组的索引(in)
不会遍历临时新增的索引
var arr=[1,2,3,'hell',null,true];
for(var a in arr){ //输出索引
console.log(a);
}（3）、函数式编程forEach
var arr=[1,2,3,'hell',null,true];
arr.forEach(function (x){
console.log(x);
}五、函数
1、定义函数
方式一：
function abc(x){
return x;
}方式二：
var abc=function(x){
return x;
} 匿名函数function(x){...}
arguments关键字 代表传入进来所有参数 rest 关键字： 获取除已经定义的参数外的其他参数 需要加... function(a,...rest); 只能写在最后面 ...rest
六、方法
即对象中的函数
定义方法一：对象内直接定义
var kun={
name:'小王',
age: function (x){
return x;
}
}方法二：拆开写：在对象内value直接写函数名字即可
function ageT(x){
return x;
}
var kun2={
name:'小王',
age: ageT
}方法的调用：
kun.age(12);
kun2.ageT(12);七、特殊对象
1、Date
获取时间
var date=new Date()
// 获取时间
date.getFullYear() ;//年
date.getMonth() ; //月 0~11
date.getDate();//日
date.getHours(); //星期几
date.getMinutes(); //分
date.getSeconds();秒
date.getTime(); //时间搓 全球统一
// 转化
date.toLocaleString() '2023/4/1 20:50:13'
date.toLocaleDateString() '2023/4/1'
date.toLocaleTimeString() '20:50:13'2、JSON
JSON是一种数据传输的格式。
javaScript一切皆为对象，任何js支持的类型都可以用JSON来表示。
格式：
对象都用{}
数组都用[]
所有的键值对都是用key:value
字符串数据转化为对象
var obj= JSON.parse('{"name":"小王","age":10}');
console.log(obj);八、面向对象编程
js同样页支持面向对象编程
1、__proto__
var Student={
name: "小王",
ren: function Ren()
return "跑";
}
}
var peter={
name:"彼得"
}
//peter的原型是Student 相当于继承
peter.__proto__=Student;
peter.ren();2、class继承
定义class 类
//属性会通过this自动生成
// constructor(name) //构造方法
class Student{
constructor(name) {
this.name=name;
}
hello(){
return "你好";
}
}创建对象
var peter=new Student("piteous");九、操作BOM对象
1、window 代表窗口
2、navigator 封装了浏览器的信息
3、screen 代表屏幕
4、location 代表当前页面的URL信息
5、document 代表当前页面
获取当前标签节点
var asd= document.getElementById('app');
cookie:用户信息
获取cookie:
document.cookie
6、history 浏览器的历史记录
history.forward(); //前进
history.back(); //后退
十、操作DOM对象(重要)
1、获得DOM节点
注意html标签需要在js代码前面才能成功获取
document.getElementsByTagName('h1'); //根据标签类型获取
document.getElementById('app');//根据id获取
document.getElementsByClassName('ad'); //根据类选择器获取
var asd= document.getElementById('app'); //根据名字获取
var boy=asd.children;//获取子节点
var boy=asd.children[0];
var fa=asd.parentElement; //获取父节点2、修改节点
var asd= document.getElementById('app'); //根据名字获取
asd.innerText='asd'; //修改文本的值
asd.innerHTML='<strong>123</strong>'; //和innerText类似但它可以解析html文本
asd.style //修改css - 转驼峰命名
asd.setAttribute('id',"12345"); //它的所有标签属性都可以通过key-value 方式修改3、删除节点
获取A的父节点B，再通过节点B点删除A
var asd= document.getElementById('app'); //根据名字获取
var fa=asd.parentElement; //获取父节点
fa.removeChild(asd);4、插入节点
往父标签中添加子标签 如果Dom节点是空的可以通过innerHTML插入添加新元素，如果已经存在元素则会覆盖
以追加的方式添加
var div2= document.getElementById("list");//根据id获取
var app3= document.getElementById("app3");//根据id获取
div2.appendChild(app3);//添加创建新节点插入
var newP=document.createElement('p');//创建一个p标签
newP.id='newP' //设置id选择器
newP.setAttribute('id',"12345"); //它的所有标签属性都可以通过key-value 方式修改
newP.innerText='创建插入节点';
div2.appendChild(newP);浏览器网页就是一个Dom树结构 更新：更新Dom节点 遍历dom节点：得到Dom节点 添加：添加一个新的节点
5、表单提交
方式一：
监控按钮 标签属性onclick
<form action="../form.html">
<input type="radio" id="ser" name="12" value="man">男
<input type="radio" id="ser2" name="12" value="man2">男
<button type="submit" onclick="return aa()">提交</button>
</form>
<script>
var name2=document.getElementById("ser");
/**
* 对于单选框name.checked;是否被选中
*/
function aa(){
return false;
}
</script>方式二：表单监控
<body>
<form action="../form.html" onclick="return aa()">
<input type="radio" id="ser" name="12" value="man">男
<input type="radio" id="ser2" name="12" value="man2">男
<button type="submit" >提交</button>
</form>
<script>
var name2=document.getElementById("ser");
/**
* 对于单选框name.checked;是否被选中
*/
function aa(){
return false;
}
</script>只有js监控方法返回true才会提交跳转
7、鼠标事件
onclick: 单击鼠标时
onmousedown: 当按下鼠标时
onmousemove： 鼠标指针移动时
onmouseover： 鼠标指针移至元素之上时，不可以阻止冒泡
onmouseout： 鼠标指针移出元素时，不可以阻止冒泡
onmouseenter： 当鼠标指针移至元素之上时可以阻止冒泡。
onmouseleave： 当鼠标指针移出元素时，可以阻止冒泡
onmousewheel： 当转动鼠标滚轮时
onscroll： 当滚动元素的滚动条时
绑定方法有两种：直接绑定和鼠标监听
<button id="but1"> 按钮</button>方法一：直接绑定
var but1=document.getElementById("but1");
but1.onclick=function (){
console.log("点击");
}
方法二：监听器
这个方法还可以获取鼠标的其他属性,使用时去掉前面的on
but1.addEventListener("mousedown",function (mouse){
console.log("鼠标坐标: ["+mouse.offsetX+","+mouse.offsetY+"]")
})
十一、注意
javascript同样有局部变量和全局变量，访问遵循就近原则，变量作用域和javaSE类似
javascript是注重代码顺序的，方法需要调用才会生效，
以src方式引用<script src="tes.js">xx</script>那么内部xx则不会生效
javascript来修改html标签那么需要放在（引用）html标签后面位置。
如果有javaSE基础学习javascript还是很快的。
本文仅供参考，有问题请评论区指出。
611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
