5天揭秘js高级技术-第一天

一、基础杂记

1. document.write()

1 <script type="text/javascript">
2     document.write(‘<h2>我爱你</h2>‘);
3 </script>

document.write

2. 变量必须声明才能使用:

  使用var声明:局部变量;

  没有使用var声明:全局变量;

3. 数据类型:

  String:字符串  ‘’ ,“”;

  Number:数字;

  Boolean:布尔型;

  Undefined:未定义,只是声明了变量,但没有赋值;

  Null:空;

  Object:对象(数组,函数等);

4. prompt:

1 var num=prompt("请输入:");//弹出输入对话框,并将输入值传递给num;
2 alert(num);

prompt

二、函数:

1. 引用传递实例:

1 //按引用传递的对象函数实例:
2 var p1=new Object();
3 function display(obj){
4     obj.name=‘lisi‘;
5 }
6 p1.name=‘zhangsan‘;
7 display(p1);
8 alert(p1.name);//结果:‘lisi‘

引用传递

2. 匿名函数:

  1)函数名就是首地址;

 1     <script type="text/javascript">
 2         //匿名函数
 3         var i=0;
 4         function display(){
 5             alert(‘hello!‘);
 6         }
 7         i=display();//变量i的值为函数的返回值,且立刻执行display这个函数,‘()‘有立刻执行的作用;
 8         i=display;//变量i指向了这个函数的首地址;
 9         i();
10     </script>

  2)匿名函数演变:

1         var j=function display1(){//此时的display名称已经没有意义;
2             alert(‘nihao!‘);
3         }
4         j();
5         var k=function(){
6             alert(‘nihao!‘);
7         };
8         k();

  3)自调用匿名函数:

 1 <script type="text/javascript">
 2 //没有任何变量指向这个函数的首地址;
 3 //用()将函数括起来,相当于得到函数的收地址,后面的()相当于立即执行这个函数;
 4 //自调用匿名函数也可以传递参数
 5     (function(index){
 6         alert(‘hello,js:‘+index);
 7     })(10);
 8
 9 </script>
10 //结果:10;    

  这种写法的好处:可以避免代码库中的函数重命名的问题,并且以上代码只会在运行时执行一次,一般用作初始化工作;

3. 全局变量和局部变量:

  在函数内部定义(用var定义,如果没有用var定义,也是全局的变量)的变量是局部变量,否则是全局变量;

 1     <script type="text/javascript">
 2         var i=1;//全局
 3         j=2;//全局
 4         function play(){
 5             var k=3;//局部
 6             p=4;//全局
 7         }
 8         play();
 9         alert(p);//结果:4
10     </script>

  为什么没有var定义的变量就是全局的呢?

  是因为,在js中,如果某个变量没有var声明,会自动到上一层作用域中区找这个变量的声明语句,如果找到,就使用,如果没有找到,继续向上查找,一直查找到全局作用域为止,如果全局作用域中仍然没有这个变量的 声明语句,那么会自动在全局作用域进行声明,这个就是js中的作用域链;

4. 作用域链:内部作用域访问外部作用域;(外部作用域访问内部作用域:闭包)

 1     <script type="text/javascript">
 2         var i=1;
 3         function fn1(){
 4             var i=10;
 5             function fn2(){
 6                 i=100;
 7                 function fn3(){
 8                     i=1000;
 9                 }
10                 fn3();
11             }
12             fn2();
13         }
14         fn1();
15         alert(i);//结果:1
16     </script>

5. arugments的使用:

  在一个函数内部,可以使用arguments属性,它表示函数的形参列表,它是以数组形式体现的;

  如果定义时,参数个数不确定,可以通过arguments这个属性来保存所有实参;

 1 <script type="text/javascript">
 2         function display(){
 3             //没有定义形参,那么所有形参会自动存放到arguments这个属性数组中;
 4             for(var i=0;i<arguments.length;i++){
 5                 document.write(arguments[i]+‘,‘);
 6             }
 7
 8         }
 9         display(‘lisi‘,‘zhangsan‘,‘wangwu‘);//结果:‘lisi‘,‘zhangsan‘,‘wangwu‘
