【JAVA笔记】JavaScript

JavaScript

1.导入脚本

• 外部引入

//外部引入
<script src="js/qj.js"></script>

• 内部标签

//内部标签
<script>
    //....
    alert('hello world');
</script>

2.基本语法

• 变量

var a=1;//不能数字开头

number //不区分小数和整数
123//整数
123.1//浮点数
1.123e3//科学计数法
-99//负数
NaN//not a number
Infinity //无限大

• 字符串

'abc'

• 布尔值

1<2
true
false
逻辑运算
|| && !
== //类型不一样，值一样，也会为true，坚持不用这个比较
=== //绝对等于,类型和值都一样才为true

• NaN===NaN（false） ，与数值和自己都不相等

• 浮点数问题，由精度问题

null 空
undefined 未定义

• 数组 中括号

var arr=[1,2,3,4,'hello',null,true]
new Array(1,2,3,4,'hello');
使用
arr[0] arr[1]
超过数组下标显示undefined，不会报错

• 对象 大括号

var person={
    name:"qinn",
    age:3,
    tags:['js','java']
}
使用
person.name

每个属性使用逗号隔开，最后一个不需要

3.详细语法

• 全局变量

'use strict'//严格检查模式ES6，必须写在第一行
i=1;//全局，检查模式下错误
let i=1;//局部

P6，字符串

字符串

1.正常字符串

''  ""包裹

2.转义字符串

\'
\n
\u4e2d  \u#### Unicode字符
\x41   A  Ascll字符

3.多行字符

