JavaScript基础

来源：互联网发布：网络教育高起专时间编辑：程序博客网时间：2024/04/25 22:16

JavaScript基础

第一章学习概要：

       JavaScript概述
       使用JavaScript和关键字、保留字及变量
       数据类型
       JavaScript运算符
       类型转换

1、Javascript概述

JavaScript诞生于1995年。是由网景公司（Netsape）的布兰登·艾奇开发的，它当时的目的是为了解决表单验证问题。因为在JavaScript问世之前，表单的验证都是通过服务器端验证的。而当时都是电话拨号上网的年代，服务器验证数据是一件非常痛苦的事情。经过许多年的发展JavaScript从一个简单的输入验证成为一门强大的脚本语言。所以，学会使用它是非常简单的，而真正掌握它则需要很漫长的时间。

a、标记语言：标记语言的存在就是用来被读取(浏览)的，而其本身是没有行为能力的，在标记语言里你会看到<和>这些尖括号，这是用来写出“层次”和”属性”的，换句话说，它是被动的。并不具备与访问者互动的能力。

b、编程语言：它是具有逻辑性和行为能力，这是主动的。说通俗一点，它是有思想的。

c、脚本语言：它介于标记语言和编程语言之间，脚本语言不需要编译，可以直接用，由解释器来负责解释。我们接下来学习的JavaScript就是脚本语言。

d、面向过程：以往写程序，C语言、汇编语言，按照过程、按照步骤一步一步来。面向对象：java、C++面向对象是以功能来划分问题，思考问题的方式已经不一样了，是一种进步。面向过程是一件事“该怎么做“，面向对象是一件事“该让谁来做”，然后那个“谁”就是对象，他要怎么做是他自己的事，反正最后一群对象合力能把事做好就行了。对象后面咱们会讲到，今天有个印象就行。

2、JavaScript是什么？

JavaScript是一种轻量级的、基于对象和事件驱动的、跨平台的客户端脚本语言。JavaScript是嵌入到浏览器软件当中去的，只要你的电脑有浏览器就可以执行JS程序代码了。而不像其他语言一样，需要配置语言运行的软件环境，配置起来特别麻烦。所以是轻量级的。

JavaScript是一种基于对象的程序语言。在程序中，对象是由“属性”和“方法”构成。属性指静态的东西，只是值不一样，比如人的身高,身高不可能大家都一样。在现实中，男女朋友就是一个“对象”。“东西”就是一个对象，一个物体就是一个“对象”。“对象”有各种各样的特征（属性），如人的特征：身高、体重、年龄、姓名、学历等。“对象”有很多方法。“人”这个对象，可以干什么？或者人的行为。开飞机、打飞机(微信)、上网等。关于是什么对象？后面我们会专门来讲它，现在你们只要知道有它就行。注意：JS中的对象只要会用就可以了，不需要我们自己去开发对象。系统已经帮我们定义好了。

概念名词解释：

a、事件驱动：简单来说就是在js中的我们对网页操作的一些行为，比如鼠标的点击，移入移出，键盘敲击等。这些行为或动作我们统称为事件，也就是事件来驱动我做这些事情。

b、跨平台：JS程序可以在多个平台下运行，如：windows、Linux、mac、IOS等。

c、客户端脚本程序：JS只能在客户端的浏览器来运行，不能在服务器端运行。

d、浏览器是一个翻译器，可以翻译三种代码：HTML代码、CSS代码，JavaScript代码。

3、JavaScript名称的由来？

JavaScript最初叫“LiveScript”，是网景公司（Netsape）开发的，为自己的浏览器Navigator2.0开发的客户端脚本语言。
想借助java的名气很快成长起来，因此改名为JavaScript。和java没有一点儿关系。

注意：

Java和Javascri是两个公司的两个“东西”。

4、JavaScript能干什么？

       1、表单验证：是JS最基本的功能。
       2、动态HTML：可以实现一些动态的，重复的效果。
       3、交互式：人机交互，通过键盘或者鼠标，与网页中的元素进行交互。

