JavaScript基础(一)

我是一个初学者，但求能学到些许知识！以下是根据韩顺平老师的《轻松搞定网页设计html+css+javascript—javascrip部分》整理而成。

为什么要学习javascript?

javascript是实现网页动态效果的基石，在web开发中扮演重要的角色，被广泛的应用到各个领域：

网页游戏
地图搜索(google，baidu)
股市信息查询
web聊天

在web开发中，js是必不可少的技术!同时js也是ajax/jquery/extjs等框架的基础。

javascript介绍--基本介绍

javascript是一种广泛用于客户端web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

什么是脚本语言?

脚本语言介于HTML和C，C++，Java，C#等编程语言之间
脚本语言与编程语言有相似地方，其函数与编程语言类似，也有变量。与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些。
脚本语言是一种解释性语言(即在执行的时候，直接对源码进行执行)，例如Python、vbscript，javascript等等，它不象C/C++等可以编译成二进制代码。(解释性语言/编译性语言之间的区别，这是一个疑问?)
脚本语言一般都有相应的脚本引擎来解释执行，javascript的脚本引擎就是浏览器。
js脚本语言往往不能独立使用，它和html/jsp/php/asp/asp.net配合使用才有意义

javascript最主要的设计目的就是让网页中的元素可以被编程也就是让网页动起来，甚至你可以编写js版本的坦克大战游戏。javascript不能独立运行，它须嵌入到其它编程语言中才能运行(html/asp/asp.net/jsp/php...)；javascript只能用于b(brower浏览器)/s(server服务器)开发，即我们常说的web开发(比如网站开发，web应用等)；javascript主要针对客户端编程，也就是说js一般运行在客户端；javascript也可以对服务器端编程(比较少)；javascript最新版本是1.8(彼时是，但现在不知道是多少了)；javascript在客户端(浏览器)执行。

javascript介绍--发展历史

javascript最早是叫livescript，是一种基于对象和事件驱动，并且具备安全性的脚本语言，是由netscapce(网景)公司1996开发的，后和sun公司合作，将livescript更名为javascript。

因为浏览器的差异，我们会看到，在不同的浏览器中使用js编程，会有差异，比如，在给某个控件绑定响应函数时，w3c dom标准是addEventListener()，而ie是使用attachEvent()，还有就是有些方法在ie中可以使用，而在ff中却不能使用，这些都是我们在实际开发中要注意的问题。（因为js是由浏览器来解释执行的，因此这里有一个问题，不同类型的浏览器可能对js的支持不一样。）

js语言的特点

javascript语言是简单的；

javascript是基于对象和事件驱动(动态的)；

它可以直接对用户或客户输入做出响应，无需经过web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标，移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

javascript是跨平台的。

javascript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可以正确执行。

js是脚本编程语言；

js是解释执行的。

js可以对客户端编程，也可以对服务器编程(较少)。

javascript和jscript比较

jscript是微软开发的，而javascript则是网景和sun合作开发的
在网景开发livescript(javascript前身)时，微软就意识到这个脚本语言会很火，于是找到网景表示希望合作开发livescript，但是网景公司最终选择和微软的对头sun公司合作开发livescript，并更名为javascript。
微软一气之下，开发了针对ie的脚本语言，并命名为jscript，在当时的这二种脚本语言中语法是大相径庭，给当时的程序员带来很大的麻烦，后来w3c出面了，w3c统一了标准(ECMAScript)所以现在的这二种脚本语言的语法可以说90%以上都是相同的。
在一定程度上，你可以认为jscript和javascript是一样的。
在网上搜索javascript帮助手册，完后打开一看是jscript帮助手册，就不足为怪了。

JS的第一个实例，Hello World

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- JS的代码一般是放在head标签之间的，但实际上也可以在别的位置 -->

    <script type="text/javascript">

        window.alert("Hello1 World!!!");

    </script>

</head>

<body></body>

</html>

注意：

