首页 > 技术文章 > 初识 javascript

darcrand-blog 2016-08-07 19:22 原文

  第一次接触javascript是在网上看教程时,看到有关DOM操作的内容而认识的。刚开始一直误以为javascript是java的一个子集。因为也没有对javascript有很深的理解,所有就没有去深究javascript和java之间的关系。直到最近才发现,我的这个观点是完全错误的。javascript和java是完全不同的两门语言。

 

  以下内容均源自网络:

 1 首先,这两个家伙没有任何的血缘关系,java是是由Sun 公司于1995年5月推出的,
 2 而javascript是于1995年由Netscape公司设计实现而成的,
 3 由于Netscape公司与Sun公司合作,Netscape高层希望它看上去能够像Java,
 4 因此取名为JavaScript。
 5 
 6 其次,这两个家伙的本质也不一样,
 7 java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,
 8 即使是开发简单的程序,也必须设计对象;
 9 而JavaScript是一种直译式脚本语言,
10 它本身提供了非常丰富的内部对象供设计人员使用。

 

   

  它们的共同点和不同点:

 1 相同点: 
 2 它们的语法和 C 语言都很相似;
 3 它们都是面向对象的(虽然实现的方式略有不同);
 4 JavaScript 在设计时参照了 Java 的命名规则;
 5 
 6 不同点: 
 7 JavaScript 是动态类型语言,而 Java 是静态类型语言;
 8 JavaScript 是弱类型的,Java 属于强类型;
 9 JavaScript 的面向对象是基于原型的(prototype-based)实现的,
10 Java 是基于类(class-based)的;
11 JavaScript 除了长得和 Java 比较像之外,语言风格相去甚远。
12 JavaScript 在设计时所参考的对象不包括 Java,
13 而包括了像 Self 和 Scheme 这样的语言。 
14 
15 作者:薛天禄
16 链接:http://www.zhihu.com/question/19913979/answer/13336117
17 来源:知乎
18 著作权归作者所有,转载请联系作者获得授权。

 

 

  经过一番探究之后,才对javascript有了一定的认识。也希望其他刚刚接触javascript的人不要犯跟我一样的错误。

 

 

 

 

1.javascript引入方法

  内联方式:在html文档中的head便签内使用<script>便签引用。

1 <head>
2     <script type=“text/javascript”>
3         //javascript 代码
4         alert(‘hello world’);
5     </script>
6 </head>

 

  外部引用:用js文件保存js代码,通过<script>导入。

1 <head>
2     <script type=“text/javascript” src=“test.js”></script>
3 </head>

 

2.javascript 变量

  变量相当于一个存储数据的一个容器。关键字:var (variable)。

1 var age = 25;
2 var mood = ‘happy’;

  

  变量名规则:

  1.第一个字符必须是字母、下划线(_)、或美元符号 ($);

  2.变量名中不能包含空格或标点符号(下划线(_) 和$ 除外);

  3.变量名区分大小写;

  4.不能使用保留字、关键字

 

3.数据类型

  

  1.字符串(string)。可以理解为文字集合,字母、数字、符号等。

1 var name = “jack”;
2 var city = "guangzhou";
3 var favourite = "swimming";

 

  2.数值(number)。

1 var age = 25;
2 var price = 33.25;

  

  3.布尔值(Boolean)。是和非的逻辑值。只有 true 和 false 两个取值。

1 var married = true;
2 var married = false;

 

  4.对象。Javascript是一种面向对象的语言。以下使用日期对象进行举例。

1 var today = new Date();
2 var year = today.getFullYear();
3 var month = today.getMonth() + 1;
4 var day = today.getDay();

  

  5.数组。对于同种类型的变量,我们可以使用一个数组来归纳他们。

1 var arr = new Array(23,23,45,56,435);
2 var arr2 = [23,34,546];
3 var arr3 = new Array();
4 arr3[0] = 234;
5 arr3[1] = 234;

  

  6.JavaScript的特殊数据类型。null 和 undefined。

  null表示一个值为空(表现为一串0)的变量。其默认的类型为object。

  undefined则表示一个未定义数据类型的变量,且里面的值为空。

1 typeof undefined             // undefined
2 typeof null                  // object
3 null === undefined           // false
4 null == undefined            // true

 

4.查看数据的类型。方法:typeof()。

1 var mood = "happy";
2 alert(typeof mood);
3 alert(typeof 95);

 

5.把非字符型数据转换为字符串。方法:toSting(),公共方法:String()。

1 var married = false;
2 alert(married.toString());    // outputs “false”
3 
4 var age = 25;
5 alert(age.toString());     //outputs “25”
6 
7 var num=10;
8 alert(String(num));

 

6.把其他数据类型转换为数值型,方法:parseInt()转换为整型;parseFloat()转换为浮点型。

