B/S学习之路—JavaScript学习笔记—第一天&基本语法

【唠叨两句】       

       不得不承认学习是件枯燥乏味的事情,为了监督自己能坚持走下去并且做到知识的沉淀积累和升华特开通此博客撰写学习笔记,希望自己坚持到底同时也希望大家能多多指点共同交流,如果大家对笔记中出现的错误或者有好的建议请留言或加我QQ:907607658

       首先激励下自己:编程高手=坚持+学习+苦练+交流,下面正式开始自己的学习:

【JavaScript简介】

        通俗来讲JavaScript就是一种脚本语言,它并不编译生成机器代码,只是由浏览器的解释器将其动态地处理成可执行的代码,利用JavaScript可以减少客户端对服务器的访问,同时也可以增加网页的动态显示效果(HTML只能制作出静态的网页,无法独立的完成与客户端动态交互的网页设计)。

        JavaScript也是一种面向对象的编程语言,它所包含的对象由两部分组成,即变量和函数也称为属性和方法。

        JavaScript同样是一种安全性语言,它不允许访问本地硬盘,并且不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而有效的防止数据丢失。

JavaScript学习笔记——第一天】

【JavaScript基本语法——变量】

(1)JavaScript是弱类型的编程语言——所有变量的声明都要用:var

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         var n = 'Hello World!';  
  8.         alert(n);  
  9.     </script>  
  10. </head>  
  11. <body>  
  12.   
  13. </body>  
  14. </html>  

代码执行效果:

B/S学习之路—JavaScript学习笔记—第一天&基本语法_第1张图片

alert()函数:弹出消息对话框(对话框中有一个OK按钮)

(2)变量名只能由字母、下划线开头,且不能使用JavaScript中的关键字

(3)JavaScript声明字符串可以用双引号也可以用单引号,建议用单引号,方便和HTML、C#等的集成,避免使用转义字符

(4)JavaScript变量没有块级作用域的概念,看下面f1函数中变量n的作用域

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         //定义函数f1  
  8.         function f1() {  
  9.             var sum = 10;  
  10.             if (sum > 5) {  
  11.                 var n = 10;  
  12.                 n++;  
  13.             }  
  14.             alert(n);  
  15.         }  
  16.         f1();  //调用函数f1  
  17.     </script>  
  18. </head>  
  19. <body>  
  20.   
  21. </body>  
  22. </html>  
代码执行效果:

B/S学习之路—JavaScript学习笔记—第一天&基本语法_第2张图片

【JavaScript基本语法——六种数据类型】

1、Boolean(布尔)  2、Nummber(数字)  3、String(字符串)  4、Undefined(未定义)  5、Null(空对象)  6、Object(对象类型)

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         var n1 = true;  
  8.         var n2 = 90;  
  9.         var n3 = '好人一生平安!';  
  10.         var n4;  
  11.         var n5 = null;  
  12.         var n6 = new Object();  
  13.         alert('n1:' + typeof(n1) + '  n2:' + typeof(n2) + '  n3:' + typeof(n3) +'  n4:' + typeof(n4) +'  n5:' + String(n5) +'  n6:' + typeof(n6));  
  14.     </script>  
  15. </head>  
  16. <body>  
  17.   
  18. </body>  
  19. </html>  
代码执行效果:
B/S学习之路—JavaScript学习笔记—第一天&基本语法_第3张图片

typeof()函数:查询数据类型

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         var n = new Object();  
  8.         alert(n instanceof Object);  
  9.     </script>  
  10. </head>  
  11. <body>  
  12.   
  13. </body>  
  14. </html>  

代码执行效果:


instanceof()函数:判断数据类型

JavaScript基本语法——函数】

(1)JavaScript中的方法没有访问修饰符,没有返回值类型,参数列表中的参数不需要写类型(var),函数名首字母小写

[html]  view plain copy
  1. function 函数名称(参数表) {  
  2.             函数执行部分;  
  3.         }  

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function ff(sum) {  
  8.             alert(sum);  
  9.         }  
  10.         ff(100);  
  11.         ff('好人一生平安!');  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.   
  16. </body>  
  17. </html>  
代码执行效果:

    
(2)在JavaScript函数参数表中传递任意
参数

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function ff() {  
  8.             var sumNum = 0;  
  9.             for (var i = 0; i < arguments.length; i++) {  
  10.                 sumNum += arguments[i];  
  11.             }  
  12.             return sumNum;  
  13.         }  
  14.         var result = ff(1,2,3,4,5);  
  15.         alert(result);  
  16.     </script>  
  17. </head>  
  18. <body>  
  19.   
  20. </body>  
  21. </html>  
代码执行效果:
B/S学习之路—JavaScript学习笔记—第一天&基本语法_第4张图片
提升小练习:传递两个参数并计算两个数之间的所有数字的和,包括这两个数字