js位置可以随意。
js必需用<script type="text/javascript">js代码</script>，如果没有使用script包起来，则浏览器会将其视为普通文本。
在一个html文件中(jsp/php/asp等)可以出现多对<script>片段。浏览器会按先后顺序依次执行。(在此不举例说明了)

JS运行原理图：

初步了解js的变量定义和使用

看下例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <!-- JS的代码一般是放在head标签之间的，但实际上也可以在别的位置 -->

    <script type="text/javascript">

        //js中变量的定义(在js中变量用var表示，不管实际类型)

        num1 = 456;

        num2 = 89;

        //Num2 = 900

        result = num1 + num2;

        window.alert("结果是="+result);//alert函数

    </script>

</body>

</html>

注意：js中变量的定义(在js中变量用var表示，不管实际类型)。

js为什么需要变量

不论是使用哪种语言编写程序，变量都是其程序的基本组成单位。js是弱数据类型的语言，在定义变量时，不需要指明该变量的类型(由js引擎来决定)。例如：

var name="shunping";//name是字符串

var kk=2;//kk是数

var yy;//yy是undefined

如果name=234;那么这时name自动变成数。

不声明变量亦可直接使用：

x=345;//亦可

js的变量的类型究竟怎样决定?

js是弱数据类型(针对强数据类型而言)语言；即在定义变量的时候，统一使用var表示即可，甚至不写也可以。
js中的变量数据类型是由js引擎决定的。

js基本语法

javascript中的标识符。

标识符是指javascript中定义的符号，例如：变量名，函数名，数组名等。标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号($)组成，但标识符不能以数字开头，不能是javascript中的关键字/保留字。

合法的标识符举例：indentifier、username、user_name、_userName、$username。

非法的标识符举例：int、98.3、Hello World。

javascript严格区分大小写computer和Computer是两个完全不同的符号。

javascript程序代码的格式：每条功能执行语句的最后必需用分号(;)结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开。语句块使用{}来表示。

javascript程序的注释：/* ... */(多行注释)中可以嵌套"//"(单行注释)注释，但不能嵌套"/*...*/"。

javascript基本数据类型--三大类型

通过typeof可以看到变量的具体数据类型是什么。如下例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        var v1 = "abc";

        var v2 = 890;

        window.alert("v1是"+typeof v1);

        window.alert("v2是"+typeof v2);

        v1 = 567;//js是动态语言

        window.alert("v1是"+typeof v1);</script>

</head>

<body>

</body>

</html>

number(数值类型)：

整形常量(10进制\8进制\16进制)。十六进制以0x或0X开头，例如：0x8a；八进制必需以0开，例如：0123；十进制的第一位不能是0(数字0除外)，否则当作8进制数对待，例如：123。
实型常量。12.32、193.98、5E7、4e5等。

特殊数值：NaN(not a number)、Infinity(无穷大)、isNaN()、isFinite()。

var a = "abc";

window.alert(parseInt(a));//返回NaN不是一个数字类型

window.alert(6/0);//返回Infinity(无穷大)

所以编程时，一定要尽量避免。

isNaN()：不是数返回true，是数返回false

window.alert(isNaN("123"));//注意是字符串"123"也返回false

window.alert(isNaN("abc"));//返回true

window.alert(isNaN(123));//返回false

boolean(布尔值)--true和false

js中数字0在布尔值中表示false，非0的数字都为true。

String字符串(单引号/双引号皆可)----"a book of JavaScript"、'abc'、"a"、""

字符串中的特殊字符，需要以反斜杠(\)后跟一个普通字符来表示，例如：\r、\n、\t、\b、\'、\"、\\xxx。

js基本语法--复合数据类型

复合数据类型：数组、对象。

js基本语法--特殊数据类型

javascript特殊数据类型：null、undefine。

var a = null;

window.alert(a);//null空值

window.alert(a);//Uncaught ReferenceError(捕获的引用错误): a is not defined(未定义)

var a;

window.alert(a);//没有给a赋值，就会返回一个undefined

js基本语法--定义变量、初始化、赋值

1、定义变量。

什么是定义变量?

var a;这就是定义一个变量，变量名是a。

