Javascript提升阶段学习

JavaScript 1:javascript简介   JavaScript是一种脚本语言,能实现网页内容的交互显示,当用户在客户端显示该网页时,浏览器就会执行JavaScript程序,用户通过交互的操作来改变网页等等内容,来实现html语言无法实现的效果   (html是网页的基础,css是样式,js是特效) 2:javascript语言特点   2.1:JavaScript是基于对象和事件驱动的(动态的),它可以直接对用户或客户输入做出响应,无须经过web服务程序,他对用户的响应,是采用以事件驱动的方式进行的 ,所谓事件驱动,就是指在主页中执行了某种操作产生的动作,就成为事件。比如按下鼠标,移动窗口,选择菜单都可以视为事件,当事件发生后,可能引起相应的事件响应   2.2:JavaScript是跨平台的     javascript是依赖于浏览器本身的,与操作系统无关。 3:如何使用JavaScript   3.1:通过<script></script>中直接编写   3.2:通过<script src='目标文档的URL'></script>链接外部的js文件   3.3:作为某个元素的事件属性值或者是超链接的href属性值     <a href="javascript:alert('hello')">点击</a> 4:代码屏蔽   4.1:<!--//-->当浏览器不支持js时进行代码屏蔽   4.2:如果浏览器不支持js,可以使用<noscript></noscript>标签,显示noscript中的内容 5:javascript的基本语法   5.1:JavaScript的执行顺序     (1):按照在html文件中出现的顺序依次执行     (2):优化由于html的执行顺序则js的代码(脚本)最好放在body标签中,放到网页的最后,css样式放在head标签中     (遵循雅虎14条前端优化的规则)   5.2:大小写敏感,忽略空白符和换行符     JavaScript严格区分大小写   5.3:语句分隔符     使用结束语句;     可以把多个语句写在一行;     最后一个语句的分号可以省略,但尽量不要省略;     可以使用{}括成一个语句组,形成一个block块;

  5.4:\进行折行操作是针对代码的,避免一行过长,     document.write("asdfghjklqwer\       tyuiopzxcvbnm");

  5.5:注释     //单行注释内容     /*     *多行注释内容     */   5.6:JavaScript中的错误   5.7:通过document.write()向文档书写内容(不可以拿来调试bug)     通过console.log()向控制台写入内容(控制台输出)   5.8:火狐浏览器    进行程序的断点调试,插件的安装,菜单--》附加组件--》Firebug   (F12打开Firebug,firebug第一可以查看和编辑修改html和css的源码   第二页面概况,第三动态执行JavaScript。火狐工具打断点调试,第四监控网络情况)

6:Javascript变量和数据类型   6.1:定义变量     var 变量名;(var这个关键词可以省略的);   6.2:javascript变量的类型是如何决定的     JavaScript中变量的数据类型是js引擎决定的;   6.3:typeof关键字     检查变量代表的具体数据类型     document.write(typeof name);     document.write(typeof age);     document.write(type 18);   6.4:数据类型     (1):基本数据类型       数值类型(Number):判断是否是数值类型isNaN();       布尔类型(Boolean)       字符串类型(String)       null:空值 var sex=null;结果为null;       null类型只有一个值,就是null,       undefined:表示不存在的值或者尚未赋值的变量,对一个变量只声明不赋值或者赋予一个不存在的属性值,都会使这个变量的值为undefined     undefined类型只有一个值undefined,当声明的变量未初始化的时候,该变量的默认值就是undefined       document.write(null==undefined);结果为true;       null和undefined的区别:null表示尚未存在的对象(typeof null),undefined声明变量但未对其初始化时赋予该变量的值     (2):复合数据类型(引用数据类型)       对象:var obj=new Object();       数组:var arr=new Array();       函数:var test=function(){         console.log("函数的使用");       }     //调用函数     test();   6.5:转换成数值     (1):转换成整形:parseInt();     (2):转换成浮点型:parseFloat();     (3):Number()函数     (4):注意:Number函数将字符串转换为数值比parseInt函数严格的多,基本上只要有一个字符无法转换成数值,整个字符串都会被转换为NaN;

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4 <!--link href="*.css" rel="stylesheet" type="text/css">-->    
 5     <title>柠檬学院</title>
 6 </head>
 7 <body>    
 8     <script language="javascript">
 9         //数值类型
