前端分享----js

2019-04-03  本文已影响0人  白羊座的泰迪

一.JavaScript的简史

  1. 1995年的时候 由网景公司(Netscape)开发的，当时的名字叫livescript 为了推广自己的livescript，搭了java顺风车，改名为javascript。
    与此同时，微软也在自己的浏览器里推出了自己的脚本语言jsscript。
    Netscape

  2. 1997年时候， 由ECMA(欧洲计算机制造商协会)出面，推出了一套javascript的规范，Ecmascript ,规范提出js由三部分组成

    • ECMAScript 基础语法
    • DOM 文档对象模型
    • BOM 浏览器对象模型

  3. 2003之前，网页界面上的弹窗广告几乎都是由js做的，被人称做牛皮癣。

  4. 2004年的时候，JS的命运发生改变 ajax(谷歌公司)出现。

  5. 2007的时候 苹果公司推出的手机，可以用来上网，移动端页面开始流行。

  6. 2010的时候 H5的出现 canvas 又推高了js的地位

  7. 2011年的时候， node.js 将js这种语言伸向后服务器端

注1：
后来，微软通过IE击败了Netscape后一统桌面，结果几年时间，浏览器毫无进步。（2001年推出的古老的IE 6到今天仍然有人在使用！）
没有竞争就没有发展。微软认为IE6浏览器已经非常完善，几乎没有可改进之处，然后解散了IE6开发团队！而Google却认为支持现代Web应用的新一代浏览器才刚刚起步，尤其是浏览器负责运行JavaScript的引擎性能还可提升10倍。
先是Mozilla借助已壮烈牺牲的Netscape遗产在2002年推出了Firefox浏览器，紧接着Apple于2003年在开源的KHTML浏览器的基础上推出了WebKit内核的Safari浏览器，不过仅限于Mac平台。
随后，Google也开始创建自家的浏览器。他们也看中了WebKit内核，于是基于WebKit内核推出了Chrome浏览器。

注2：
有个叫Ryan Dahl的歪果仁，2009年，推出了基于JavaScript语言和V8引擎的开源Web服务器项目，命名为Node.js。
Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。

二.JavaScript能做什么

2.JavaScript的特点

3.变量

关键字：有特殊功用的单词就叫做关键字;
保留字：未来可能做为关键字的存在

关键字 保留字

4.数据类型

if(true){console.log('他是对的')}

5.数据类型转换

5.运算符

六、定时器

var timer = setInterval(function(){
  console.log("setInterval");
},1000)
clearInterval(timer);

var timer = setTimeout(function(){
  console.log("setInterval");
},1000)
clearTimeout(timer);

注1：两种定时器的应用场景
setInterval是间隔设定时间循环执行，用在需要轮询执行的逻辑中；
setTimeout是在延时设定时间后只执行一次，用在一个需要在当前时间延时指定时间执行的逻辑

七、循环语句

var a = 1;
 while(a<=100){
       console.log(a);
       a++; //如果a++忘记写，导致判断永远为true，则会陷入死循环
   }

var a = 0;
do{
    console.log(a)
    a++
}while(a <= 10)

var c = 0;
for(var i = 0; i < 10; i++){
    console.log(c);
    c++
}

注1：while循环很危险
只要指定条件为 true，循环就可以一直执行代码。如果循环体内逻辑忘记修改判断的状态或者判断写错(永远为true)，该循环永远不会结束。会导致浏览器崩溃。
http://www.w3school.com.cn/js/js_loop_while.asp

注2：数组和对象自己的循环逻辑

  1. 数组：foreach、map
  2. 对象：for-in
//foreach
var arr = [1,2,3,4]
arr.forEach(function(value,i){
　　console.log('forEach遍历:'+ i +'--'+ value);
})
//map
arr.map(function(value,index){
   console.log('forEach遍历:'+ index +'--'+ value);
});
//for-in
//对象里的值是以键值对的形式存储
var obj = {a:1, b: 2}
for (var key in obj){
    console.log(obj[key]);
    console.log(key);
}

八、异步和同步

注1：ajax异步示例

var aa = 4;
$.getJSON("https://www.easy-mock.com/mock/5b98722937496f558cf63073/example/starList").then(function(res){
   console.log("请求成功");
})

console.log("请求后");
console.log("请求后1");
for(var i=0; i<500; i++){
   aa++
}
console.log(aa);

注2：setTimeout异步示例

var aa = 1;
setTimeout(function() {
   console.log("setTimeout");
}, 0);

console.log("请求后");
for(var i=0; i<500; i++){
   aa++
}

console.log(aa);

九、Ajax / json

    // 创建XMLHttpRequest 对象
    var xml = new XMLHttpRequest();

    // 设置跟服务端交互的信息
    xml.open('get','https://www.easy-mock.com/mock/5b98722937496f558cf63073/example/starList');
    xml.send(null);    // get请求这里写null即可

    // 接收服务器反馈
    xml.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
        if (xml.readyState == 4 && xml.status == 200) {
            // 打印响应内容
            console.log(xml.responseText);
        } 
    };

注1：onreadystatechange 中readyState 的状态值
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
注2：JQ中ajax的调用
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

十.js书写位置

<script type="text/javascript">
        // 在这里写js代码
</script>

注：必须写在相关元素的后边

<script src="xx/index.js"></script>

十一.调试

上一篇下一篇

猜你喜欢

热点阅读