5、JavaScript的组成

       1.核心(ECMAScript)
       2.文档对象模型(DOM：Document Object Model) document
       3.浏览器对象模型(BOM：Browser Object Model) window
       ECMAScript它定义了这门语言的基础，描述了该语言的语法和基本对象。到目前为止已经有6个版本了。
       DOM描述了处理网页内容的方法和接口。
       BOM描述了与浏览器进行交互的方法和接口。

6、使用JavaScript 和关键字、保留字及变量

（1）script标签

<script>标签用于定义客户端脚本。它既可以包含脚本语句，也可以通过src属性指定外部脚本文件。 属性： language：用来指定<script>标签中的脚本类型，即javascript。已废弃，大多数浏览器已经忽略它了，所以不要再使用。 type：它也是用来指定<script>标签中的脚本类型，即text/javascript。它也是type的默认值，所以可以忽略指定。 src：指定外部的脚本文件。如果指定该属性，script标签包含的JS脚本不会执行。 不可以使用单标签，即<script type=“text/javascript”/>。 script标签可以放在页面中的任何位置，但是我们一般放在head和body中。

（2）Js初体验：

<script type="text/javascript">      document.write("这是我的第一个JS程序！内心有点儿鸡动。");</script>

（3）常用的两个客户端输出方法：

1、document.write(str);   描述：在网页的<body>标记中，输出str的内容。   document意思是文档，就是整个网页了。   document是一个文档对象，代表整个网页。2、write()是document对象的一个输出方法。   “.”小数点：通过小数点（.）来调用对象的方法,(.)相当于汉语中的的意思。   str：表示要输出的内容。   引号必须是成对存在的，外面用双引号里面就用单引号来区分，反之亦然。这样写的目的是便于计算机解析识别区分程序。   windows.alert(str);   描述：在当前窗口弹出一个警告对话框，str为对话框中显示的内容。   windows代表当前浏览器窗口，windows是一个窗口对象。3、alert()方法：弹出一个对话框。   str表示要输出的内容。   弹框中的换行，只能使用\n来实现，而不能使用<br/>。补充：   window.prompt();   功能：弹出一个输入框，让用户来输入内容。   语法：var a=window.prompt(text[,defaultText])   参数：Text:提示信息   default：可选项，也就是可有可无。输入框中的默认内容。   例子：window.prompt("请输入一个年份"，"2015");   注意：程序中的括号和点都是英文状态下。

（4）JS注释：

注释可用于提高代码的可读性。Javascript不会执行注释，用户也不会看到注释，注释只是方便开发者更好的理解JS代码。 单行注释：以//开头。 多行注释：以/*开头，以*/结尾。

（5）JS变量

变量的概念：变量是存储信息的容器。 变量是变化的一个量变量可以看成一个“未知数”。x=10变量可以看成是一个“符号”、“代号”。变量一般是指程序的数据。在内存中开辟一块指定字节的空间，用于存储数据，随着程序的运行，数据发生变化，所以称为变量。比如开房的时候变量可以看成是宾馆的“房间号”，房间里可以放东西。例如：现实中，描述一个人。姓名：张三性别：男年龄：23学历：本科在计算机程序中，描述一个人。因为计算机不识别汉字，只能用符号来表示。name = "张三";sex  = "男";age  = 23;edu  = "本科";变量是有数据类型的，比如带引号是字符型的，数字是数值型的。变量是在计算机内存中存在和运行的。变量是临时存在的数据。我们可以把计算机内存看成一个一个“小格子”。每个“小格子”里存储一个变量的名称和变量的值。变量是临时存在的容器。比如咱们的计算机内存是永远够用的，不要的程序就自动关闭或清除掉了。变量的声明变量的声明就相当于预定宾馆的“房间”。变量在使用者要提前声明，让计算机提前给你开辟个小空间。语法格式：var 变量名 = 变量值；声明变量是使用系统关键字var来进行的。是系统规定好的，不能挪用他用。举例：var name；声明变量var name，sex，dedu；同时声明多个变量，多个变量用英文下的逗号隔开。var name = “张三”；一边声明一边赋值。每条语句结束后用分号隔开。可以省略，避免混淆其他代码，建议写上，养成良好的编码习惯。