2、初始化变量

在定义变量的时候，就给值。

var a=45;这就是初始化变量a。

3、给变量赋值

比如你先定义了变量：var tt;

然后，再给值tt=780;-->这就是给变量赋值。

js基本语法--数据类型转换

1、自动转换，例：

var a=1.2;

a=45;

a="李阿昀";

window.alert(a);//输出的结果是李阿昀

2、强制转换，例：如何字符串转成数字?

var a=parseInt("123");

var b=parseFloat("12.3");

...//其它后面介绍

如何将数字转成字符串呢?(类似Java)

var b = 90;//b是number

b = b + "";//b是string

注意：parseInt()，parseFloat()是系统函数(全局函数)，可以直接使用。

js基本语法--运算符

算术运算符

这个听其名而知其意，就是用于计算的，javascript常用的是：+加、-减、*乘、/除、%取模。其实%运算可以得到两个数相除的余数(主要用于整数)。如下例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        var a = 90;

        var b = 8;

        window.alert(a%b);

        if(a%b == 0) {

         window.alert("能整除");

        } else {

         window.alert("不能整除");

        }

    </script>

</head>

<body>

</body>

</html>

++自加、--自减。这两个运算符比较特殊。如下例：

var a=56;

var b=++a;//b=++a<==>[a=a+1; b=a;] b=a++<==>[b=a;a=a+1;]

window.alert(b);

window.alert(a);

+=左加、-=左减、/=左除、%=左取模。如下例：

var a=56;

var b=90;

a-=34;//a=22

b%=a;//b=b%a;

window.alert(b); //

window.alert(a); //

关系运算符

==等于、>大于、<小于、>=大于等于、<=小于等于、!=不等于。

如下例：

var a = 9;

var b = '9';//先用parseInt()函数将字符串'9'转成数字9，然后进行判断，并不会转换为ASCII码值！

if(a == b) {

     window.alert("ok!");

} else {

     window.alert("no");

}

先介绍window.prompt和document.writeln()。

prompt()函数：如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本(即字符串)。

write()方法可向文档写入HTML表达式或JavaScript代码。

writeln()方法等同于write()方法，不同的是在每个表达式之后写一个换行符。举例说明：

var val = window.prompt("请输入值：");//如果用户单击确认按钮，则返回输入字段当前显示的文本。(即字符串)

var val2 = window.prompt("请再输入值：");

document.writeln("你的输入是："+(parseFloat(val)+parseFloat(val2)));

接着看下例：

var num1 = window.prompt("请输入第一个数：");

var num2 = window.prompt("请输入第二个数：");

num1 = parseFloat(num1);

num2 = parseFloat(num2);

if(num1 > num2) {

    window.alert("num1 > num2");

} else if(num1 < num2) {

    window.alert("num1 < num2");

} else {

    window.alert("num1 = num2");

}

逻辑运算符

用于判断逻辑关系的运算符。&&与、||或、!非。

注意：在逻辑运算中，0、""、false、null、undefined、NaN均表示false，其他均为真！

&&(短路与)：

if(逻辑表达式1 && 逻辑表达式2) { }

如果逻辑表达式1为true，则js引擎继续执行逻辑表达式2；如果逻辑表达式1为false，则不会执行逻辑表达式2。

||或

if(逻辑表达式1 || 逻辑表达式2 || ...) { }

只要有一个逻辑表达式为true，整个表达式都为true。

在js中||究竟返回什么值?

结论：||将返回第一个不为false那个值(对象亦可)，或者是返回最后一个值(如果全部都是false的话) ，此返回值多数情况下是布尔值，但也可能返回的是一个对象。

例，

var a = 0;

var b = "";

var d = false;

var c = a || b || d;

window.alert(c);//返回false

window.alert(c+"类型"+typeof c);

也可返回一个对象，如下：

var a = 0;

var b = "";

var d = false;

var obj = new Object();

var c = a || d || b || obj;//返回一个[object Object](对象)

window.alert(c);

window.alert(c+"类型"+typeof c);

!非