10         var age=22;
11         //布尔类型
12         var flag=true;
13         //字符串类型
14         var name="别宏利";
15         //null类型
16         var sex=null;
17         //undefined类型表示只声明未对其进行初始化操作
18         var grade=undefined;
19         document.write("age="+age+"<br/>");
20         document.write("flag="+flag+"<br/>");
21         document.write("name="+name+"<br/>");
22         document.write("sex="+sex+"<br/>");
23         document.write("grade="+grade+"<br/>");
24         console.log(age);
25         console.log(flag);
26         console.log(name);
27         console.log(sex);
28         console.log(grade);
29         //复合数据类型,对象
30         var obj=new Object();
31         obj.name="biehongli";
32         obj.age="22";
33         obj.sex="nan";
34         document.write(obj.name+"<br/>");
35         document.write(obj.age+"<br/>");
36         document.write(obj.sex+"<br/>");
37         //数组
38         var arr=new Array();
39         arr[0]="12";
40         arr[1]="34";
41         arr[2]="55";
42         document.write(arr+"<br/>");//注意这个输出的全部的数值,自带分号
43         document.write(arr[0]+"<br/>");
44         document.write(arr[1]+"<br/>");
45         document.write(arr[2]+"<br/>");
46         console.log(arr);
47         console.log(arr[0]);
48         console.log(arr[1]);
49         console.log(arr[2]);
50         //函数
51         var test=function(){
52             document.write("我是一个函数"+"<br/>");
53             console.log("我是一个函数");
54         }
55         test();//函数的调用
56         //数值类型的转换
57         var num1="125";
58         var num2="125";
59         var num3=num1+num2;
60         document.write(num3+"<br/>");
61         console.log(num3);
62         //parseInt();类型转换
63         var a="123";
64         var b=321;
65         var c=parseInt(a)+b;
66         document.write(c+"<br/>");
67         console.log(c);
68         //parseFloat();浮点型
69         var i=111.111;
70         var j=222.222;
71         var k=parseFloat(i)+parseFloat(j);
72         document.write(k+"<br/>");
73         console.log(k);
74         //判断是否是数值类型NaN
75         var v1="123";
76         var v2="123 456";
77         var v3="456a";
78         document.write("v1="+isNaN(v1)+"<br/>");
79         document.write("v2="+isNaN(v2)+"<br/>");
80         document.write("v3="+isNaN(v3)+"<br/>");    
81         //Number函数
82         var test1="true";
83         var test2="false";
84         var test3=new Date();//获取当前时间
85         var test4="999";
86         var test5="999 888";
87         document.write(Number(test1)+"<br/>");
88         document.write(Number(test2)+"<br/>");
89         document.write(Number(test3)+"<br/>");
90         document.write(Number(test4)+"<br/>");
91         document.write(Number(test5)+"<br/>");
92         
93     </script>
94 </body>
95 </html>

7:运算符与表达式   7.1:表达式-表达式是用于JavaScript脚本运行时进行计算的式子,可以包含常量,变量,运算符   7.2:运算符     (1):算术运算符:       +,-,*,/,%,++,--     注意:       《1》+号用来连接两个字符串       《2》js代码的执行顺序是从左到右,所以在+连接的表达式中,遇到字符串型数据之前,所有出现的数值型数据         (或者可以自动转换为数值型的数据)仍被作为数值来处理,为了避免这种情侣,我们可以在表达式前拼一个空字符串       《3》只要+连接的操作数中有一个是字符串型,js就会自动把非字符串型数据作为字符串型数据来处理     (2):字符连接符:通过+连接字符串     (3):赋值运算符:=,+=,-= ,*= ,/= ,%=     (4):比较运算符:>, < ,>= ,<= ,== ,!= ,!== ,===,       比较运算符的结果为布尔类型       注意:==用于一般比较,只要求值相等;===用于严格比较,值和类型都相等,只要类型不匹配就返回false;=是赋值       实例:document.write("1"==true);//true           document.write("1"===true);//false       (5):逻辑运算符:&&,||,!       &&:结论第一个表达式为false,第二个表达式不执行;第一个表达式为true,第二个表达式才执行。       ||:结论第一个表达式为false,第二个表达式才执行;第一个表达式为true,第二个表达式不执行。          注意:逻辑运算符的结果为布尔类型,&&如果第一个表达式为false,造成短路,||如果第一个表达式为true,造成短路     (6):三元运算符:       exp1?exp2:exp3;     (7):其他运算符:       (1):void运算符,用来指明一个表达式返回结果       (2):typeof运算符,用来返回一个字符串,返回的是操作数的数据类型   7.3:运算符的优先级-通过()改变优先级 8:流程控制   8.1:条件语句     if(exp)执行一句代码     if(exp){执行代码块};     if(exp){exp为true执行代码段}else{exp为false执行代码段};     if...elseif...     switch...case     if嵌套   8.2:循环语句     (1):for循环:for(语句1;语句2;语句3){语句块}     特殊情况如下     for(x in arr)     var arr={"张三","李四","阿五"};     for(x in arr){document.write(arr[x]);}     (2):while循环       while(条件语句1){语句块}     (3):do...while循环(这个循环至少会执行一次,即使这个条件为false)       do{语句块}while(条件语句1);   8.3:特殊循环控制     (1):break终止循环     (2):continue跳过当次循环,进入下次循环

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title></title>
 5     <style type="text/css">
 6     </style>    
 7 </head>
 8 <body>
 9     <script language="javascript">
