js入门
js
Brendan（布兰登） Eich
轻量级的编程语言（ECMAscript5或6）,
是一种解释性脚本语言（代码不进行预编译）,
主要用来向HTML页面添加交互行为,
目前是互联网上最流行的脚本语言,
支持面向对象、命令式和声明式（如函数式编程）风格,
JavaScript，他和Python一样是一门编程语言，而浏览器内置了JavaScript语言的解释器，所以JavaScript代码在浏览器上就可以运行,
DOM，（Document Object Model）是指文档对象模型，通过它，可以操作HTML文档的相关功能，例如：对标签内容进行删除和替换等（非重点）,
BOM，（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能，例如：浏览器设置定时器，浏览器定时刷新页面。
三种js代码引入方式
1 head标签的script标签里面(alert('xx'), confirm('xx'))
2 body标签的script标签里面 (建议底部)
3 外部文件引入的方式来使用
创建一个.js结尾的文件,写上js代码
比如:
alert('are you ok?');
在想使用这个js代码的html文件中,body标签底部导入
<script src="test.js"></script>
js基础内容(会继续更新)
alert("daoyou");
confirm("daoyou?");
JavaScript语法规则
变量
变量定义 var a = 100；
var 变量名,,
变量声明,但没有赋值的时候,变量的值为undefined
数据类型
number 整数,浮点数
var n = 11;
var n2 = 11.11;
string 字符串
var a = 'abcdef';
var a = new String('ss');
字符串操作
var s = 'hello';
索引取值: s[1] -- 'e' s.charAt(4); -- 'o' : s.substring(1,3); -- "el"
获取长度：s.length;
移除两端空格: s.trim(); s.trimLeft(); s.trimRight();
boolean 布尔
var a = true;
var b = false;
undefined和null类型
undefined 变量声明了,但是没有赋值,此时这个变量是undefined类型
null : 变量不用了,就可以给变量赋值为null,--- object类型
array 数组
var names = [11,22,33];
数组常用方法
names[0] // 索引,索引也是从0开始的
names.push(ele) // 尾部追加元素
示例:a.push('xx'); -- [11, 22, 33, "xx"]
names.pop() // 尾部移除一个元素
示例:a.pop(); -- [11, 22, 33]
names.unshift(ele) // 头部插入元素
示例:a.unshift('ssss'); -- ["ssss", 11, 22, 33]
var ele = obj.shift() // 头部移除一个元素
示例:a.shift(); -- [11, 22, 33]
names.splice(index,0,ele) // 在指定索引位置插入元素
names.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个))
names.splice(index,1,ele) // 指定索引位置替换元素
names.splice(index,1) // 指定位置删除元素
var names = [11,22,33];
names.splice(1,1,'xx','oo','asdf'); -- [11, "xx", "oo", "asdf", 33]
names.slice(start,end) // 切片
示例:a.slice(1,3);
names.reverse() // 原数组反转
示例:a.reverse();
names.join(sep) // 将数组元素连接起来以构建一个字符串
示例: var a = ['ni','hao','ma',18]
a.join('+'); -- "ni+hao+ma+18"
names.concat(val,..) // 连接数组
示例: var a = [11,22]; var b = ['aa','bb']
var c = a.concat(b); c -- [11, 22, "aa", "bb"]
names.sort() （辣鸡） // 对原数组进行排序 a.sort(compare); 升序排列
解决数组中数字排序的问题
a = [2,3,5,2,22,4,2,3,234,1]
function com(a,b){return a-b}; // 自定义排序规则
a.sort(com);
当a-b大于0时，会交换数组中的这两个元素
一直交换直到返回值没有大于0的
字典
自定义对象Object
JavaScript中其实没有字典类型，字典是通过对象object构造出来的
info = {
name:'迪丽热巴',
"age":18
1:123
}
var a = {username:'xx',password:'123'}; //键可以不加引号
// 键可以是数字,但取值时必须是info["1"]
var a = info['name']/a = info.name // 通过键取值必须加引号(info.name)
info['age'] = 20 // 修改
info['gender'] = 'male' // 新增
delete info['age'] // 删除
查看数据类型
typeof 变量名;
typeof n;
注释
单行//
多行 /**/
流程控制
if判断
if (a == 1){ //判断条件写在小括号里面,大括号里面写条件判断成功后的代码内容
console.log('1111'); （类似print）
}
else{
console.log('222');
}
多条件判断
if(a > 1){
// console.log('1111');
// var hhhh = document.getElementById('d1');
// hhhh.innerText = '彭于晏';
}else if(a<1){
console.log('2222');
}else {
console.log('3333');
}
运算符
比较运算
> < == != >= <= === !==
var a = 2;
var b = '2';
a == b; true 弱等于
a === b; false 强等于
a != b; false
a !== b; true
算术运算
+ - * / % ++ --
++ 自增 1
-- 自减 1
var a = 2;
a++ 先执行逻辑 +1
++a 先+1 再执行逻辑
简单示例:
if (++a === 4){ //（a++ === 3）
console.log('xxx');}
else{
console.log('ooo');};
switch判断
用于判断等于某些值（只能放数字）
var num = 200;
switch(num++){
case 10:
console.log('未成年');
break;
case 18:
console.log('成年');
break;
case 35:
console.log('老年');
break;
case 100:
console.log('....');
break;
default:
console.log('太大了');};
异常捕获
try{
console.log(xx);
}
catch(e){
console.log(e);
}
finally{
console.log('sssss');
}
循环
for循环
var names = ['老男孩', '肖峰', '吴超']
for(var i=0;i<names.lenght;i++){ js里for变例的i为索引
console.log(i, names[i])
}
循环自定义对象--python字典
for (var i in d){
console.log(i,d[i]); #不要用d.i来取值，没有 i 属性
}
函数
普通函数
function f1(a,b){
return a+b;
}
// 执行: f1(1,2) -- 3
function f1(a,b){
return a,b;
};
f1(1,2); //不能返回多个值: 2
匿名函数
一般用于当做参数使用
function (arg){
return arg + 1;
}
——————————————————————————————
var a = function (a,b){
console.log('xxx');
}
var d = {'xx':'oo','f':function (a,b){
console.log('xxx');
}};
执行:d.f(1,2); -------'xxx'
自执行函数
一般用于做数据隔离使用，因为JS中是以函数为作用域，所以当js代码比较多时，通过自执行函数做数据隔离
(function () {
alert('自执行函数!')
})()
JSON
JSON.stringify 序列化
var info = {name:'alex',age:19,girls:['钢弹','铁锤']}
var infoStr = JSON.stringify(info)
console.log(infoStr) # '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
JSON.parse 反序列化
//反序列化时键不能是数字且必须有双引号
var infoStr = '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
var info = JSON.parse(infoStr)
console.log(info)
应用场景：
网络中数据传输本质上是基于字符串进行，如果想要把一个js的对象通过网络发送到某个网站，
就需要对对象进行序列化然后发送。（ajax会经常使用）
各语言之间数据类型不一定互通，需要一个中间人（json） python->json->...->json->java
DOM对象 文档对象模型
是一种用于HTML的编程接口
它给文档（HTML文件）提供了一种结构化的表示方法
可以改变文档的内容和呈现方式
DOM相当于是一个模块，提供了关于HTML文档中对标签进行操作的功能（动态调整文档中的元素）
选择器
直接查找选择器
html代码:
<div class="c1" id="d1"></div>
<div class="c1 c2" id="d2"></div>
js代码
document：代表HTML文档对象
document.getElementById(arg) // 根据ID获取一个标签对象
document.getElementsByClassName(arg) // 根据class属性获取标签对象集合
document.getElementsByName(arg) // 根据name属性值获取标签对象集合
document.getElementsByTagName(arg) // 根据标签名获取标签对象集合
示例1: var d1 = document.getElementById('d1');
d1.style.height = '600px';
示例2：
创建几个div标签，统一设置为黄色
然后通过JavaScript代码将第一个div标签改为红色
var a = document.getElementsByTagName("div")
a[0].style.backgroundColor="red"
间接查找选择器
js代码:
var div1 = document.getElementsByClassName('c1')[0];
div1.nextElementSibling.style.color = 'red'; 找下一个兄弟标签,并改了色
div1.previousElementSibling; 找上一个兄弟
div1.firstElementChild; 找第一个儿子
div1.lastElementChild; 找最后一个儿子
div1.children; 找所有儿子,是一个数组
div1.parentElement; 找到自己的父级标签
文本操作
nnerText 获取文本
var a = document.getElementById('d1')
a.innerText; 只获取文本内容
设置文本
a.innerText = '<a href="">校花</a>'; 不能识别标签,单纯的文本内容
获取文本包含标签
var d = document.getElementsByClassName('c1')[0];
d.innerHTML; 获取的内容包含标签
设置文本
d2.innerHTML = '<a href="">dream</a>'; 能够识别标签,生成标签效果
值操作
html
<input type="text" name="username" id="username" >
示例
var inp = document.getElementById('username'); 找到标签
inp.value; 获取值 （value 用来进行值操作）
inp.value = 'XXX'; 修改值
BOM对象 浏览器对象模型
弹框
alert('xx');
confirm('are you sure?')
location对象
location.href; 获取当前页面的地址（url路径）
location.href = 'http://www.baidu.com'; 跳转到这个网址上
location.reload(); 刷新当前页面
计时器
一段时间之后执行某个任务
var t = setTimeout("console.log('xxx')",1000);
var t = setTimeout(function(){confirm('alert('xx')')},5000);
t就是浏览器用来记录你的计时器的标识数字：
清除:clearTimeout(t)
每隔一段时间执行某个任务
设置:var t = setInterval(function(){confirm('弹个框!!')},3000);
清除:clearInterval(t); //6
做一篇有温度的技术博客
给人奋斗的热意
和生活的暖意
