JavaScript基础(一)

时间  2019-11-13
标签 javascript 基础 栏目 JavaScript 繁體版
原文   原文链接

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

   为何要学习javascript?php

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

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

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

   javascript介绍--基本介绍java

   javascript是一种普遍用于客户端web开发的脚本语言，经常使用来给HTML网页添加动态功能，好比响应用户的各类操做。jquery

   什么是脚本语言?程序员

  1. 脚本语言介于HTML和C，C++，Java，C#等编程语言之间
  2. 脚本语言与编程语言有类似地方，其函数与编程语言相似，也有变量。与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些。
  3. 脚本语言是一种解释性语言(即在执行的时候，直接对源码进行执行)，例如Python、vbscript，javascript等等，它不象C/C++等能够编译成二进制代码。(解释性语言/编译性语言之间的区别，这是一个疑问?)
  4. 脚本语言通常都有相应的脚本引擎来解释执行，javascript的脚本引擎就是浏览器。
  5. 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在客户端(浏览器)执行。web

   javascript介绍--发展历史ajax

   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比较

  1. jscript是微软开发的，而javascript则是网景和sun合做开发的
  2. 在网景开发livescript(javascript前身)时，微软就意识到这个脚本语言会很火，因而找到网景表示但愿合做开发livescript，可是网景公司最终选择和微软的对头sun公司合做开发livescript，并改名为javascript。
  3. 微软一气之下，开发了针对ie的脚本语言，并命名为jscript，在当时的这二种脚本语言中语法是截然不同，给当时的程序员带来很大的麻烦，后来w3c出面了，w3c统一了标准(ECMAScript)因此如今的这二种脚本语言的语法能够说90%以上都是相同的。
  4. 在必定程度上，你能够认为jscript和javascript是同样的。
  5. 在网上搜索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>

   注意：

  1. js位置能够随意。
  2. js必需用<script type="text/javascript">js代码</script>，若是没有使用script包起来，则浏览器会将其视为普通文本。
  3. 在一个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的变量的类型究竟怎样决定?

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

   

   js基本语法

   javascript中的标识符。

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

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

   非法的标识符举例：int、98.三、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(数值类型)：

  1. 整形常量(10进制\8进制\16进制)。十六进制以0x或0X开头，例如：0x8a；八进制必需以0开，例如：0123；十进制的第一位不能是0(数字0除外)，不然看成8进制数对待，例如：123。
  2. 实型常量。12.3二、193.9八、5E七、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基本语法--定义变量、初始化、赋值

   一、定义变量。

   什么是定义变量?

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

   二、初始化变量

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

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

   三、给变量赋值

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

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

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

   一、自动转换，例：

var a=1.2; 
a=45; 
a="李阿昀";
window.alert(a);//输出的结果是李阿昀

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

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); //2
window.alert(a); //22

   关系运算符

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

   以下例：

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基本语法--三大流程控制

   一、顺序控制

   二、分支控制

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

   单分支语法：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>

   注意：

  1. 字符串比较也用”==”。

  2. 强调：一旦找到一个知足条件的入口，执行完毕后，就直接结束整个多分支。

   多分支：

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 90:
                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>

   结论：

  1. js的switch语句数据类型能够是js支持的任何类型(数组和对象除外)
  2. case后面的数据类型能够是任何类型(数组和对象除外)
  3. break跳出整个switch
  4. 若是没有匹配则执行default  

   小测试：

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

<!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>

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

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

<!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"的对话框。

   三、循环控制

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

   练习：

   一、请编写一个程序，能够接收一个整数n，一、计算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);

   二、请编写一个程序，能够接收一个整数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选项-高级中取消“禁止脚本调试”。

  1. F11：一句一句的执行，若是遇到函数，则跳入函数中，再一句一句执行；
  2. F10：按过程(函数)执行，当遇到一个函数时，f10就把整个函数看成一个语句执行，而不跳入函数执行。
  3. Shift+f11：从一个函数跳出。
  4. 局部变量：能够看到变量的变化状况。
  5. 断点：能够看断点状况。

   使用firebug能够在firefox中调试js(???)

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

  1. 能够经过程序员的经验来判断

  2. window.alert()来输出信息

  3. 使用firebug的调试用具 

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程