if(!逻辑表达式) { }

如果逻辑表达式为true则取false；如果逻辑表达式为false则取true。

位运算和移位运算，其规范和java一致。如下例：

var a = -4 >> 2;

//-4 原码 10000000 00000100(取反) ---> 反码 11111111 11111011(+1) ---> 补码 11111111 11111100(计算机中存储的-4) 
//补码 11111111 11111100(右移2位) ---> 1111111111 111111(计算机中存储的-1)

//1111111111 111111(-1) ---> 反码 11111111 11111110(取反) ---> 10000000 00000001(-1)

window.alert(a);//返回-1

js基本语法--三大流程控制

1、顺序控制

2、分支控制

让程序有选择的执行，分支控制有三种：①单分支②双分支③多分支。

单分支语法：if(条件表达式){执行语句;}

双分支语法：if(条件表达式){执行语句;}else{执行语句;}

多分支语法：if(条件表达式1){语句;}else if(条件表达式2){语句;}else{语句;}

举例：如果男，男厕所，女，女厕所，否则不上。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        var sex=window.prompt("请输入性别：");

        if(sex=="男") {//字符串比较也用”==”

            window.alert("上男厕所");

        } else if(sex=="女") {

            window.alert("上女厕所");

        } else if(sex == "女") {

            window.alert("woman ok");

        } else {

            window.alert("不准上厕所");

        }

    </script>

</head>

<body>

</body>

</html>

注意：

字符串比较也用”==”。
强调：一旦找到一个满足条件的入口，执行完毕后，就直接结束整个多分支。

多分支：

switch(条件表达式) {

    case 常量1: 语句; break;

    case 常量2: 语句; break;

    ...

    default: 语句; break;

}

表达式可以是js支持的所有数据类型，如下例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        var obj = new Object();

        var a = new Object();

        switch(a) {

            case "890":

                window.alert("890");

                break;//break 跳出整个switch

            case :

                window.alert("90");

                break;

            case null:

                window.alert("null");

                break;

            case a://匹配自己(一个变量)

                window.alert("a");

                break;

            default:

                window.alert("没有匹配的值");

                break;

        }

        window.alert("end...");

    </script>

</head>

<body>

</body>

</html>

结论：

js的switch语句数据类型可以是js支持的任何类型(数组和对象除外)
case后面的数据类型可以是任何类型(数组和对象除外)
break跳出整个switch
如果没有匹配则执行default

小测试：

1、下例代码依次输出什么?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        var flag = 1;

        switch(flag) {

            default:

                window.alert("默认");

            case 'a':

                window.alert("今天星期一");

            case 'b':

                window.alert("今天星期二");

        }

    </script>

</head>

<body>

</body>

</html>

答：依次弹出"默认"、"今天星期一"、"今天星期二"对话框。

2、下例代码依次输出什么?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        var flag = 1.1;

        switch(flag) {

            default:

                window.alert("默认");

            case 'a':

                window.alert("今天星期一");

            case 'b':

                window.alert("今天星期二");

            case 1.1:

                window.alert("1.1");

        }

    </script>

</head>

<body>

</body>

</html>

答：只弹出"1.1"的对话框。

3、循环控制

循环控制有三种，同Java，在此不赘述。

练习：

1、请编写一个程序，可以接收一个整数n，1、计算1+2+...n的值。

核心代码：

var n = window.prompt("请输入一个整数：");

n = parseInt(n);

var result = 0;

for(var i = 1; i <= n; i++) {

    result+=i;

}

document.writeln("结果是："+result);

2、请编写一个程序，可以接收一个整数n，计算1!+2!+...+n!的值。

核心代码：

var res = 0;

var temp = 1;

for(var i = 1; i <= n; i++) {

    for(var j = 1; j <= i; j++) {

        temp *= j;

    }

    res += temp;

    temp = 1;

}

document.writeln("结果是："+res);

在ie中进行js调试

在ie8中通过开发人员工具，就可以进行js的调试工作。

请注意：首先要在IE-工具-internet选项-高级中取消“禁止脚本调试”。