10         var a=9;
11         var b=0;
12         document.write(a<8&&b>-1);//&&且运算符,相当于and
13         //true true true;
14         //true false false
15         //结论第一个表达式为false,第二个表达式不执行
16         //第一个表达式为true,第二个表达式才执行。
17         document.write("<br/>");
18         document.write(a+"<br/>");
19         document.write(b);
20         document.write("<br/>");
21         var i=10;
22         var j=0;
23         document.write(i<11||j>1);
24         document.write("<br/>");
25         document.write(i);
26         document.write("<br/>");
27         document.write(j);
28         document.write("<br/>");
29         var x=10;
30         document.write(!x);
31         document.write("<br/>");
32         var m=45;
33         var n=12;
34         var l=m<n?m:n;
35         document.write(l);
36         document.write("<br/>");
37         var age=18;
38         document.write(age>=18?"成年人哦":"未成年人哦");
39         document.write("<br/>");
40         
41     </script>    
42 </body>    
43 </html>

9:Javascript函数   9.1:什么是函数?     函数是完成某一功能的代码段,函数是可重复执行的代码段,函数方便管理和维护   9.2:函数的定义和使用     9.2.1:函数的分类:        自定义函数,我们自己编写的函数,通过function关键字;        function 函数名称([参数...]){代码段;return 返回值;}        系统函数,JavaScript自带的函数,如alert函数     9.2.2:函数的声明       常用方式:function 函数名([参数...]){代码段;} 调用方式:函数名();       函数表达式:var 函数名=function([参数...]){语句块;} 调用方式:var 变量=函数名(); 变量("实际参数");     9.2.3:函数的调用方式       普通调用:functionName(实际参数...)       通过指向函数的变量去调用:var myVar=函数名;myVar(实际参数);   9.3:函数返回值     当函数无明确返回值时,返回的值就是undefined     当函数有返回值时,返回值是什么就返回什么   9.4:参数     9.4.1:函数可以有参数也可以没有参数,如果定义了参数,在调用函数的时候没有传值,默认设置为undefined     9.4.2:在调用函数时如果传递参数超过了定义时参数,js会忽略掉多余的参数     9.4.3:可变参数       函数的参数列表可以是任意多个,并且数据类型可以是任意的类型       可以通过arguments对象实现可变参数的函数   9.5:局部变量,全局变量     9.5.1:局部变量       在函数体内声明的变量,仅在函数体内可以使用     9.5.2:全部变量       函数体外声明的变量,在变量声明开始到脚本结束都可以使用     9.5.3:注意       尽量控制全局变量的数量,容易引发bug       最好总是使用var 语句来声明变量   9.6:JavaScript创建动态函数     动态函数比较用Function对象来定义(Function是JavaScript中的一个对象,是固定不变的,规定Function对象的"F"必须大写)     创建动态函数的基本格式:var 变量名=new Function("参数1","参数2","参数3","参数n","执行语句");   9.7:匿名函数     9.7.1:直接声明一个匿名函数,立即使用;     9.7.2:好处:省得定义一个用一次就不用的函数,而且避免了命名冲突的问题。js中没有命名空间的概念,因此很容易函数命名的冲突,一旦命名冲突以最后声明为准     9.7.3:格式:       alert(function(i1,i2){return i1+i2; }(10,9));   9.8:JavaScript不支持函数的重载     javascript没有方法重载的说法,如果两个方法名字一样,即使参数个数不一样,那么后面定义的就会覆盖前面定义,调用方法调用的是后面的方法。   9.9:JavaScript函数的特殊性     JavaScript中的函数本身就是变量,所以函数也可以当做普通变量来使用。   9.10:JavaScript全局函数

  1 <html>
  2 <head>
  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4 <title></title>
  5     <style type="text/css">
  6     </style>    
  7 </head>
  8 <body>
  9     <script language="javascript">
 10     
 11         //常规方法,开发项目中使用较多,第二种使用方式较少
 12         function test(str){
 13             alert(str);
 14         }
 15         //函数调用的第一种方式
 16         test("我的第一个函数");
 17         //函数表达式
 18         var test2=function(str2){
 19             alert(str2);
 20         }
 21         //函数调用的第二种方式
 22         var a2=test2;//这个不加括号()
 23         a2("我的第二个函数");
 24     
 25         //函数的返回值,无明确返回值,则返回undefined类型
 26         function test3(name){
 27             alert("hello:"+name);
 28         }
 29         var ret=test3("biexiansheng");//接收返回的值
 30         alert("函数返回的结果"+ret);
 31         
 32         //有返回值类型
 33         function test4(name2){
 34             alert("hello:"+name2);
 35             return "hi"+name2;
 36         }
 37         var ret2=test4("biexiansheng");
 38         alert("存在返回值类型:"+ret2);
 39         //参数问题
 40         function test5(num1,num2){
 41             alert(num1);
 42             alert(num2);
 43         }
 44         test5(15);//传递的实参少于形参,则最后的输出undefined
 45         test5(69,96);
 46         test5(11,22,33);/*传递的实参大于形参,则最后的实参不被输出*/
 47         /*可变的参数:函数的参数列表任意多个,数据类型也是任意的类型*/
 48         /*可变参数,每个函数里面有2个变量 this arguments*/
 49         //add函数是一个参数可变的函数
 50         function add(){
 51             alert("参数的个数"+arguments.length);
 52             for(var i=0;i<arguments.length;i++){
 53                 alert(arguments[i]);    
 54             }
 55         }
 56         //调用函数
 57         add("biexiansheng",18,"男");
 58         //实现任意多个参数的和运算
 59         function add(){
 60             alert("参数的个数"+arguments.length);
 61             var result=0;
 62             for(var i=0;i<arguments.length;i++){
 63                 result+=arguments[i];
 64             }
 65             alert(result);
 66         }
 67         add(1,2,3,4,5);
 68         
 69         /*全局变量和局部变量的学习*/
 70         var name="biexiansheng";
 71         function test(){
 72             var age=22;
 73             //如果在函数内部声明变量不加var,那么这个变量为全局变量
 74             sex="男";//全部变量
 75             alert("函数内部引用全部变量name:"+name);
 76             alert("函数内部引用局部变量age:"+age);
 77             alert("函数内部引用全部变量sex:"+sex);    
 78         }
 79         test();//调用函数
 80         alert("函数外部引用全部变量sex:"+sex);
 81         alert("函数外部引用全部变量name:"+name);
 82         alert("函数外部引用局部变量age:"+age);/*不会执行,则下面的代码也不会执行*/
 83         
 84         /*动态函数创建和使用*/
 85         //常规方式
 86         function sum1(num1,num2){
 87             return num1+num2;
 88         }
 89         //表达式方式
 90         var sum2=function(num1,num2){
 91             return num1+num2;
 92         }
 93     
 94         /*动态函数创建,不常用*/
 95         var sum3=new Function("num1","num2","return num1+num2");    
 96         
 97         //调试
 98         document.write("<pre>");
 99         document.writeln("sum1(1,2)="+sum1(1,2));