方法一:

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function f1(n1, n2) {  
  8.             var sum = 0;  
  9.             for (var i = n1; i <= n2; i++) {  
  10.                 sum += i;  
  11.             }  
  12.             return sum;  
  13.         }  
  14.         var result = f1(1, 100);  
  15.         alert(result);  
  16.     </script>  
  17. </head>  
  18. <body>  
  19.   
  20. </body>  
  21. </html>  
代码执行效果:

B/S学习之路—JavaScript学习笔记—第一天&基本语法_第5张图片
方法二:

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function f2() {  
  8.             var sum = 0;  
  9.             for (var i = arguments[0]; i <= arguments[1]; i++) {  
  10.                 sum += i;  
  11.             }  
  12.             return sum;  
  13.         }  
  14.         var result = f2(1, 100);  
  15.         alert(result);  
  16.     </script>  
  17. </head>  
  18. <body>  
  19.   
  20. </body>  
  21. </html>  

代码执行效果:

B/S学习之路—JavaScript学习笔记—第一天&基本语法_第6张图片

(3) JavaScript匿名函数

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         var f1 = function () {  
  8.             return '努力学习中……';  
  9.         }  
  10.         var result = f1();  
  11.         alert(result);  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.   
  16. </body>  
  17. </html>  
代码执行效果:


注:一旦将一个匿名方法赋值给了一个变量,则一定要在后面加上分号。

JavaScript基本语法——面向对象】

创建对象和创建函数语法一样,只不过对象名命名时要注意:对象名首字母大写

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function Person(){}  
  8.         var per = new Person();  
  9.         per.name = '张三';  
  10.         per.age = '18';  
  11.         per.gender = '男';  
  12.         per.sayHello = function () {  
  13.             alert('这方法也可以……');  
  14.         };  
  15.         alert(per.name);  
  16.         alert(per.age);  
  17.         alert(per.gender);  
  18.         per.sayHello();  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.   
  23. </body>  
  24. </html>  
代码执行效果:

B/S学习之路—JavaScript学习笔记—第一天&基本语法_第7张图片     B/S学习之路—JavaScript学习笔记—第一天&基本语法_第8张图片

JavaScript基本语法——数组】

[html]  view plain copy
  1. </pre><span style="font-size:18px">代码执行效果:</span><p><span style="font-size:18px"><span style="font-size:18px"><span style="font-size:18px"></span></span></span></p><pre name="code" class="html"><!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         //var shuZu = new Array();  
  8.         //shuZu[0] = 1;  
  9.         //shuZu[1] = '好人';  
  10.         //shuZu[2] = true;  
  11.         //for (var i = 0; i < shuZu.length; i++) {  
  12.         //    alert(shuZu[i]);  
  13.         //}  
  14.   
  15.         var shuZu = [1, 2, 3];  
  16.         for (var i = 0; i < shuZu.length; i++) {  
  17.             alert(shuZu[i]);  
  18.         }  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.   
  23. </body>  
  24. </html>  
   B/S学习之路—JavaScript学习笔记—第一天&基本语法_第9张图片    B/S学习之路—JavaScript学习笔记—第一天&基本语法_第10张图片

JavaScript基本语法——键值对】

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         //var jian = new Array();  
  8.         //jian['hr'] = '好人';  
  9.         //jian['ys'] = '一生';  
  10.         //jian['pa'] = '平安';  
  11.         //for(var key in jian){  
  12.         //    alert(key+'-----'+jian[key]);  
  13.         //}  
  14.         var jian = { "hr": "好人", "ys": "一生", "pa": "平安" };  
  15.         for(var key in jian){  
  16.             alert(key+'----'+jian[key]);  
  17.         }  
  18.     </script>  
  19. </head>  
  20. <body>  
  21.   
  22. </body>  
  23. </html>  
代码执行效果:

B/S学习之路—JavaScript学习笔记—第一天&基本语法_第11张图片  B/S学习之路—JavaScript学习笔记—第一天&基本语法_第12张图片  B/S学习之路—JavaScript学习笔记—第一天&基本语法_第13张图片  

JavaScript基本语法——给字符串String扩展方法】

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         //判断给定字符串是否是邮箱  
  8.         //传统方法:  
  9.         //var msg = '[email protected]';  
  10.         //function isEmail(str) {  
  11.         //    return str.indexOf('@') != -1 ? true : false;  
  12.         //}  
  13.         //alert(isEmail(msg));  
  14.   
  15.         //给字符串扩展个方法进行判断,以后的字符串都可以拥有该方法  
  16.         String.prototype.isEmail = function () {  
  17.             return this.indexOf('@') != -1 ? true : false;  
  18.         }  
  19.         var msg = '[email protected]';  
  20.         alert(msg.isEmail());  
  21.     </script>  
  22. </head>  
  23. <body>  
  24.   
  25. </body>  
  26. </html>  
代码执行效果:

B/S学习之路—JavaScript学习笔记—第一天&基本语法_第14张图片

你可能感兴趣的:(JavaScript,dom)