F11：一句一句的执行，如果遇到函数，则跳入函数中，再一句一句执行；
F10：按过程(函数)执行，当遇到一个函数时，f10就把整个函数当作一个语句执行，而不跳入函数执行。
Shift+f11：从一个函数跳出。
局部变量：可以看到变量的变化情况。
断点：可以看断点情况。

使用firebug可以在firefox中调试js(???)

js代码发生错误，如何定位其错误？

可以通过程序员的经验来判断
window.alert()来输出信息
使用firebug的调试用具

JavaScript基础(一)的更多相关文章

JavaScript基础
JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...
一步步学习javascript基础篇（0）:开篇索引
索引: 一步步学习javascript基础篇(1):基本概念一步步学习javascript基础篇(2):作用域和作用域链一步步学习javascript基础篇(3):Object.Function等 ...
前端之JavaScript基础
前端之JavaScript基础本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
一步步学习javascript基础篇（3）：Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
Javascript基础回顾之(三) 面向对象
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
Javascript基础回顾之(二) 作用域
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
Javascript基础回顾之(一) 类型
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
JavaScript 基础回顾——对象
JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象在JavaScript中 ...
javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
javascript基础02
javascript基础02 1.数据类型数据类型的描述在上篇的扩展中有写到链接由于ECMAScript数据类型具有动态性,因此的确没有再定义其他数据类型的必要.这句话很重要. 如果以后再数据类型 ...

随机推荐

从零开始学ios开发（四）：IOS控件（1），Image View、Text Field、Keyboard
长话短说,谢谢大家的关注,这篇写了好长时间,下面继续学习ios.我将用2到3篇的篇幅来学习iphone上的一些常用控件,包括Image View.Text Field.Keyboard.Slider等 ...
Orchard工作原理
概述本文翻译仅供学习之用,了解Orchard工作原理设计思想.技术点及关键词,如有缺漏请不吝指正.鉴于能力有限定有诸多曲解或不完整的地方,请海涵.不定时完善整理. CMS不像常规的web程序,它更像 ...
设置VS2010中自带的ActiveX控件测试容器TstCon
ActiveX控件:可以看做一个极小的服务器应用程序,他不能单独运行,需要嵌入到某个程序中才可以运行,我们可以自己写一个程序来测试自己写的程序(具体方法在下一篇文章阐述),第二种方法是利用VS(本人编 ...
[转]反向代理过程与Nginx特点详解
原文链接:<Nginx搭建反向代理服务器过程详解> 1.1 反向代理初印象反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内 ...
elasticsearch-查询的基本语法
elasticsearch的查询有两部分组成:query and filter. 两者的主要区别在于:filter是不计算相关性的,同时可以cache.因此,filter速度要快于query. 先记录 ...
jQuery 效果 - slideDown() 方法[菜单导航栏常用]
实例以滑动方式显示隐藏的 <p> 元素: $(".btn2").click(function(){ $("p").slideDown(); }); ...
The code of method _jspService(HttpServletRequest, HttpServletResponse) is exceeding the 65535 bytes limit
如果你是通过搜索来到本文的,相信你应该是遇到了如下的错误 The code of method _jspService(HttpServletRequest, HttpServletResponse) ...
学习Linux第四天
---恢复内容开始--- 1.常用的命令: reset 清屏 leave +hhmm 建立离开提醒 sudo apt-get yum 安装yum程序 sudo su 切换root身份 see test ...
[转载]Extjs中的dom,Ext.Element和Ext.Component对象的关系
原文地址:http://www.cnblogs.com/lwzz/archive/2011/01/30/1948106.html Ext.Element对象是对dom对象的封装,目的是为了跨平台以 ...
Hibernate联合主键映射
1.联合主键的映射规则 1) 类中的每个主键属性都对应到数据表中的每个主键列. Hibernate要求具有联合主键的实体类实现Serializable接口,并且重写hashCode与equals方法, ...

JavaScript基础(一)

JavaScript基础(一)的更多相关文章

随机推荐

热门专题