100         document.writeln("sum2(11,22)="+sum2(11,22));
101         document.writeln("sum3(16,24)="+sum3(16,24));
102         document.write("<pre>");
103         
104         //匿名函数,在jQuery中使用最多。写插件
105         alert(function(a,b){
106             return "和:"+(a+b);
107         }(3,5));
108     </script>    
109 </body>    
110 </html>

10:javascript全部函数     10.1:parseInt(string,radix):返回转换成整数的值     10.2:parseFloat(string):返回转换成浮点数的值     10.3:isFinite(value):检测某个是否是无穷值     10.4:isNaN(value):检测某个值是否是NaN,检测是否是非数字值,如果值为NaN返回true,否则返回false         var a="111";         alert(isNaN(a));     10.5:encodeURI(uri):将字符串编码为URI         注意:使用decodeURI()方法可以编码URI(通用资源标识符:UniformResourceIdentifier,简称"URI")             对以下在URI中具有特殊含义的ASCII标点符号,encodeURI()函数不会进行转义的:. / ? : @ & = + $ #(可以使用encodeURIComponent()方法分别对特殊含义的ASCII标点符号进行编码)     10.6:decodeURI(uri):解码某个编码的URI     10.7:encodeURIComponent():将字符串编码为uri组件     10.8:dncodeURIComponent():解码一个编码的uri组件     10.9:escape():对字符串进行编码     10.10:unescape():解码由escape()编码的字符串     10.11:eval():将javascript字符串当作脚本来执行         注意:             如果参数是一个表达式,eval()函数将执行表达式,如果参数是javascript语句,eval()将执行javascript语句             eval()函数是一种由函数执行的动态代码,比直接执行脚本慢很多             慎重使用eval()函数,尽量不用,保证程序的安全性         var str="alert('测试')";         eval(str);     10.12:Number(object):把对象的值转换为数字         注意:如果对象的值无法转换为数字,Number()函数返回NaN             如果参数的Date对象,Number()返回从1970年1月1日到现在所经历的毫秒数     10.13:String:把对象的值转换为字符串             String()函数返回与字符串对象的toString()方法值一样         var b=new Number(true);         alert(b);         var c=new String(123);         alert(c+111); 11:事件     11.1:什么是事件?         指的是文档或者浏览器窗口发生的一些特定交互瞬间,我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码     11.2:鼠标事件         onmousedown:鼠标按钮被按下         onmousemove:鼠标被移动         onmouseout:鼠标从某元素移开         onmouseover:鼠标移到某元素之上         onmouseup:鼠标按键被松开     11.3:键盘事件         onkeydown:某个键盘按键被按下         onkeypress:某个键盘按键被按下并松开         onkeyup:某个键盘按键被松开     11.4:表单事件         onblur:元素失去焦点         onchange:域的内容被改变         onclick:当用户点击某个对象的调用的事件句柄         ondblclick:当用户双击某个对象的调用的事件句柄         onerror:在加载文档或图像时发生错误         onfocus:元素获得焦点         onselect:文本被选中         onsubmit:确认按钮被点击         onunload:用户退出页面 12:DOM     12.1:DOM简介:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)         javascript能够改变页面中的所有HTML元素         javascript能够改变页面中的所有HTML属性         javascript能够改变页面中的所有css样式         12.2:查看HTML元素         注意:通过id找到HTML元素--document.getElementById("info");               通过标签名找到HTML元素--document.getElementsByTagName               通过标签的name属性获取元素--document.getElementsByName     12.3:改变HTML输出流document.write     12.4:修改HTML内容:使用innerHTML属性