1 var test = parseInt(“blue”);        //returns NaN
2 var test = parseInt(“1234blue”);      //returns 1234
3 var test = parseInt(“22.5”);        //returns 22
4 
5 var test = parseFloat(“1234blue”);    //returns 1234
6 var test = parseFloat(“22.5”);        //returns 22.5

 

7.数据运算。算术运算:加减乘除模。( + - * / % )。

1 var total = (1 + 4) * 5;
2 var i = 100;
3 var temp = (i – 20) / 2;
4 
5 alert(“10”+ 20)        //return 1020;
6 alert(10 + 20)        //return 30;

 

8.自增和自减。(++、--)

1         var i = 0;
2         console.log(i);     // 0
3         i++;
4         console.log(i);    // 1
5         ++i;
6         console.log(i);    // 1

  

  前增与后增的区别:

1         i = 0;
2         console.log("i++   " + (i++)); // 0
3         i = 0;
4         console.log("++i   " + (++i)); // 1

  前增是先赋值再运算,后增是先赋值后运算。

 

9.运算缩写

 1         /*缩写*/
 2         i = 0;
 3         i += 10;
 4         console.log(i);
 5         i -= 20;
 6         console.log(i);
 7         i *= 2;
 8         console.log(i);
 9         i /= 5;
10         console.log(i);
11         i %= 2;
12         console.log(i);

 

10.比较运算:> ,< , >= ,<= ,== ,!= ,=== ,!== 

 1         /*比较运算*/
 2         var m = 0, string = "";
 3         console.log("m==string  " + (m == string));  // true
 4         console.log("m===string  " + (m === string)); // false
 5         var p1 = 100, p2 = 200;
 6         console.log(p1 > p2);
 7         console.log(p1 < p2);
 8         console.log("p1 != p2   " + (p1 != p2)); // true
 9         var b1 = true, b2 = true;
10         console.log("b1!==b2   " + (b1 !== b2)); // false

 

11.关系运算符:与(&&)或(||)非(!)

 1         /*关系运算*/
 2         var j = 10;
 3         console.log(j > 1 && j < 20);
 4         console.log(j < 0 || j < 20);
 5         console.log(!(j > 1 && j > 10 && j > 20));
 6         var b3 = true, b4 = false;
 7         console.log(b3 || !b4);
 8         var n1 = 0, u = undefined;
 9         console.log("n1 === u   " + (n1 === u)); // false
10         console.log("n1 == u   " + (n1 == u));  // false
11         var nu = null, un = undefined;
12         console.log("null == undefined  " + (nu == un)); // true
13         console.log("null === undefined  " + (nu === un)); // false
14         var str1 = null, str2 = "", str3 = undefined;
15         console.log("null == 空字符串   " + (str1 == str2)); //false
16         console.log("undefined == 空字符串    " + (str2 == str3)); // false

 

12.流程控制: if (判断条件){条件满足时的语句}else{条件不满足时的语句}。其形式类似于:如果就......否则就......

1         /*例子:判断成绩*/
2         var p = 2;
3         if (p >= 80) {
4             alert("good");
5         } else if (p >= 60) {
6             alert("just so so")
7         } else {
8             alert("not good")
9         }

 

13.分支语句:switch(){case :执行语句;break;} 

 1         /*switch*/
 2         var c = 2;
 3         switch (c) {
 4             case (1):
 5                 alert("a");
 6                 break;
 7             case (2):
 8                 alert("b");
 9                 break;
10             case (3):
11                 alert("c");
12                 break;
13             case (4):
14                 alert("d");
15                 break;
16             default:
17                 alert("welcome next time");
18                 break;
19         }

 

 13.while 循环。

 1  /*while 循环*/
 2     var i = 1, char = "", str = "";
 3     while (i <= 1000) {
 4         if (i % 2 == 1) {
 5             char = "<span style='text-decoration:underline;'>" + i + "</span>";
 6         } else {
 7             char = i;
 8         }
 9         str += char + "&emsp;";
10         i++;
11     }
12     document.write(str);

  

  当满足条件时,执行循环体的语句。

 

14.for 循环。

1 /*for 循环*/
2     var num = document.getElementsByClassName("num");
3     var num_l = num.length;
4     for (var j = 0; j < num_l; j++) {
5         num[j].style.backgroundPositionY = (-1) * j * 50 + "px";
6         document.write("<img src='num" + j + ".png'>");
7     }

  

15.break 和 continue 

  break:终止当前整个循环。 continue:跳过本次循环后面没有执行的语句。

  括号内参数:1.初始变量定义,可以多个。只在循环开始时执行一次。2.循环条件判断,计算算术表达式。3.循环步长。

*未完


The end.

by Little


推荐阅读