JavaScript入门笔记
1.什么是JavaScript
js是世界上最流行的脚本语言
java和JavaScript关系 并没有直接关系 但是现在JavaScript的语法在慢慢向Java靠拢
es6：
JavaScript最新的版本
2.快速入门
2.1 引入JavaScript
内部引入
<!--内部标签使用-->
<script>
alert('hello world!');
</script>
外部引入
<script src="js/01.js"></script>
2.2 浏览器控制台的使用 （F12）
主要用到以下的几个
2.3 基本语法入门
<!--JavaScript严格区分大小写-->
<script>
// 定义变量
var score="1"
// alert(num);
// 条件控制
if (score>=60 && score<70){
alert("60-70");
}else if (score>=70 && score<80){
alert("70-80");
}else {
alert("other");
}
//console.log(score) 在浏览器的控制台打印变量==system.out.println();
2.4 数据类型
2.4.1 数值 number
js不区分小数和整数、number
123 //整型
123.1 //浮点型
1.123e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //无限大
2.4.2 字符串
单引号和双引号都可以用
‘abc’ “abc”
2.4.3 布尔值
true false
3.4 逻辑运算
&& //两个都为真，结果为真
|| //一个为真，结果为真
! //真即假，假即真
.14.5 比较运算符
= //赋值运算
== //等于（类型不一样，值一样，也会为True）
=== //绝对等于（类型一样，值一样才为True）
== 是js的缺陷，一般不要用==比较
注意事项：
- NaN===NaN 这个与所有数值比较都不相等，包括自己
- 只能通过isNaN来判断这个数据是否为NaN
2.4.6 浮点数问题
consle.log(1/3)===(1-2/3)
尽量避免使用浮点数进行比较存在精度的问题
math.abs(1/3-(1-2/3))<0.000000001
null和undefined的区别
- null 空
- undefined 未定义
2.4.7 数组
Java中要求数组中的类型必须相同，而js不需要！
var arr=[1,'1',"2",'hello',null,true] //尽量使用这个方法定义数组
取数组下标，如果越界了就会
undefined
2.4.8 对象
对象是大括号，数组是中括号
var person = {
name: "jiajia",
age: 3,
tages: ['js','java','web','...']
} //每个属性后面用逗号隔开，最后一个不需要添加
取对象的值
person。name
>'jiajia'
person.age
>3
2.5 严格检查模式
<!--局部变量建议用let定义-->
<script>
'use strict';//严格检查格式，必须写在JavaScript的第一行
let i=1;
</script>
3.数据类型
3.1 字符串
1.字符串使用单引号或者双引号包裹
2.注意转义字符
\
\n
\t
\u4e2d //Unicode字符
\x41 //Ascll字符
3.多行字符串编写
//Tab键上面ESC键下面
var mag = `hello
world
你好呀
你好
123
`
4.模板字符串（在前端进阶的ES6语法里由有详细讲解）
let name = "jiajia"
let age = "21"
let msg = `你好呀，${name}` 支持EL表达式
5.字符串长度
str.length
6.字符串的可变性，不可变
7.大小写转换
//注意这里是方法不是属性了
student.toUpperCase()
student.toLowererCase()
8.获取下标
student.indexOf('t')
>1
9.substring
[)
student.substring(1) //截取从第一个到最后一个字符串
student.substring(1，3) //[)
3.2数组
数组可以包含任意的数据类型
var arr=[1,'1',"2",'hello',null,true] //尽量使用这个方法定义数组
1.长度
arr.length
假如arr.length赋值，数组大小就会变化，若赋值过小，元素便会丢失
2.indexOf 通过元素获取下标
indexOf(2)
>1
3.slice() 切片 截取Arry的一部分，并返回一个新数组，类似与String中的substring（）方法
4.push（）和 pop（） 尾部
arr.push() //压入尾部
arr.pop() //弹出尾部
5.unshift() 和 shift() 头部
arr.unshift() //压入到头部
arr.shift() //弹出头部
6.排序 soft（）
7.元素反转 reverse()
8.concat（）拼接
arr.concat（）并不修改arr数组，而是返回一个新的数组
9.连接符 join
打印拼接数组，并且用特定的字符串连接
var arr = ['a','b','c']
arr.join('-')
>'a-b-c'
10.支持多维数组
- splice() 万能方法 ，可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素。
var arr = ['骆','嘉','伟','呀']
//从索引3开始删除一个元素，然后添加三个元素
arr.splice(3,1,'是','帅','哥')
>['呀']//返回删除的元素
arr
>(6) ['骆', '嘉', '伟', '是', '帅', '哥']
//只删除，不添加
arr.splice(3,3)
>(3) ['是', '帅', '哥']
arr
>(3) ['骆', '嘉', '伟']
//只添加，不删除
arr.splice(3,0,'好','厉','害')
>[]
arr
>(6) ['骆', '嘉', '伟', '好', '厉', '害']
-
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。----（ES6新语法）
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
3.3 对象
若干个键值对
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值 //多个属性用逗号隔开，最后一个属性不加逗号！
}
1.对象赋值
person.name = 'jiajia'
2.使用不存在的 对象属性不会报错
person.abc
>undefine
3.动态删除属性，通过delete实现
delete person.name;
4.动态添加属性
person.abc = 'abc'
5.判断一个值是否在对象中 xxx in xxx
age in person
> true
//继承
'toString' in Person
> true
6.判断一个属性是否是对象自身拥有的 hasOwnProperty（）
person.hasOwnProperty('toString')
> false
person.hasOwnProperty('toString')
> true
3.4 流程控制
if判断
var age = 3;
if(age>=3){
alert('haha');
}else if(age<=5){
alert('kuwa')
}else{
alert('gaga')
}
while循环，避免死循环
while(age<100){
age = age + 1;
console.log(age);
}
do{
age = age + 1;
console.log(age);
}while(age<100)
for循环
for(let i = 0;i<100;i++){
console.log(i)
}
forEach循环
var age = [12,2,3,45,74,78,6,448,4,9]
//函数
age.forEach(function(value){
console.log(value )
})
3.5 Map和Set
Map 相当于python里的字典
var map = new Map([["jerry",100],["gary",50],["tom",60],["lucy",20]]);
var name =map.get("jerry"); //通过key获得value
map.set("cat",99) //新增或修改
Set 无序不重复的集合
var set = new Set([1,2,3,3,3,3,3,3])
set.add(2) //添加
set.delete // 删除
console.log(set.has(3)) //是否包含某个元素
3.6 iterator（迭代器）
遍历数组
//for of遍历值 //for in遍历下标
var arr =[3,4,5]
for(var i of arr){
console.log(i)
}
遍历Map
var map = new Map([["jerry",100],["gary",50],["tom",60],["lucy",20]]);
for(var i of map){
console.log(i)
}
遍历Set
var set = new Set([1,2,3,3,3,3,3,3])
for(var i of set){
console.log(i)
}
4.函数
4.1 定义函数
定义方式一
绝对值函数
function abs(x) {
if(x>=0){
return x;
}else{
return -x;//一旦执行到return代表函数结束，返回结果
}//如果没有执行return，函数执行完函数之后会返回结果，就是NaN
}
定义方式二
var abs1 = function (x) {//在Java里function（x）....是一个匿名函数，但是可以把值赋值给abs，通过abs就可以调用函数
if(x>=0){
return x;
}else{
return -x;//一旦执行到return代表函数结束，返回结果
}//如果没有执行return，函数执行完函数之后会返回结果，就是NaN
}
调用函数
abs(10)//调用函数
abs(10,20,30,40)//javascript可以传任意个参数，也可以不传递参数
如果不存在参数的规避方法
var abs1 = function (x) {//在Java里function（x）....是一个匿名函数，但是可以把值赋值给阿巴斯，通过abs就可以调用函数
//通过手动抛出异常来判断
if(typeof x!== 'number'){
throw'Not a number'
}
if(x>=0){
return x;
}else{
return -x;//一旦执行到return代表函数结束，返回结果
}//如果没有执行return，函数执行完函数之后会返回结果，就是NaN
argument
代表传入的所有参数，它是一个数组
function aaa(a) {
console.log('a=>'+a);
if (arguments.length>2) {
for (let i = 1; i < arguments.length; i++) {
}
abs(arguments[i]);
}
}
rest
获取除了已经定义的参数之外的所有参数
function aaa(a,b,...rest) {//rest获取除了已经定义了之外的参数，只能写在参数的最后面
console.log('a=>'+a);
console.log('b=>'+b);
console.log(rest);
}
4.2 变量的作用域
4.2.1
JavaScript中，var定义的变量实际上是由作用域的
function scope() {
var x = 1; //在函数体内声明，在函数体外不能使用（如果想要实现，可以用闭包（很难））
x = x+1;
}
如果两个函数使用了相同的用户名，只要是在函数内部，就不会冲突
function scope() {
var x = 1;
x = x+1;
}
function scope1() {
var x =2;
x = x+2;
}
如果发生嵌套，内部函数可以访问外部函数的成员，反之不可以。
function scope() {
var x = 1;
function scope1() {
var y = x + 1;//2
}
var z = y + 1;
}
//如果发生嵌套，内部函数可以访问外部函数的成员，反之不可以。
如果函数内部和外部存在同名变量
查找变量从自身函数开始，由“内”向“外”查找。
提升变量的作用域（别使用）
function xy() {
var x;//把变量的定义语句都放在前面！！！！！便于代码维护
console.log("x"+ y);
var y="y";//js执行引擎会自动提升了y的声明，但是不会提升y的数值，没必要使用（不好的代码习惯）
}
正确用法
function xy() {
var x = 1，
y = x+1,
x,y,z;
}
4.2.2 全局函数 var
全局变量
var x =1;
function f1() {
console.log(x);
}
f1();
console.log(x);
全局对象 window
var x = 'aaa';
alert(x);
alert(window.x)//默认所有的全局对象，都会绑定在window对象下
alert（）这个函数本身也是一个window的变量
规范
由于所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，就对导致冲突。
所以要把自己的代码放入自己定义的唯一空间名字中，降低全局命名冲突的问题
// 唯一全局变量
var jiajia = {};
//定义全局变量
jiajia.name = 'jia';
jiajia.add = function(a,b){
return a + b;
}
4.2.3 局部作用域let
function f2() {
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1)//出了问题，i出了作用域还可以用，所以局部变量要用let
}
建议都使用let去定义局部变量的作用域
4.2.4 常量 const
在ES6之前 ，用大写代表常量，建议不要修改
var PI = ‘3.14
所以在ES6中引入了常量关键之const
const PI = '3.14'
4.3 方法
var gary={
name:'骆嘉伟',
birth:'2000',
//方法
age:function{
//今年-出生的年
var now=new Date().getFullYear();
return now-this.birth;
}
}
//属性
gary.name
//方法，一定要带括号
gary.age()
如果想改变this的指向，可以用apply
//方法可以拆开写，但是要注意this的指向，如果想直接调用方法需要用到apply属性（20行）
function getage() {
var now=new Date().getFullYear();
return now-this.birth;
}
var gary={
name:'骆嘉伟',
birth:'2000',
age:getage
}
getage.apply(gary,[])//apply可以控制this的指向
5.内部对象
5.1 标准对象
typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof {}
'object'
typeof []
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
5.2 Date
基本使用
var now = new Date();
now.getFullYear();//年
now.getMonth();//月 0-11
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间差 全世界统一 1970.1.1 00：00：00
转换
now = new Date(1646814099576)
Wed Mar 09 2022 16:21:39 GMT+0800 (中国标准时间)
now.toLocaleString()//注意调用是方法，不是属性
'2022/3/9 16:21:39'
now.toGMTString()
'Wed, 09 Mar 2022 08:21:39 GMT'
5.3 Json
json是什么
早期所有的数据传输习惯使用XML文件
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript中一切皆为对象，任何js文件支持的类型都可以用JSON来表示；
格式：
- 对象都用{}
- 数组都用[]
- 键值对用 key : value
Json字符串和js对象的转化
var jiajia={
name:'骆嘉伟',
age:'21',
sex:'男'
}
//对象转化为json字符串{"name":"骆嘉伟","age":"21","sex":"男"}
var jsonUser = JSON.stringify(jiajia)
//字符串转化为对象，参数为JSON字符串，要用引号括起来
var obj = JSON.parse('{"name":"骆嘉伟","age":"21","sex":"男"}')
5.4 Ajax
- 原生的js写法， xhr异步请求
- jQuery封装好的方法
- axious 请求（专业抓包）
6.面向对象编程
-
类：模板
-
对象：具体的实例
class 继承
class关键字是ES6引入的
6.1.定义一个类 属性 方法
class Student {
constructor(name,age) {//构造函数
this.name = name;
this.age = age;
}
hello(){
alert('hello!');
}
}
var jiajia = new Student('xiaoming',21);
6.2 继承
class Student {
constructor(name,age) {//构造函数
this.name = name;
this.age = age;
}
hello(){
alert('hello!');
}
}
class xxs extends Student{
constructor(name,grade,age) {
super(name,age);
this.grade = grade;
}
mygrade(){
alert('i am a pupil');
}
}
var tingting = new xxs('tingting',6,12);
7.操作BOM对象
浏览器介绍
JavaScript和浏览器的关系?
JavaScript诞生就是为了能够让他在浏览器中运行！
BOM:浏览器对象模型
- IE 6-41
- chrome
- safari
- Firefox
三方
- 360
- 搜狗
window
windows 代表浏览器窗口
window.alert(1);
undefined
window.innerHeight
247
window.innerWidth
768
window.outerWidth
784
window.outerWidth
784
Navigator（不建议使用）
Navigator封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36 Edg/98.0.1108.62'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36 Edg/98.0.1108.62'
navigator.platform
'Win32'
大多数时候，不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width
1536 px
screen.height
864 px
location(重要)
location代表当前页面的URL信息
host: "www.bilibili.com"
href: "https://www.bilibili.com/"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('https://www.baidu.com/')
document（文本内容）
document代表当前的页面，HTML DOM文档树
document.title
'哔哩哔哩 (゜-゜)つロ 干杯~-bilibili'
document.title="代老师的储物间";
'代老师的储物间'
获取具体的文档树节点
<dl id="app">
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取cookie
document.cookie
劫持cookie
www.taobao.com
<script src="aa.js"></script>
//恶意人员可以获取你的cookie上传到他的服务器
服务器可以设置cookie:httpOnly
histoty（不建议使用）
代表浏览器的历史记录
history.back()
history.forward()
8.操作DOM对象
DOM:文档对象模型
1.核心
浏览器网页就是一个DOM树形机构
- 更新：更新DOM节点
- 遍历：得到DOM节点
- 删除：删除一个DOM节点
- 添加：添加一个DOM节点
2.获得DOM节点
//对应css的选择器
var h1 = document.getElementsByTagName('h1');
var h1 = document.getElementById('p1');
var h1 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var children = father.children[]//获取父节点下的所有子节点
// father.firstChild
// father.lastChild
上面的都是原生代码，之后尽量用jQuery();
3.更新DOM节点
<div id="abc">
</div>
<script>
var abc = document.getElementById('abc');
</script>
操作文本
abc.innerText='嘉嘉'修改文本的值abc.innerHTML='<strong>嘉嘉</strong>'可以解析HTML文本标签
操作css
abc.style.color='red';//属性使用字符串包裹
abc.style.fontSize='100px';// - 转 驼峰表达式（长串大写开头来区分单词）
abc.style.fontSize='100px';
abc.style.padding='2em';
4.删除DOM节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
<div id="father">
<h1>嘉嘉好好学习</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father1 = self.parentElement;
father1.removeChild(self)
// self.remove();
//删除是一个动态的过程
father1.removeChild(father1.children[0]);
father1.removeChild(father1.children[1]);
father1.removeChild(father1.children[2]);
</script>
注意！！删除多个子节点的时候，children是在时刻变化的，删除节点的时候一定要注意。
5.创建和插入DOM节点
在获得DOM节点的时候，如果这个DOM节点是空的，那么通过innerHTML或者innerText的时候，可以增加一个元素；但是如果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'),
list =document.getElementById('list');
list.appendChild(js);//追加到后面
</script>
创建一个新的标签，实现插入
<script>
var list = document.getElementById('list');
var newp = document.createElement('p');
newp.id = 'newp';
newp.innerText = '你好呀婷婷';
list.append(newp);
//以上为方法一
var list = document.getElementById('list');
list.innerHTML = list.innerHTML+'<p id="new">你好!</p>'
//以上为方法二，方法一和二效果等价
var myscript = document.createElement('script');
myscript.setAttribute('text','text/javascript');
//创建一个标签节点，通过setAttribute可以设置任意的值
</script>
还要说一个注意的点，当我们想改变bofy的属性的时候
<script>
var body = document.getElementsByTagName('body');
body[0].setAttribute('style','background-color: #ffa27f;');//方法一
body[0].style.background = '#0c2f50';//方法二
var mystyle = document.createElement('style');//创建一个空style标签
myscript.setAttribute('type','text/css');
mystyle.innerHTML = 'body{background-color: #ffa27f}';
document.getElementsByTagName('head')[0].append(mystyle);//方法三
var head = document.getElementsByTagName('head');
head[0].innerHTML = '<style>body{background-color: #ffa27f}</style>';//方法四
</script>
在这上面的代码中需要注意的是 通过 getElementsByTagNam 获得的是一个数组，所以才会有 body[0] 和 head[0]
insterBefore
<script>
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)，把新结点插入在目标节点的前面
list.insertBefore(js,ee);
</script>
9.操作表单（验证）
9.1表单是什么 from DOM树
- 文本框 text
- 下拉框
浙公网安备 33010602011771号