10 </script>

五、js的执行过程

  js中的script是分段执行的;

  执行过程:

    1)读取第一个代码段

    2)编译:

      声明变量,声明函数,语法检查,语义检查,代码优化...

      var i=10;

      var i;

    3)执行

    4)读取第二个代码段

    5)编译

    6)执行

    .........

    结束

 1     <script type="text/javascript">
 2         //错误:i is not defined
 3         alert(i);
 4     </script>
 5     <script type="text/javascript">
 6         //弹出:undefined
 7         //原因:首先编译,这是已经声明了变量j,这时它是undefined,接下来是执行alert,此时,j还没有赋值,所以...
 8         alert(j);
 9         var j=10;
10         //弹出:10
11         //原因:此时j应经赋值;
12         alert(j);
13     </script>

六、js中的常见错误:

  编译错误和运行错误。

  1. 两种错误导致的结果:相同点

  (错误后面的js语句都不会有效果)

1     <script type="text/javascript">
2         alert(n);
3         alert("hello");
4     </script>
5     <script type="text/javascript">
6         var n=10;
7         alert(n;
8         alert("hello");
9     </script>

  2.不同点:

    运行错误代码段会弹出"hello1",因为执行完第2行,执行第3行时出错;

    编译错误代码段不会弹出"hello2",因为编译过程就已经出错,就不会执行改代码段了;

1     <script type="text/javascript">
2         alert("hello1");
3         alert(m);//运行错误
4     </script>
5     <script type="text/javascript">
6         alert("hello2");
7         var n=10;
8         alert(n;//编译错误
9     </script>

  总结:

    编译时,如果发生错误,那么当前代码段会停止执行,而执行后面代码段的内容;

    运行时,如果发生错误,但前面的代码已经执行完毕,所以不会影响前面的内容;

    无论是哪种错误,不会影响后面的代码段的执行;

 1     <script type="text/javascript">
 2         alert(i);//运行错误
 3         var first=10;
 4         function play(){
 5             alert("play");
 6         }
 7     </script>
 8     <script type="text/javascript">
 9         alert(first);
10         play();
11     </script>

  结果:弹出undefined,弹出play;

 1     <script type="text/javascript">
 2         var first=10;
 3         function play(){
 4             alert("play");
 5         }
 6         alert(i;  //编译错误
 7
 8     </script>
 9     <script type="text/javascript">
10         alert(first);
11         play();
12     </script>

  结果:什么也没弹出;

  总结:如果代码段中出现编译错误,那么该代码段中所有已经声明的全部无效;

  JS执行流程图:

时间: 2024-10-06 08:51:40

5天揭秘js高级技术-第一天的相关文章

GridView 高级技术

GridView 高级技术 汇总脚注 GridView 的主要目标是显示一组记录,但是你还可以加入一些有趣的信息,如汇总数据.需要如下的操作: 设置 GridView.ShowFooter 为 true ,这样可以显示脚注行(但没有数据) 在 GridView.FooterRow 中加入内容 本例假设正在处理产品列表,一个简单的汇总可以显示产品总价或均价.第一步是确定何时计算这个信息.如果正使用手工绑定(DataSource),那么可以在数据对象绑定到 GridView 之间就读取它的值并进行计

JS高级前端开发群加群说明

JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这样的成绩或这样一个结果也是情理之中,一方面来说,提倡的各种交流沟通方法大部分是正确有效或被大家认可的,另外一方面说,这么多人聚在一起,跟大伙的参与分享是分不开的,尤其是各群的管理,是我们的灵魂精神的支柱.另外在国内行业前进的道路上,尽自己的绵薄之力帮助他人,引领氛围,进而影响行业,也是略感欣慰.有时候精

读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

读书笔记 - js高级程序设计 - 第十三章 事件 canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好 有时候即使浏览器支持,操作系统如果缺缺乏必要的绘图驱动程序,则浏览器即使支持了也没用   <canvas> var drawing = document.getElementById("drawing"); if( drawing.getContext ){ drawing.getContext("2d"

javascript高级程序设计 第一章--javascript简介

javascript高级程序设计 第一章--javascript简介Netscape开发的javascript最初的目的就是处理由服务器负责的一些输入验证操作,而在js问世之前,必须                    把表单数据发到服务器端用户才能得到反馈.如今的js不再局限于简单的数据验证,而且具备了与浏览器窗口及其内容等所有方面的交互能力,js已经发展成功能全面的面向客户端的编程语言.javascript由Netscape公司开发,原名Livescript,是为了迎合当时的java热,所

【ASP.NET Identity系列教程(三)】Identity高级技术

注:本文是[ASP.NET Identity系列教程]的第三篇.本系列教程详细.完整.深入地介绍了微软的ASP.NET Identity技术,描述了如何运用ASP.NET Identity实现应用程序的用户管理,以及实现应用程序的认证与授权等相关技术,译者希望本系列教程能成为掌握ASP.NET Identity技术的一份完整而有价值的资料.读者若是能够按照文章的描述,一边阅读.一边实践.一边理解,定能有意想不到的巨大收获!希望本系列博文能够得到广大园友的高度推荐. 15 Advanced ASP

如鹏网学习笔记(三).Net高级技术

net高级技术 一.多项目开发 1,添加对项目的引用 //新建一个类库,用来放公共的要使用的类,使用的时候别的项目去引用它 //using 类库文件; 注意事项:注意被引用的类要使用public修饰 被引用的程序集中的类的修饰符,如果不写的话,默认是internal. 效果是,只有当前程序集(类库)内部才能访问. 2,多项目时候的配置文件的读取问题 a,只有主项目的配置文件才起作用(当前启动的) b,config文件不能改名,不能建多个config,在config里面也不能建多个AppSetti

开发微信全家桶项目 Vue Node MongoDB高级技术栈全覆盖

开发微信全家桶项目 Vue Node MongoDB高级技术栈全覆盖链接:https://pan.baidu.com/s/15-9Ne3vFEFPzJA0wyltxrg 提取码:加Q:1642261812 V信:SH66668888QH 获取 第1章 本地与服务器环境准备介绍微信公众号/小程序/域名/服务器的申请选购流程,在本地与线上服务器分别对项目的运行环境进行搭建部署,如 Node.js/Vue/Yarn/PM2/Nginx/MongoDB 等等,同时会来简单介绍下从本地通过 PM2 利用

&lt;JS高级程序设计3&gt;_PART3

1.ECMAScript中所有数都以IEEE-754 64位格式存储,但位操作符不直接操作64位的值.是先64位转换成32位的整数,再操作,得到结果再转成64位. 2.首位是符号位.之后的31位代表整数的值. 3.用toString(2)打印二进制,得到的是被处理过的二进制. 4.按位非(NOT)~,数转成二进制,取反.相当于把操作数先变负再-1; 5.按位与(AND)&,两个数的二进制,有一个0结果就是0,两个都是1才为1. 6.按位或(OR)|,有一个1结果为1,都是0才为0. 7.按位异或

惰性函数——JS高级

原文地址:http://www.cnblogs.com/galenyip/p/4613430.html 我们先来看一下js的异步提交. XHR我们在原生的时候常常用到,因为常用到,我们更多把封装到了工具库中 先看下他最常用的实现 1 // 旧方法 2 3 function createXHR() { 4 var xhr; 5 try{ 6 xhr = new XMLHttpRequest(); 7 }catch(e) { 8 handleErr(e); 9 10 try { 11 xhr = n