`hello
world
//Tab上面的引号,长字符串

4.模板字符串

let mes=`你好，${name}`

5.字符串长度

str.length
str[0]
str.indexOf('t')//返回索引
str.substring(1,2)
str.substring(1)//第一个到最后一个
//不可变，不可单个赋值

6.大小写转换

str.toUpperCase()
str.toLowerCase()

数组

arr=[1,2,3,4,5,"1","2"]
arr.length
arr[0]=1 //可变长度可赋值
arr.length=10//数组大小发生变化，大于剩下的undefined，小于丢失
arr.indexOf(2) //返回索引

arr.slice(3)//从第三个开始截取，返回一个新数组
arr.push('a','b')//压入尾部
arr.pop()//弹出尾部
arr.unshift('a','b')//头部压入
arr.shift()//头部弹出
arr.sort()//排序
arr.reverse()//元素反转
arr.concat([1,2,3])//数组拼接，返回新数组，没修改原数组
arr.join('-')//打印拼接数组 ,特定字符串连接C-B-A

多维数组
arr=[[1,2],["1",'2'],[3,4]];
arr[1][1]//'2'
arr.fill(1)//填充
arr.find(1)

对象

var 对象名={
  属性名：属性值，
  属性名：属性值，
  属性名：属性值
}
//{....}表示一个对象，键值对描述属性，最后一个属性不加，
//使用
person.age
person['age']
//使用不存在undefined

动态删减属性

delete person.name//返回true
person.hha='haha'//动态添加，给不存在的属性赋值，自动添加

判断属性值是否在对象中

//所有的键都是字符串
'age' in person //返回true

判断属性是自身拥有的

person.hasOwnProperty('toString') //返回false

流程控制

if 判断

var gae=3;
if(age>3){
  alert('haha');
}else if(age<3){
  
}else{
  
}

循环

while(age<100){//避免死循环，关闭浏览器
  age=age+1;
}

do{
  age=age+1;
}while(age<100)
  
for(let i=0;i<100;i++){
}
var age=[12,3,34,5,]
//函数
age.forEach(function(value){
  console.log(value)
})

for(var num in age){
  console.log{num);
  age[num];//num是索引
}
 for(var num of age){
  console.log{num);//num值 
}

Map和Set

new Map();
new Set();
//Map
var m=new Map([['tom',100],['jack',80]]);
var name=map.get('tom');//100通过key获得value
map.set('admin',456);
map.delete('key')

//Set 无序不重复集合
var set=new Set([3,1,2,1,1]);//去除重复的值
//只有3,1,2
set.add(2);//value,添加
set.delete(1)//value，删除
set.has('value')//是否存在

迭代器

var map=new Map(['tom',100],['javk',134])
for(let x of map){
  console.log(x)
}
var set=new Set([4,5,6])
for(let x of set){
  console.log(x)
}

4.方法和函数

方法:放在对象里面的函数叫方法

• 定义函数

function abs(x){
  if(x>=0){
    return x;
  }else{
    return -x;
  }
}
//如果没有执行return 也会返回结果，返回undefined

• 定义方式二

var abs=function(){//匿名函数，可以把结果赋值给abs
  if(x>=0){
    return x;
  }else{
    return -x;
  }
}
//使用
abs(1);

• 参数

//可以传任意数量参数，也可以不传参数
abs(10,102030,10203)
//参数判断,抛出异常
if(typeof x!='number'){
	throw "not a number";
}

• arguments是一个免费的关键字

//多个参数
//代表传递的所有参数是一个数组
function(x){
  for(var i=0;i<arguments.length;i++){
    console.log(arguments[i]);
  }
}

• rest 获取除了已定义参数以外的参数

function(a,b,...rest){
  console.log(a);
  console.log(b);
  console.log(rest);//这是个数组
}

5.变量作用域

• 闭包

函数体内中声明，函数体外不可用
内部函数可以访问外部函数，反之不行

• 内部函数和外部变量重名

从自身函数开始，由内向外查找

• 提升变量的作用域

function qj(){
  //等价 var y;
  var x='x'+y;
  console.log(x);
  var y='y';
}
//x为undefined
//js引擎自动提升y的声明，但不会提升变量y的赋值。
//所有变量放在函数头部方便维护。

• 全局函数

放在函数外的变量就是全局变量
var x;
window.x
//默认所有的全局变量都会绑定在window对象上

alert();//也是一个变量，可以被赋值和修改
window.alert();//也绑定在window对象上
var lert=window.alert;
window.alert=function(){
}
//实际上只有一个全局作用域，任何变量（函数）,函数作用域内没有，就会向外寻找
//全局作用域也没有则会报RefrenceError

• 常量

//以前默认大写为常量，现在的const不能修改
const IP='3.14';

全局变量都绑定到window上会有冲突
//唯一全局变量
var kuangApp={};
kuangApp.name='kuangshn';
kuangApp.add=function(a,b){
return a+b;
}
//把自己的代码放在自己定义的唯一空间名字中。

• 作用域let

let作用域解决作用域冲突问题
var有些地方出了作用域还能使用
let不行
//建议使用let定义局部作用域的变量

6.方法

• 定义方法

var kuangshen={
  name:'亲情',
  birth:2000,
  age:function(){
    var now=new Date().getFullYear();
    return now - this.birth;
  }
}
//调用
kuangshen.name
kuangshen.age();

• 第二种

function getAge(){
	var now=new Date().getFullYear();
	return now - this.birth;
}
  var kuangshen={
  name:'亲情',
  birth:2000,
  age:getAge
}
//调用
kuangshen.age();
getAge.apply(kuangshen,[])//第一个指向对象，第二个传入参数

7.日期

• Date

var now=new Date();
now.getFullYear();//年
now.getMonth();//0-11月
now.getDate();//日
now.getDay();//星期
now.getHours();//小时
now.getMinutes();//份
now.getSeconds();//秒
now.geTime();//时间戳
new Date(151124341411)//时间戳转换为时间

now.toLocaleString //本地时间

8.JSON

• javascript 中一切都是JSON

 var user={
     name:'qinjiang',
     age:3,
     sex:'男'
 };
 console.log(user);
var jsonstr=JSON.stringify(user);//JSON转化
var xiaoli=JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');//JSON解析，需要一个单引号
console.log(xiaoli);

9.面向对象

• 原型对象

var Student={
  name:'',
  age:1,
  run:function(){
	}
}
var xiaoming={
	name:'xiaoming'
}
xiaoming._proto_=Student;//设置原型，可以调用Student的东西，可以理解为父类

• Class继承

class Student{
  construction（name){
    this.name=name;
  }
	hello(){
    alert("hello")
  }
}
var xiaoming=new Student("xiaoming");
xiaoming.hello();

• class继承

class XiaoStudent extends Student{
  constructor(name,grade){
    super(name)//父类的
    yhis.grade=grade;//独有的
  }
}
var xiaohong=new XiaoStudent('xiaohong',89);

• 本质，查看对象原型，原型指向Student，最终指向Object

• _proto_ 原型链

10.BOM对象

• window 代表浏览器窗口

• Navigator 封装了浏览器信息

//一般不会使用这个对象，会被修改，不建议使用这些属性

• screen 代表屏幕尺寸

• location 代表当前页面URL信息

host:
href:
protocal
reload:f reload()//刷新
//设置新的地址
location.assign('https....')

• document 代表当前页面，HTML DOM文档树

var dl=document.getElementById('app');

• 获取cookie

document.cookie

• 劫持Cookie原理

<script src="aa.js"></script>
<!--获取你的cookie上传到他的服务器-->

• 服务器设置cookie：httpOnly

• history 历史记录

history.back();//前近
history.forward();//后退

11.操作DOM对象（重点）

• 浏览器就是一个DOM树形结构
• 更新：更新DOM节点
• 遍历：遍历DOM节点
• 删除：删除一个DOM节点
• 添加：添加一个DOM节点

要操作一个DOM节点，需要获得这个DOM节点

 document.getElementById('p1');//ID选择
 document.getElementByTageName('h1');//标签选择
 document.getElementByClassName('p2');//类选择
 var father= document.getElementById('father');
 var children father.children;//获取父节点下的所有子节点
	father.firstChild;
	father.lastChild;
//后面使用JQUERY-

• 更新节点

 var id1= document.getElementById('p1');
id1.innerText='245';//修改内部值
id1.innerHTML='<strong>245</strong>';//修改HTML文本，自动转义
id1.style.color='red';//设置CSS样式
id1.style.fontSize='20px';//- 转驼峰命名问题

• 删除节点

//先获取父节点，再删除自己
var self=document.getElementById('p1');
var father=self.parentElement;
var father= document.getElementById('father');
father.removeChild(p1);
father.removeChild(father.children[0]);//删除完节点是变化的

• 插入节点

//获得某个DOM
//追加
var js=document.getElementById('js');
var list=document.getElementById('list');
list.appendChild(js);

var newP= document.createElement('p');//创建一个P标签，实现插入
newP.id="newp";
newP.innerText="Hello";
//创建一个标签节点,通过这个属性可以设置任意值
var myScript=document.createElement('script');
myScript.setAttribute('type','text/javascript');
list.appendChild(myScript);
//设置完需要插入进去才生效。
var body=document.createElement('script');

//插入前面节点
list.insertBefore(newNode,targetNode);

12.表单

P24

var input=document.getElementById('');//输入框
input.value='123';//读取或赋值
//多选框
<input type='radio' name="sex" value='man' id='boy'>男
<input type='radio' name="sex" value='women' id='girl'>女
var boy_radio=document.getElementById('man');//输入框
boy_radio.checked=true;//选中
boy_radio.value;

• 绑定事件

<button type="button" onclick=aaa()>提交</button>
function aaa(){
	alert(1);
}

• 密码加密

导入MD5包

pwd.value=md5(pwd.value);

13.jQuery

• 是一个函数库，有很多封装好的js代码

1.官方下载导入
2.CDN jQuery，在线引入

• 公式

$(selector).action();//选择器，事件

<a href='' id='test-jquery'> 点我</a>
doucument.getElementById('id');//原版
$('#test-jquery').click(function(){//jQuery版
  	alert('hello');
});

• jQuery选择器

$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//类选择器

• 语法文档

• jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

• 事件

//鼠标 键盘 其他事件

• 操作DOM

• Css操作
  

14.Ajax

• TODO