（6）变量的命名规则

变量名可以包含字母、数字、下划线。变量名不能以数字开头，可以以字母或下划线开头。如：var _name;（正确） var 3abc;（语法错误）变量名不能是系统关键字，如：var、switch、try、case、else、while等。JS中的变量名是区分大小写的。如：name和Name是两个变量。JS中变量的名称一定要有意义，也就是常说的语义化。如果变量名由多个单词构成的话，该如何表示呢？1、“驼峰式命名”：第一单词全是小写，后面的每个单词首字母大写。如：getUserName（获取用户名）；2、“下划线式命名”：所有单词全小写，中间用下划线连接。如：var get_user_name;3、匈牙利命名法（Hungarian）：在变量名最前面添加相应小写字母来标识变量的类型，后面的单词首字母大写。 ![这里写图片描述](http://img.blog.csdn.net/20161129103427743)![这里写图片描述](http://img.blog.csdn.net/20161129103600089)给变量赋值给变量赋值，就是往“空间”中装东西。使用 赋值号 “=” 来给变量赋值。语法：var 变量名 = 变量值；列举：var name="张三"；"="的理解：将"="右边的"运算结果"赋给左边的变量名。应该是"="右边先运算，再把运算的结果，赋值给左边的变量。"="左边只能是一个变量名，而不能是"运算表达式"。

(7)数据类型：

变量是有数据类型的，这个类型来源于”变量的值”，换句话说：值是什么类型的，变量就是什么类型的。

数据类型分为两大类：
1、基本数据类型：数值型-number、字符型-string、布尔型-Boolean、未定义类型-undefined、空型-null。
基本数据类型很显著的特点：一个变量名只能存一个值。
2、符合数据类型：数组-array、对象-object、函数-function。后面会讲到。
符合数据类型很显著的特点：一个变量名能存多个值。
举例：var arr=[10,20,30,40,50];

我们可以通过typeof来查看变量的类型。

(1)、数值型-number：可以进行算术运算的（加、减、乘、除）。     数值型包括：整型（整数）和浮点型（小数）。     数值型变量：变量的值是数值型的。如：    var a=10；    var a=0；    var a=-10；    var a=0.9；    var a=-0.9；    var b=a*10；    document.write(b);//结果=9；    alert（typeof b）;//number同名变量：下面的变量将替换上面的变量。数值型中还有一个很特殊的值NaN-not a number(不是一个数字)；举例：假设想让一个<div>的宽变成原来的2倍。    var width="300px";    //将width*2    width=width*2；    document.write(width);//返回NaN,不是同一类型，不能直接进行计算。一个字符串是不能转成有意义的数值的，只能转成NaN。一个含有字母的数值字符串，转成数值后变成NaN.一个纯数字的字符串，可以转成有意义的数值，如：“120”-----120；(2)、字符型-string：用单引号或双引号引起来的一个字符串。     注意：字符型变量不能进行算术运算，只能进行"连接"运算。     字符型变量:用单引号或双引号，引起来的一串字符。    如：    var a="xxx公司"；    var b="科技有限公司"；    var c=a+b；//c="千锋教育"+"科技有限公司"="千锋教育科技有限公司";    document.write(c);    alert(typeof c);//string这里的 "+"是连接号，而不是"加法"。(3)、布尔型-Boolean布尔型又称逻辑型。只要两个值：true（真）、false（假）。用于条件判断。布尔型只有两个状态。如：性别、婚否、灯的开关、是否列入黑名单等。var a=true；var b=false；alert(typeof a)//Boolean举例：5>4 如果条件成立，就是true。      5>6 如果条件不成立，就是false。  (4)、未定义型---undefined当一个变量定义，但未赋值时，将返回未定义型，未定义型的值只有一个undefined的。当一个对象的属性不存在，也返回未定义型。（后面内容）//定义变量a，但未赋值，此时的值为undefined。var a；document.write(a);//undefinedalert(typeof a);//undefinedundefined有两种情况，一种是你真的未定义。如：var a=1；alert（b）；//undefined另一种是你定义了变量，但未赋值。(5)、空型--null     当一个对象不存在时，将返回空型，空型的值只有一个值null。     也可以理解为：是一个对象的占位符。是特殊类型，用的很少。     它的返回值是object类型，是一个空对象，没有任何内容。     如果你想清除一个变量的值，可以给赋一个null的值。     var a=100；     var a=null；//将一个null赋给一个变量，用于清除它的值。     alert(typeof a);//object

知识扩展：单引号和双引号之间可以相互嵌套。

1、单引号内只能嵌套双引号。2、双引号内只能嵌套单引号。3、如果想在双引号内，再嵌套双引号，里面的双引号，一定要进行转义（\"）。4、JS中的转义字符是反斜杠(\).常用的转义字符有：\'、\"、\\、\r、\n等。转义字符也就是，当浏览器遇到反斜杠(\)时，将会对其后的一个字符进行特殊对待，当成一个一个普通字符来对待。所谓“普通”字符就是a、b、c、&等。

（8）JavaScript运算符

JS中的运算符：要进行各种各样的运算，就要使用不同的运算符号。运算时只能进行同类型运算，如果类型不同，将进行类型转换。

1、算术运算符：+、—、*、/、%、++、--;   var a=10；   var b=a+10；//b=a+10=10+10=20;注意：如果"+"左右两个操作数，都是数值的话，将执行"加法"运算。   var a="10"；   var b=a+10；//b=a+10="10"+10="10"+"10"="1010";注意：如果"+"左右有一个操作符是字符的话，那么，另一个值将转换成字符串，这两个操作数进行的是"连接"运算。输出的结果是一个大字符串。2、赋值运算符：=、+=赋值运算符，将"="右边的运算结果，赋给左边的变量。  var a=10；  "+="先加后等。声明变量，并且给变量赋值var a=10+20；变量a先加20，再将运算结果，赋给左边的变量。a+=20；//展开后，a=a+20=10+20=30;(1)、"%"取余运算符,两个数相除，取余数。     var a=10%3;//a=1,如果余数不为0，则两个数不能整除     var a=10%5;//a=0,如果余数为0，则两个数能除尽(2)"++"加1运算符，也叫自加1或自增."++"可以作前缀(++i),也可以作后缀(i++).如果不赋值的话，++i和i++结果是一样的。    var a=10;    a++;//a=a+1; a=11;    ++a;//a=a+1; a=11;      如果要赋值的话，++i和i++结果就不一样了。    var a=10;//先赋值后再加1var b=a++;//先将变量a的值赋给变量b，然后再将变量a+1；b=10;a=11;//先加1后再赋值var c=++a;//先将变量a的值加1，然后将变量a赋给变量c。a=12；c=12；//输出变量b和c的结果document.write("b="+b",c="+c);//b=10；c=12；区别：    ++在前，先加1后再赋值。    ++在后，先赋值后再加1。(3) "--"减1运算符，也叫自减1."--"可以作前缀(--i),也可以作后缀(i--).如果不赋值的话，--i和i--结果是一样的。如果要赋值的话，--i和i--结果就不一样了。区别：    --在前，先减1后再赋值。    --在后，先赋值后再减1。2、赋值运算符：=、+=、-=、*=、/=    "+="先加后等。如：a+=10;//展开后 a=a+10;    "-="先减后等。如：a-=10;//展开后a=a-10;    "*="先乘后等。如：a*=10;//展开后a=a*10;    "/="先除后等。如：a/=10;//展开后a=a/10;3、字符串运算符：+、+=字符串只能进行“连接”运算，不能进行其他运算。    var a="abc";    var b=a+"def";//结果：b=a+"def"="abc"+"def"="abcdef";    var a="abc";    a+=10;//结果：a=a+10="abc"+10="abc10";4、比较运算符：>、<、>=、<=、==、!=、===、!==比较运算符的运算结果是布尔值(true或false)，不可能是其他值，常用于条件判断中。    var a=10>20;//结果：false    var a=20>=20;//结果：true    var a=10%2===0;//结果：true    var a=10%3!=0;//结果：true"="是赋值号"=="等于。只比较两个变量的值，而不管类型。只有值一样，就返回true，否则就返回false。    var a=10%2===0;//结果：true    var a=10%2==="0";//结果：true"==="全等于。即比较变量，也判断类型。如果类型和值都一样，就返回true，否则就返回false。    var a=10%2==="0"//结果false

(9)数据类型转换

变量的数据类型转换分为两种

1、隐式转换：JS会根据运算符自动帮我们将数据类型转换成能够进行计算的类型。

2、强制转换：我们强制将数据类型转换成我们想要的类型
变量的数据类型转换，一般情况是JS自动转换的(隐式转换)，但也有些时候需要手动强制转换(强制转换)。

1、其他类型转成布尔型   var a="abc";    //true   var a=123;      //true   var a="";       //false   var a=100;      //true   var a=0;        //false   var a=NaN;      //false   var a=undefined;//false   var a=null;     //false//验证一下我们自己口算的结果//可以使用Boolean()全局函数，强制转成布尔型var a=result=Boolean(a);//输出变量的类型和结果document.write("类型"+typeof(result+",值："+result));2、其他类型转成字符型   var a=true;    //"true"   var a=false;   //"false"   var a=100;      //"100"   var a=0;        //"0"   var a=NaN;      //"NaN"   var a=undefined;//"undefined"   var a=null;     //"null"//验证一下我们自己口算的结果//可以使用String()全局函数，强制转成字符型var a=result=String(a);//输出变量的类型和结果document.write("类型"+typeof(result+",值："+result));3、其他类型转成数值型    var a=true;    //1    var a=false;   //0    var a=undefined;//NaN    var a=null;     //0    var a="120px";  //NaN    var a="100";    //100    var a="";       //0//验证一下我们自己口算的结果//可以使用Unmber()全局函数，强制转成数值型//全局函数或系统函数，是JS内置的函数，名称或大小写必须一致。var a=result=Number(a);//输出变量的类型和结果document.write("类型"+typeof(result+",值："+result));从字符串中提取整数和浮点函数paeseInt()系统函数功能：在一个字符串中，从左往右提取整型。如果遇到非整型的内容，则停止提取，并返回结果。parseInt("120px")=120;parseInt("120.98")=120;注意：如果第一个字符就是非整型，则立即停止，并返回NaN。parseInt("a120px")=NaN;例子：将一个div元素的宽度乘2后，重新赋给div；var width="100";width=width*2;document.write(width);//NaN________________________________________________________var width="100";//提取整型width=parseInt(width);//将宽乘以2width=width*2+"px";document.write(width);200________________________________________________________parseFloat()系统函数功能：在一个字符串中，从左往右提取浮点型。遇到非浮点型，则停止提取，并返回结果。parseFloat("120px")=120;parseFloat("120.98")=120.98;parseFloat(".98")=0.98;//系统会自动补零注意：如果第一个字符串是非浮点型，则立即停止，并返回NaN.parseFloat("a120")=NaN;在计算机中浮点型包括所有的数，也包括整型。

练习：

1：为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？

var salary = 10; var finalSalary = 10 + 10*0.05*50; alert(finalSalary);

2、为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？

//一天24小时 var allHours = 89; var days = parseInt(89/24); var hours = 89%24; alert("现在战士工作"+days+"天"+hours+"小时");

3、小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
提示：摄氏度与华氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32) .

//Fahrenhei华氏度 var Fahrenhei = 80; var ssd = parseInt(5/9*(Fahrenhei-32)); alert("摄氏度是"+ssd);

1 0