13:Javascript数组的学习和应用

  13.1:数组的创建

    1:document.write("1:创建一个空数组"+"<br/>");       var arr1=new Array();     2:document.write("2:指定数组的长度"+"<br/>");       var arr2=new Array(5);     3:document.write("3:创建数组并初始化参数"+"<br/>");       var arr3=new Array(9528,"小别","男");     4:document.write("4:创建一个数组"+"<br/>");       var arr4=[];     5:document.write("5:使用括号[],并且传入初始值"+"<br/>");       var arr5=[12,23,45,6,8];

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

Swift基础语法

本文来自Swift中文开发组,感谢翻译者的分享。 本文将分几部分对Swift对iOS的语法做讲解。本文为第一节,主要讲解基础语法。 常量和变量 常量和变量把一个...

1736
来自专栏老马寒门IT

06-老马jQuery教程-jQuery高级

jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。也就是说:jQuery.fn === jQuer...

1940
来自专栏IMWeb前端团队

Zepto中数据缓存原理与实现

本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 以前我们使用Zepto进行开发的时候,会把一些自定义的数据存到dom...

16510
来自专栏你不就像风一样

详解JSOUP的Select选择器语法

可以使用Element.select(String selector) 和 Elements.select(String selector) 方法实现:

602
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb03-轻松理解JS(Java真正的全栈开发)

? 一.js常用对象 ljs中的常见对象有以下几个: Boolean Number String Array 数组 Date 日期 Math 数学 RegEx...

26412
来自专栏HTML5学堂

伪数组

HTML5学堂:熟悉JavaScript的人对document.getElementsByTagName再熟悉不过,对arguments也多有耳闻,我们时常针对...

2664
来自专栏静晴轩

JavaScript 之 this 详解

JavaScript作为一种脚本语言身份的存在,因此被很多人认为是简单易学的。然而情况恰恰相反,JavaScript支持函数式编程、闭包、基于原型的继承等高级功...

3155
来自专栏全沾开发(huā)

一个有味道的函数

一个有味道的函数 最近想到了一个自认为很有意思的面试题 如何实现一个compose函数。 函数接收数个参数,参数均为Function...

34212
来自专栏java沉淀

jQuery通过id选择器绑定双击事件,和appendTo()方法的使用详解

992
来自专栏hbbliyong

12个非常有用的JavaScript技巧

在这篇文章中,我将分享12个非常有用的JavaScript技巧。这些技巧可以帮助你减少并优化代码。  1) 使用!!将变量转换成布尔类型 有时,我们需要检查...

2627

扫码关注云+社区