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中。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
(2)Js初体验:
<script type="text/javascript">
document.write("这是我的第一个JS程序!内心有点儿鸡动。");
</script>
- 1
- 2
- 3
- 4
- 5
(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");
注意:程序中的括号和点都是英文状态下。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
(4)JS注释:
注释可用于提高代码的可读性。Javascript不会执行注释,用户也不会看到注释,注释只是方便开发者更好的理解JS代码。
单行注释:以//开头。
多行注释:以/*开头,以*/结尾。
- 1
- 2
- 3
(5)JS变量
变量的概念:变量是存储信息的容器。
变量是变化的一个量
变量可以看成一个“未知数”。x=10
变量可以看成是一个“符号”、“代号”。
变量一般是指程序的数据。
在内存中开辟一块指定字节的空间,用于存储数据,随着程序的运行,数据发生变化,所以称为变量。
比如开房的时候变量可以看成是宾馆的“房间号”,房间里可以放东西。
例如:
现实中,描述一个人。
姓名:张三
性别:男
年龄:23
学历:本科
在计算机程序中,描述一个人。因为计算机不识别汉字,只能用符号来表示。
name = "张三";
sex = "男";
age = 23;
edu = "本科";
变量是有数据类型的,比如带引号是字符型的,数字是数值型的。
变量是在计算机内存中存在和运行的。变量是临时存在的数据。
我们可以把计算机内存看成一个一个“小格子”。每个“小格子”里存储一个变量的名称和变量的值。
变量是临时存在的容器。比如咱们的计算机内存是永远够用的,不要的程序就自动关闭或清除掉了。
变量的声明
变量的声明就相当于预定宾馆的“房间”。变量在使用者要提前声明,让计算机提前给你开辟个小空间。
语法格式:var 变量名 = 变量值;
声明变量是使用系统关键字var来进行的。是系统规定好的,不能挪用他用。
举例:
var name;声明变量
var name,sex,dedu;同时声明多个变量,多个变量用英文下的逗号隔开。
var name = “张三”;一边声明一边赋值。
每条语句结束后用分号隔开。可以省略,避免混淆其他代码,建议写上,养成良好的编码习惯。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
(6)变量的命名规则
变量名可以包含字母、数字、下划线。
变量名不能以数字开头,可以以字母或下划线开头。如:var _name;(正确) var 3abc;(语法错误)
变量名不能是系统关键字,如:var、switch、try、case、else、while等。
JS中的变量名是区分大小写的。如:name和Name是两个变量。
JS中变量的名称一定要有意义,也就是常说的语义化。
如果变量名由多个单词构成的话,该如何表示呢?
1、“驼峰式命名”:第一单词全是小写,后面的每个单词首字母大写。如:getUserName(获取用户名);
2、“下划线式命名”:所有单词全小写,中间用下划线连接。如:var get_user_name;
3、匈牙利命名法(Hungarian):在变量名最前面添加相应小写字母来标识变量的类型,后面的单词首字母大写。
![这里写图片描述](https://img-blog.csdn.net/20161129103427743)
![这里写图片描述](https://img-blog.csdn.net/20161129103600089)
给变量赋值
给变量赋值,就是往“空间”中装东西。
使用 赋值号 “=” 来给变量赋值。
语法:var 变量名 = 变量值;
列举:var name="张三";
"="的理解:将"="右边的"运算结果"赋给左边的变量名。
应该是"="右边先运算,再把运算的结果,赋值给左边的变量。
"="左边只能是一个变量名,而不能是"运算表达式"。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
(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);//undefined
alert(typeof a);//undefined
undefined有两种情况,一种是你真的未定义。如: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
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
知识扩展:单引号和双引号之间可以相互嵌套。
1、单引号内只能嵌套双引号。
2、双引号内只能嵌套单引号。
3、如果想在双引号内,再嵌套双引号,里面的双引号,一定要进行转义(\")。
4、JS中的转义字符是反斜杠(\).常用的转义字符有:\'、\"、\\、\r、\n等。
转义字符也就是,当浏览器遇到反斜杠(\)时,将会对其后的一个字符进行特殊对待,当成一个一个普通字符来对待。所谓“普通”字符就是a、b、c、&等。
- 1
- 2
- 3
- 4
- 5
(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;
//先赋值后再加1
var 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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
(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);
//将宽乘以2
width=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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
练习:
1:为抵抗洪水,战士连续作战89小时,编程计算共多少天零多少小时?
var salary = 10;
var finalSalary = 10 + 10*0.05*50;
alert(finalSalary);
- 1
- 2
- 3
2、为抵抗洪水,战士连续作战89小时,编程计算共多少天零多少小时?
//一天24小时
var allHours = 89;
var days = parseInt(89/24);
var hours = 89%24;
alert("现在战士工作"+days+"天"+hours+"小时");
- 1
- 2
- 3
- 4
- 5
3、小明要到美国旅游,可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度(80度)转换为摄氏度,并以华氏度和摄氏度为单位分别显示该温度。
提示:摄氏度与华氏度的转换公式为:摄氏度 = 5/9.0*(华氏度-32) .
//Fahrenhei华氏度
var Fahrenhei = 80;
var ssd = parseInt(5/9*(Fahrenhei-32));
alert("摄氏度是"+ssd);