前端三剑客之javascript
前端三剑客之javascript
给个小目录
一、JavaScript介绍
二、ECMAScript(核心)
三、BOM对象(浏览器对象)
四、DOM对象(文档对象模型)
总结:
JS的组成:
a) ECMAScript 是什么:担当的是一个翻译的角色;是一个解释器;帮助计算机来读懂我们写的程序;实现+-*/, 定义变量;几乎没有兼容性问题;
b) DOM: 文档对象模型;文档指的就是网页;把网页变成一个JS可以操作的对象;给了JS可以操作页面元素的能力;document;有一些兼容性问题;
c) BOM:浏览器对象模型;给了JS操作浏览器的能力;window;几乎不兼容;
一、JavaScript介绍
前端三剑客之javascript,简称js,
完整的JavaScript是由以下三个部分组成的:
核心(ECMAScript)这个是ECMA(欧洲计算机制造协会)规范的版本
文档对象模型(DOM)Document object model
浏览器对象模型(BOM)Broswer object model
既然是一门编程语言,就会含有(
变量
数据类型
运算符
流程控制语句
函数(并不是所有的语言都有函数的概念)
类和对象(js没有“类”)
)
二、ECMAScript(核心)
首先,js的注释和Java一样
//单行注释
/*多行注释*/ 记忆关键字:冒星*
1.变量(变量是一个杯子,它的类型是由它里面存放的东西决定的)
(1)声明变量时有var关键字,不用var关键字的话是全局变量,除非有需要,否则不建议用全局变量,会拖慢效率;
(2)变量要先声明,再定义,
var i;
i=10;
或者简写成var i=10;(一般都这样处理)
(3)js还支持一行声明多个变量,并且可以是不同类型
var i=10,j="zhang";
(4)如果声明一个变量x,却不给他赋值,打印的时候竟然也不报错,而是打印undefined
2.数据类型
js中没有print,我们可以用alert(弹窗)或者console.log()(在浏览器的控制台打印)打印我们想要的结果
查看数据类型用typeof命令
var x=10;
console.log(typeof(x));
(1)js中有的数据类型有:
基本数据类型:Number(数值),String(字符串),Boolean(布尔值),Null,Undefined(声明了但未赋值)
引用数据类型:object
动态类型:var
js中并没有列表,元组,字典这种数据类型,列表和元组是以数组对象实现的
(2)Number(数字类型)
(3)null和undefined类型
undefined类型只有一个值,就是undefined,当函数没有明确返回值,或者声明的变量没有初识化的时候,就会产生这个值。
而null常出现在找不到对象的时候。
3.运算符
js中的运算符特殊的几个:
(1)i++和++i
这个学过c++的一定知道,没什么可说的,应该是为了考试才出的这种东西吧
i++是先赋值再计算
++i是先计算再赋值
(2)=,+=,-=,*=,/=,%=
=,+=,-=,*=,/=,%=
x=5 是 最基本的赋值运算符,即把右边的值,赋给左边的变量x。
x+=y, 表示 x=x+y。
其他都是一个道理。
(3)+
+ 具备多态特征
当两边都是数字的时候 ,表现为算数运算符
当任意一边是字符串的时候,表现为字符串连接符
4.流程控制
(1)if条件语句
与excel里的if条件语句一个样
if (表达式){
执行语句
}
else if(表达式){
执行语句
}
else{
执行语句
}
(2)switch-case语句
switch (表达式){
case 值1:语句1;break;
case 值2:语句2;break;
case 值3:语句3;break;
default:语句4;
}
注意:值1,值2。。。。这些是确定的值,default是上述值都不是表达式的值的时候执行的语句;
这个break是必要的,如果没有break,这些语句将都会执行、
(3)while循环和for循环
for循环方式一:条件循环(最常用)
for(var i=0;i<10;i++){
console.log("i")
}
for循环方式二:遍历循环
var arr=["a","b","c"];
for (var i in arr){
console.log(i)
}
5.对象
在我们学习了面向对象之后,应该有这种思想,见到“对象”这两个字,就马上想到对象有属性和方法。
(1)字符串对象
创建方式有两种:
变量=“字符串”; var str1="hello world"
字符串对象名称=new String(字符串) var str1=new String("hello world")
字符串对象就一个属性,length属性
方法:s为字符串对象
s.toLowerCase() -----转成小写
s.toUpperCase() -----转成大写
s.trim() ------去除字符串两边空格
s.charAt() ------获取指定位置字符,括号里为要获取的字符索引
s.indexOf() -------查询指定字符的索引位置,括号里为要查找的字符
s.lastIndexOf() -------跟上面这条功能一样,但是是反着找
s.match() -------返回匹配字符串的数组,没有匹配到返回null
s.seach() -------返回匹配到的字符串首字符的位置索引,匹配不到返回-1
s="hello";
console.log(s.toLowerCase()); //hello
console.log(s.toUpperCase()); //HELLO
console.log(s.charAt(2)); //l
console.log(s.indexOf("o")); //
console.log(s.lastIndexOf("o")); //
console.log(s.match("lo")); //[object Array]["lo"]
console.log(s.match("lol")); //null
console.log(s.search("lo")); //
console.log(s.search("lol")); //-1
console.log(s.substr(1,3)); //ell
console.log(s.substring(1,3)); //el
console.log(s.slice(1,3)) ; //el
console.log(s.replace("ell","o")) ; //hoo
console.log(s.split("e")) ; //[object Array]["h", "llo"]
console.log(s.concat("world")) ; //helloworld
s.substr(start,length) -----截取指定长度字符串,start是开始位置的索引值,length表示长度
s.substring(start,end) -----截取字符串,start是开始位置索引,end是结束位置索引,取之间的字符串
s.slice(start,end) -----切片字符串
s.replace(oldstr,newstr) -----替换字符串,(旧的,新的)
s.split() -----分割字符串,结果放到一个数组中
s.concat(addstr) -----拼接字符串,括号里为要拼接的字符串
(2)数组对象(array对象)
创建数组的三种方式:
- var arr=[1,2,3];
- var arr=new Array[1,2,3];
- var arr=new Array(3);
arr[0]=1;
arr[1]=2;
arr[2]=3;
还可以创建二维数组,类似一个列表,arr[ ] [ ],第一个索引为行,第二个索引为列
join方法:
在js的数组中正好反过来,
console.log(["hello","world"].join("-")) //结果是:hello-world
reverse方法和sort方法:
都是对数组进行排序的,reverse是颠倒顺序,sort是按首字母的ascii码表位置排序
slice方法:
对数组进行切片操作,参数为开始位置和结束位置的索引值
splice方法:
删除子数组,有几个参数
arr.splice(start,deleteCount,value)
start代表开始位置(从开始位置后面开始删),deleteCount 表示删除数组元素的个数,value 表示在删除位置插入的数组元素(可省略)
push和pop方法:
在数组的最后添加和删除元素
unshift和shift方法:
在数组开始位置添加和删除元素
(3)时间对象
创建时间对象:var timer = new Date()
获取日期和时间
getDate() 获取日
getDay () 获取星期
getMonth () 获取月(0-11)
getFullYear () 获取完整年份
getYear () 获取年
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜) //设置日期和时间
//setDate(day_of_month) 设置日
//setMonth (month) 设置月
//setFullYear (year) 设置年
//setHours (hour) 设置小时
//setMinutes (minute) 设置分钟
//setSeconds (second) 设置秒
//setMillliseconds (ms) 设置毫秒(0-999)
//setTime (allms) 设置累计毫秒(从1970/1/1午夜) var x=new Date();
x.setFullYear (1997); //设置年1997
x.setMonth(7); //设置月7
x.setDate(1); //设置日1
x.setHours(5); //设置小时5
x.setMinutes(12); //设置分钟12
x.setSeconds(54); //设置秒54
x.setMilliseconds(230); //设置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5点12分54秒 x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12点23分50秒 时间对象
演示
(4)math对象,就是把内置函数封装到math对象中,使用时需要用Math来调用方法
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x)对数进行下舍入。
log(x) 返回数的自然对数(底为e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
(5)函数对象(重点)
//定义一个函数
function 函数名(参数) {
函数体
} //调用函数
函数名()
注意:js中函数的调用可以在定义之前,因为js是先编译一遍,再去执行
三、BOM对象(浏览器对象)
BOM即 浏览器对象模型(Brower Object Model)
1.windows对象
在浏览器中,每个打开的网页是一个窗口,有三种方法实现弹出框:
浏览器上常见的弹出框有
警告框alert
确认框confirm
提示框prompt
(1)alert(123) 在窗口中弹出“123”,点击确定消失
(2)var ret=confirm('zhang');
console.log(ret); 在窗口中弹出“zhang“,有确定和取消两个按钮,点击确定,会在后台返回一个true,点击取消,会返回一个false
(3)var ret=prompt("input a number") 在窗口弹出一个输入框,同样可以通过一个变量来接收用户输入的内容
2.setInterval() 和 clearInterval()
setInterval()是按照指定的时间周期(毫秒为单位)来连续调用函数或者计算表达式,第一个参数为函数,第二个参数为时间间隔
clearInterval()是取消由setInterval()设置的操作,这个的参数为setInterval()的返回值
示例:在一个input框右面有两个按钮,点击开始就在框中每隔1秒中打印一次当前时间,点击停止就停止刷新
<body>
<input type="text">
<button class="start">开始</button>
<button class="end">停止</button>
<script>
ele_start=document.getElementsByClassName("start")[0];//开始按钮
ele_end=document.getElementsByClassName("end")[0]; //停止按钮
function foo() {
var timer=new Date().toString();
var ele=document.getElementsByTagName("input")[0];
ele.value=timer.slice(4,25);//是框内显示最适合查看代码效果的部分
} var ID;//定义一个全局变量,用于接收返回值
ele_start.onclick=function () {
if (ID==undefined){ //为了解决第二次点击开始的时候,代码不执行的bug
foo(); //为了实现一点击开始,马上就能出现时间的效果
ID=setInterval(foo,1000);
} }
ele_end.onclick = function () {
clearInterval(ID);
ID=undefined; //清除定时器后再给id重新赋值
}
</script>
</body>
演示
四、DOM对象(文档对象模型)
DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
在DOM中,所有对象都是节点对象,其中
document对象是:整个html文档
element对象是指:html中的任何一个标签都是一个element对象
想要对标签执行操作需要两步:查找标签和操作标签
1.查找标签
(1)直接查找
document.getElementsByClassName("classname");//根据class查找标签
document.getElementsByTagName("elementname");//根据标签名查找标签
document.getElementById("idname"); //根据ID名查找标签
document.getElementsByName("name"); //根据name属性查找标签
这四种方法中,只有 document.getElementById("idname")是找到一个标签,其他三种都是找到多个,将结果放到一个数组中,可以通过索引分别取到
(2)通过节点属性查找
var ele=document.getElementsByClassName("start")[0];
ele.parentElement;// 查找父节点
ele.children; // 查找所有子标签
ele.firstElementChild; //查找第一个子标签元素
ele.lastElementChild; //查找最后一个子标签元素
ele.nextElementSibling; //查找下一个兄弟标签
ele.previousElementSibling;//查找上一个兄弟标签
需要注意的是,没有直接的属性可以查找到所有的兄弟标签,如果想在DOM中找到所有子标签,可以通过遍历 操作标签的父标签的所有子标签,然后用if条件判断排除当前操作标签的方法。
2.事件绑定的方式
方式一:
<body>
<div>
<button onclick="foo()">点击</button>
</div>
<script>
function foo() {
alert(123)
}
</script>
</body>
这种方式,js代码和html代码杂糅在一起,耦合性太强了
方式二:
<body>
<div>
<button>点击</button>
</div>
<script>
ele_button=document.getElementsByTagName("button")[0];
ele_button.onclick=function () {
alert(123)
}
</script>
</body>
但是这种方法会有一个问题:js代码会在页面出现的时候就已经加载完了,如果后面有新添加的标签,就不能绑定这个事件了,因为js代码已经加载过一遍,有几个绑定事件的标签就已经确定了,这个问题在jQuery中可以很方便解决,在DOM对象中,有两种解决办法可供参考:
1.把标签绑定的事件写到函数中,即第一种绑定事件的方式
2.在添加标签的代码中,再写一遍事件绑定函数
如果上面这点没看明白的话,可能你对查找到的标签是个数组这件事还不太明白,再写一个例子:
<body>
<div>
<button>添加</button>
<button>删除</button>
<button>编辑</button>
</div>
<script>
eles_button=document.getElementsByTagName("button");
//此时eles_button并不是一个标签了,而是有三个标签的集合
//给每个标签绑定事件就要通过循环遍历这个数组来拿到每个标签
for(var i=0;i<eles_button.length;i++){
eles_button[i].onclick=function () {
alert(123)
}
}
</script>
</body>
通过这个例子再说明上面的问题,在绑定事件的时候,找标签的过程就已经完成了,只找到了三个标签,但是我们新添加一个button后,代码不会再次重新刷新,所以新添加的这个button并没有绑定事件。
3.对标签操作
(1)对class操作
ele.classList.add("hide") //为标签添加class
ele.classList.remove("hide") //为标签移除class
练习:左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.left{
width: 20%;
height: 800px;
background: grey;
float: left;
}
.right{
width:80%;
height:800px;
background: navajowhite;
float: left;
}
.title{
background: purple;
margin-top: 10px;
}
ul{
background: green;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="title">菜单一</div>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div> <div class="menu">
<div class="title">菜单二</div>
<ul class="hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div> <div class="menu ">
<div class="title">菜单三</div>
<ul class="hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div> <div class="right"></div> <script>
// 查找标签
var eles_title=document.getElementsByClassName("title");
for (var i=0;i<eles_title.length;i++){
eles_title[i].onclick=function () {
this.nextElementSibling.classList.remove("hide"); //this就是触发事件的标签
var eles_child=this.parentElement.parentElement.children;
for (var j=0;j<eles_child.length;j++){
if(eles_child[j].firstElementChild!=this) {
eles_child[j].lastElementChild.classList.add("hide")//添加hide属性,就把这个标签隐藏了
}
}
}
}
</script>
</body>
</html>
演示
4.节点操作
ele.createElement() //创建一个节点,括号里是标签名
ele.removeChild() //父标签删除一个子节点,括号里是标签对象
ele.replaceChild() //替换标签,ele是父标签,括号里依次是旧的标签对象,新的标签对象
ele.appendChild() //父标签添加子标签
这里单独说一下复制标签:cloneNode
<script>
var ele_copy=document.getElementsByTagName("div")[0].cloneNode();//这种只是拷贝最外层的节点
var ele_copy=document.getElementsByTagName("div")[0].cloneNode(true);//这种才是完整的拷贝
这里有一个bug,如果被拷贝的对象有id属性,仍然可以拷贝,而且拷贝出来的对象也有这个id
还有一个问题,源标签的绑定事件不会被拷贝 </script>
5.获取标签中的文本
ele.innerText 和 ele.innerHTML
这是取值,赋值就是
ele.innerText="<a href='#'>click</a>"
ele.innerHTML="<a href='#'>click</a>"
innerText就是纯文本,但是innerHTML 会把拿到的元素当时一个标签(如果这个元素是一个标签)
6.属性值操作 attribute
我们平时取属性值的时候就直接用的 标签.属性
给属性赋值就是直接用的 标签.属性=“ ”
但是事实上,是有个attribute方法的
属性取值:ele.getAttribute(属性名)
属性赋值:ele.setAttribute(属性名)
删除属性:ele.removeAttribute(属性名)
7.DOM事件
onclick //点击标签
ondbclick //双击标签
onfocus //元素获得焦点
onblur //元素失去焦点
onchange //域的内容发生改变,常用于表单元素
onkeydown //键盘按键被按下
onkeypress //某个键盘按键被按下并松开。
onkeyup //某个键盘按键被松开。 onload //一张页面或一幅图像完成加载。 onmousedown //鼠标按钮被按下。
onmousemove //鼠标被移动。
onmouseout //鼠标从某元素移开。
onmouseover //鼠标移到某元素之上。
onmouseleave //鼠标从元素离开 onselect //文本被选中。
onsubmit //确认按钮被点击。
演示
(1)onchange事件
通常用于表单标签,一个表格里的内容被改变时(我们选择一个选项时),触发事件
练习:省市二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<!--需求:两个表单,左边是省份,右边是城市,左边选择省份后,右边内容是对应的城市-->
<body>
<select name="" id="province">
<option value="">请选择省份</option>
<option value="">河北</option>
<option value="">山东</option>
</select>
<select name="" id="city">
<option value="" id="select_city">请选择城市</option>
</select>
</body> <script>
var info={
"河北":["北京","衡水"],
"山东":["青岛","潍坊"]
};
// js中虽然没有字典的说法,但是有类似的用法。
var ele_pvn=document.getElementById("province");
var ele_city=document.getElementById("city");
var ele_select; //定义一个全局变量
ele_pvn.onchange=function () {
ele_city.options.length=1; //保留一项,后面的内容全部清除
for (var i in info){
if (i==(this.children[this.selectedIndex]).innerText){ //判断
// this.selectedIndex是取到选择内容的索引值
for(var j in info[i]){
//思路是每选择一个省份,就把后面城市里的内容全部清空,然后从“字典”中根据选择的省份,重新新建一个后面城市的标签
var city_option=document.createElement("option");
city_option.id="selected";
ele_select=document.getElementById("selected"); city_option.innerText=info[i][j];
ele_city.appendChild(city_option);
}
}
}
}
</script>
</html>
演示
(2)onkeydown事件,用于input输入框
这个事件是按键盘上任意按键都会触发,这其实意义不大。如果想要指定按键,该怎么做?
这里用到一个event对象,event对象是保存事件触发状态的对象,由操作系统发送
ele.onkeydown=function (e) {
e=e||window.event; //这句代码是为了避免出现某些浏览器的不兼容问题
console.log(e.keyCode);//这样会打印按键的ascii码
console.log(String.fromCharCode(e.keyCode))//这句代码可以把ascii码转换成字符
}
(3)onload事件
script中涉及到查找标签时,js代码必须写在html代码下面,否则会因为找不到标签而报错
但是如果就是想让js代码在上面,就用到onload事件
或者再说一个应用场景:浏览器加载图片实际上是和加载其他文本标签分开的,是新开了一个线程。有时网速不给力的时候,就会出错。这时就可以用到这个事件,让其他标签等待图片加载完才能操作
用法如下:
<script>
window.onload=function () {
var ele=document.getElementsByTagName("div")
ele.style.color="green"; }
</script>
(4)onsubmit事件
这个事件是给form表单用到,是在表单提交的时候触发。表单标签里面的那个submit标签,点击之后会刷新页面,同时把数据提交给后台服务器(如果action指定了地址),这是submit自己默认的事件,我们用onsubmit事件的意义就是要阻止submit的默认事件。比如在用户登录输入用户名密码的时候,前端可以先判断一下格式是否正确,如果格式都不正确,就没必要发送给后端了。
onsubmit事件一定是在submit事件之前触发的,否则就没意义了。
阻止submit默认事件的方法有两个:
1.return false
2.e.preventDefault()
练习:用户登录验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
div{
margin-top: 30px;
}
</style>
</head>
<body>
<form action="" class="form">
<div id="abd" ><input type="text" placeholder="用户名" class="text"></div>
<div><input type="password" placeholder="密码" ></div>
<div id="abc"></div>
<div><input type="submit" value="提交" class="submit"></div>
</form> </body> <script>
var ele_text=document.getElementsByClassName("text")[0];
var ele_submit=document.getElementsByClassName("form")[0];
var ele_abd=document.getElementById("abd"); ele_submit.onsubmit=function () {
if (ele_text.value.length>5){
var ele_warm=document.createElement("h5");
ele_warm.innerText="用户名超出规定长度!";
ele_warm.style.color="red";
ele_warm.style.display="inline";
ele_abd.appendChild(ele_warm); return false;//阻止submit默认事件
}
} </script>
</html>
演示
(5)onmouseout和onmouseleave事件
这两个事件都是鼠标移开时触发的事件,不同的是:
- 不论鼠标指针离开被选元素还是任何子元素,都会触发onmouseout事件
- 只有在鼠标指针离开备选元素时,才会触发onmouseleave事件
可以通过一个左侧菜单的案例来搞清楚这两个的区别
<style>
.container{
width: 300px;
}
.title{
background:green;
line-height: 44px;
text-align: center; }
.list{
display: none;
}
.list div{
line-height: 40px;
}
.item1{
background: purple;
}
.item2{
background: orange;
}
.item3{
background: greenyellow;
}
</style>
</head>
<body>
<div class="container">
<div class="title">text</div>
<div class="list">
<div class="item1">111</div>
<div class="item2">222</div>
<div class="item3">333</div>
</div>
</div> <script>
var ele=document.getElementsByClassName("title")[0];
var ele_list=document.getElementsByClassName("list")[0];
var ele_box=document.getElementsByClassName("container")[0];
ele.onmouseover =function () {
ele_list.style.display="block";
};
// ele.onmouseleave =function () {
// ele_list.style.display="none";
// }这样是有问题的,鼠标往下走也隐藏了,应该给盒子绑定
ele_box.onmouseleave =function () {
ele_list.style.display="none";
};
</script>
演示
8.事件传播
父标签绑定事件a,子标签绑定事件b,那么触发事件b的时候,肯定事件a也会触发,这就叫事件绑定
我们需要知道的是怎么解除事件绑定,方法是在子标签中添加e.stopPropagation
<script>
ele_inner.onclick =function (e) {
alert(123);
e.stopPropagation()
}
</script>
写一个跑马灯的例子,感觉还挺好玩的,下起了雨,下雨天留客天留我不留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<h4>下雨天留客天留我不留</h4> </body> <script>
function foo() {
var ele=document.getElementsByTagName("h4")[0];
var first_str= ele.innerText.charAt(0);
var second_str=ele.innerText.slice(1,ele.innerText.length);
var new_str=second_str + first_str;
ele.innerText=new_str
}
setInterval(foo,500) </script>
</html>
演示
9.标签与标签之间绑定
考虑一个需求:京东下面的商品详情,评论,售后这些内容,是通过点击“商品详情”,“评论”,“售后”这些按钮,就可以显示对应的内容,这个对应关系是怎么实现的呢,这用到了自定义属性
<body>
<ul>
<li gname="c1">商品详情</li>
</ul>
<div id="c1">商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</div>
</body>
这样就可以实现两个标签的绑定
前面说了,取属性值一般都用点属性的方式,但是在这里取这个自定义属性,就只能用getAttribute方法了。
前端三剑客之javascript的更多相关文章
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- 前端开发:Javascript中的数组,常用方法解析
前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...
- 前端html、Javascript、CSS技术小结
简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...
- 前端基础之JavaScript day51
前端基础之JavaScript JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中) ...
- 前端工程师(JavaScript)在业余时间如何提高自身能力
1.前端工程师(JavaScript)在业余时间如何提高自身能力? https://www.zhihu.com/question/40186398?sort=created 2.前端开发工程师必读书籍 ...
- 腾讯Web前端开发框架JX(Javascript eXtension tools)
转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 ...
- 进击的Python【第十四章】:Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
- 前端html+css+JavaScript 需要掌握的单词
前端html+css+JavaScript 需要掌握的单词 broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...
- 前端必学---JavaScript数据结构与算法---简介
前端必学---JavaScript数据结构与算法---简介 1. 数据结构: 数据结构是相互之间存在一种或者多种特定关系的数据元素的集合.---<大话数据结构> 1.1 数据结构的分类 1 ...
随机推荐
- js判断IP字符串是否正确
//判断ip地址的合法性 function checkIP(value){ var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0 ...
- python学习笔记11 ----线程、进程、协程
进程.线程.协程的概念 进程和线程是操作系统中两个很重要的概念,对于一般的程序,可能有若干个进程,每一个进程有若干个同时执行的线程.进程是资源管理的最小单位,线程是程序执行的最小单位(线程可共享同一进 ...
- HTTP协议格式及基础
HTTP请求数据: HTTP请求信息由3部分组成: ① 请求方法 URI 协议/版本 ② 请求头(Request Header) ③ 请求正文 HTTP 请求 数据 例子举例: GET/sam ...
- 一步步教你学会browserify
本文来自网易云社区 作者:孙圣翔 注意 文章需要边看边练习,不然你可能忘得速度比看的还快. 原文地址: http://my.oschina.net/goskyblue/blog/552284 Brow ...
- 学习RadonDB源码(一)
1. 可能是开始也可能是结束 RadonDB是国内知名云服务提供商青云开源的一款产品,下面是一段来自官方的介绍: QingCloud RadonDB 是基于 MySQL 研发的新一代分布式关系型数据库 ...
- ASP.NET控件之RangeValidator控件
作用:对Textbox或者输入框进行范围验证: 属性:ControlToValidate:要验证的控件: ErrorMessage:错误提示信息: MaxiMumValue:最大值: MinimumV ...
- [Xcode 实际操作]五、使用表格-(4)设置UITableView单元格数据库源
目录:[Swift]Xcode实际操作 本文将演示如何自定义表格的数据来源. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加 ...
- java8List集合根据对象的属性去重
import static java.util.Comparator.comparingLong; import static java.util.stream.Collectors.collecti ...
- 文本处理三剑客之gawk
gawk 作者:Aho, Weinberger, Kernighan 版本: GNU awk:gawk New awk:nawk 简介:格式化文本输出工具,模式扫描及处理语言:报告生成器. 用法:ga ...
- vue-cli 使用sass(scss)
安装依赖: npm install sass-loader node-sass vue-style-loader --save-dev