JavaScript是什么
Javascript是一种小型的、轻量级的、面向对象的、跨平台的客户端的脚本语言。
Javascript是和浏览器捆绑在一起的,只要安装了浏览器软件,就已经有了JavaScript。
浏览器是一种解释器,可以直接解释或翻译HTML、CSS、JavaScript。
JavaScript是客户端脚本程序,运行在客户端;
JavaScript是跨平台(Windows平台、Unix、Linux、 MAC)
JavaScript是面向对象:一个对象由属性和方法构成。属性是指静态的特性。方法是指对象能干什么?电脑能听音乐、打游戏等动作(方法)。
JavaScript能干什么
(1)表单客户端验证;
(2)动态HTML(DHTML):不需要人为介入,就能自动实现动画效果。
(3)用户交互的动画效果:需要鼠标和键入介入的动画效果。
常用的两个客户端输出方法
第一个:document.write( str),
描述:在网页中输出一个字符串(文本),相当于在<body></body>标记中,来写入一段普通文本一样。
参数说明:
document是文档的意思,代表当前文档(网页),它是一个document对象,document对象有很多的属性和方法。
write( )就是document对象的一个方法。
str就是要在<body>中输出的内容,这个内容一般要用双引号或单引号引起来,不能直接写文本;
提示:对象的属性和方法的区别,加括号就是方法,不加括号的就是属性。
举例:document.write(“这里是要输出的内容”)
Document.write(“<font size=7 color=red>这里是要输出的内容</font>”);
第二个:window.alert( str )
window代表浏览器窗口对象,window对象也有很多的属性和方法。
alert( )是Window对象的一个方法,alert()主要作用是“弹出一个警告对话框”
str就是警告对话框中的提示文本信息;
提示:对象和属性或方法间,用“.”符号来连接。
HTML中引入JavaScript程序的方法
(1)内嵌式:通过<script></script>标记,来引入JavaScript程序代码
<script type=“text/javascript”>
document.write(“内容”);
window.alert(“HTML的内容”);
</script>
(2)外链式:通过<script></script>标记的src属性,来引入外部的javascript文件
<script type=“text/javascript” src=“外部的JS文件的URL”></script>
提示:外部javascript文件的扩展名是.js,比如:public.js news.js
(3)行内式
每个HTML标记都有事件属性(如:单击事件onclick),事件就是鼠标的动作(单击、双击、鼠标放上、鼠标移出等)。行内JS,需要使用事件属性来引入JS代码。
<img src="images/01.jpg"οnclick="javascript:window.alert('我刚刚点击了图片')" />
对上图作一个分析:
age、city是变量(符号)的名称,可以牵涉到的知识点:变量的定义、变量的名称、变量的数据类型等;
if是条件判断的语法结构,可能牵涉到的知识点:条件判断、switch、for、while、do while等
window是一个对象,是浏览器模型中的一个对象,还可能有:window对象、document对象、history、screen
变量和变量命名规范
张三的年龄是30岁,毕业于北京理工大学,现在的工资是8000元,学历是大学本科,性别是男。
第一步:自然语言
姓名:张三
性别:男
年龄:30岁
毕业院校:北京理工大学
工资:8000元
学历:本科
第二步:用计算机的语言来表示
name:张三
sex:男
age:30
school:北京理工大学
salary:8000元
edu:本科
第三步:将上述第二步用JS的格式来写
varname = “张三”
varsex=“男”
……
变量就是一个“符号”,可以理解为一个宾馆的“房间号”,比如 302号
变量的名称,相当于宾馆的“房间号302”;变量的值“张三”,相当于302房间住的人;
变量是存储在哪里的?变量是在内存中存储和运行的。内存由N多个“小格子”构成,每个“小格子”里都可以住一个变量,如下图所示:
2、定义一个变量,就相当于在内存中开一个房间。
定义变量,在JS中是用var关键字来定义的。
语法格式:var 变量名 = 变量值
举例:
一次只定义一个变量:var name = “张三”
一次定义多个变量(用逗号分开):var name,age,sex,edu,school;
3、变量的命名规则
n 变量名称只能是a-z、A-Z、0-9、_字符;
n 变量名称必须以字母或下划线开头,不能以数字开头;比如:90a是错误的
n 变量名称是区分大小写的:a90和A90是两个变量
n 多个单词组成的变量名称:
u 驼峰式的命名:getUsernameValue,第一个单词全小写,后在的每个单词第一个字大写
u 下划线式命名:get_username_value,每个单词全小写,中间用下划线连接
4、给变量赋值
给变量赋一个值,使用“=”符号来给一个变量赋值。
语法格式:var name = “张立峰”
“=”是赋值号,将“=”右边的运算表达式(运算结果),赋给左边的变量名称;
“==”是等于号,是用来判断两边的值是否相等的一个运算符(了解);
举例:
vara = 100; //a代表100
varb = 200; //b代表200
varc = a + b; //先运算“=”右边的表达式,再将运算的结果,赋给左边的变量
//赋值号的优先级最低,因此是先计算加法,再赋值
var c + d = a + b; //这种写法是错误的,因为等号左边只能是一个变量名称,要符合命名规范
变量的数据类型
一个变量的类型,由变量的值来决定。
基本数据类型:字符型(String)、数值型(Number)、布尔型(Boolean)、Undefined(未定义型)、Null(空型)
复合数据类型:数组(Array)、对象(Object)、函数(Function)
基本数据类型和复合数据类型的主要区别:基本数据类型的值只有一个,而复合数据类型的值可以多个
1、数值型数据(Number)
数值型数据包含整型和浮点型(小数)。
Vara = 100;
Vara = 0;
Vara = -100;
Vara = 0.987;
Var a = NaN;
数值型数据有一个特殊的值NaN,它的含义是not a number。用在:将其它类型的数据转成数值型时,转不过来时,将返回NaN。
举例:将a = “abc”; 转成数值时,转不过去,就会返回NaN值
2、字符型数据(String)
用单引号或双引号,引起来的一个字符串。
Vara = ‘abc’;
Vara = “中国”; //JS中每行语句写完后,以“;”号结束,分号不是必须的,但建议大家写
Vara = “1200”; //也是字符串
如果在双引号内再套双引号时,内层的双引号,应该使用转义字符 \” 来代表双引号。
如果在单引号内再套单引号时,内层的单引号,应该使用转义字符 \’ 来代表单引号。
转义字符的作用:当浏览器遇到“\”符号时,会将其后的字符进行特殊处理。
var a = "广州传智播客\"PHP\"基础班课程体系";
document.write(a);
3、布尔型(Boolean)
布尔型数据只有两个结果,真或假,是或否;
布尔型数据只有两个值:true或false
VarisMarried = true; //婚否只有两个可能:已婚、未婚
Varsex = true; //性别只有两个结果:男、女
VarisRead = false; //邮箱读取状态:已读、未读
4、undefined(未定义型)
当一个变量定义了,但没有赋值,会返回undefined,它的值只有一个“undefined”
<script type="text/javascript">
var a = "广州传智播客\"PHP\"基础班课程体系";
var b;
var isRead = true;
document.write(typeof(isRead));
</script>
5、null(空型)
当一个对象不存在时,将返回null,null的数据类型的值只有一个null。
window.prompt()弹出一个输入对话框
var str = window.prompt("请输入你的名称");
document.write(typeof(str)+","+str);
判断一个变量的函数:typeof()
语法格式:string typeof(var)
说明:
string代表的是它的值是什么类型的;
var代表测试的变量名称;
返回值有六个:“string”、“number”、“boolean”、“undefined”、“object”、“function”
有哪些数据返回的是“object”:array、object、null
举例:
var a = “abc”;
document.write( typeof(a) ); //返回”string”
变量类型的转换
一、自动数据类型转换
(1)其它类型转成数值
//第一种:其它类型自动转成数值
var a ="abc"; //NaN
var a = true; //1
var a = false; //0
var a ="100px"; //NaN
var a ="100"; //100
var a = undefined; // NaN
var a = null; // 0
//强制转换的函数Number()
a = Number(a);
var result = "类型是:"+typeof(a)+",值是:"+a;
document.write(result);
(2)其它类型转成布尔型
//第二种:其它类型自动转成布尔型
var a ="abc"; //true
var a = 0; //false
var a = -100; //true
var a =""; //false
var a ="100"; //true
var a = undefined; // false
var a = null; //false
//强制转换的函数Boolean()
a = Boolean(a);
var result = "类型是:"+typeof(a)+",值是:"+a;
document.write(result);
(3)其它类型转成字符串
//第三种:其它类型自动转成字符型
var a = 0; // "0"
var a = true; // "true"
var a = false; // "false"
var a = NaN; // "NaN"
var a = 100; // "100"
var a = undefined; // "undefined"
var a = null; //"null"
//强制转换的函数String()
a = String(a);
var result = "类型是:"+typeof(a)+",值是:"+a;
document.write(result);
二、强制数据类型转换
Number()强制将其它类型转成数值型;
Boolean()强制将其它类型转成布尔型;
String()强制将其它类型转成字符型;
三、从字符串中提取数值
parseInt(str):在字符串中,从左到右提取整数,如遇到非数字数据,则停止提取;
例如:将一个<div>的宽度增加200px
varwidth = “100px;”
width= parseInt(width); //结果为100
width+= 200; // 300
width= width + “px”; //结果为 “300px”
parseFloat(str):在字符串中,从左到右提取浮点数(小数),如遇到非数字数据,则停止提取;
parseFloat(“.3px”); // 0.3
paseFloat(“abc200”); // NaN
parseFloat(“123.09px”); // 123.09
注意:如果要提取的字符串的第一个字符是非数字的,则直接返回NaN。
算术运算符、赋值运算符、字符串运算符
3、字符串运算符:+和+=
“+”就是用来连接前后两个字符串,或者连接变量;
“+”如果它的前后有一个是字符串,则“+”的功能就是“连接”字符串功能;
“+”如果它的前后都是数值时,则“+”的功能就是“加法”运算的功能;
Vara = 100;
Varb = “100”;
Varc = a + b; //结果是:“100100”
Vard = 200;
Varresult = a + d; //结果为:300
“+=”如果它的前后有一个是字符串,则“+=”的功能就是“连接”功能;
“+=”如果它的前后都是数值,则“+=”的功能就是“加法”运算功能;
(1)加法运算
vara = 10;
a+= 100; //展开后是: a = a + 100
document.write(a); //结果是:110
(2)字符串连接功能
Vara = 100;
a+= “中国广州”; //展开后:a = a + “中国广州”
document.write(a ); //结果是:“ 100 中国广州”
4、三元运算符
语法格式:条件表达式 ? 结果1 : 结果2
说明:当条件表达式为true时,执行“结果1”的代码;如果条件表达式为false时,执行“结果2”代码。
举例:
Var isMarried = false;
isMarried ? “已婚” : “未婚”; //如果isMarried的值为true,则输出“已婚”,否则,输出“未婚”