一、JavaScript的介绍
1. JavaScript是什么?
JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端 Web 开发的
脚本语言,常用来给 HTML 网页添加动态功能,比如响应用户的各种操作。
JavaScript的编辑工具:
常见的JavaScript编辑工具有很多,例如记事本、Hbuilder、Dreamweaver和Visual Studio,还有Sublime Text、Notepad++等
万事万物都是对象
对象中的三大要素/三大特征:
属性: 用来描述一个对象的外观特征表现.
方法(主动行为): 对象自己本身所具备的能力.
事件(被动行为): 对象自己接受到一种指令需要完成的一种行为.
2. 解析执行与编译执行
编译执行:把代码编译成 CPU 认识的语言(文件),然后整
体的执行。
解析执行:一行一行解析,解析一行执行一行。
弱类型脚本语言:
脚本语言是:弥补编译语言的不足而存在的,作为补充语言,不用编译。
弱类型语言:简单理解定义一个变量,可以有多种数据类型。(var temp)
二、JavaScript入门基础
1. JavaScript 嵌入页面的方式
(1)行间事件(主要用于事件)
(2)内联嵌入:通过script标签嵌入head中,
<script type="text/javascript">
// 实现load()函数
function load(){
alert('你好,这是页面加载事件的方法实现...');
}
// 没有函数名字的加载事件
window.onload=function(){
alert('没有名称的加载事件....通过window调用加载事件');
}
</script>
(3)外部引入:通过script标签引入外部js文件中JavaScript的文件.
<script src="js/index01.js" type="text/javascript" charset="utf-8"></script>
(4)消息提示框:
alert('你好,我是alert');
confirm('是否关闭窗口') 返回为true或false
prompt(值1,值2) 值1表示消息框的提示,值2表示消息框中的文本内容,
console将内容显示在控制台中.
(5)script程序嵌入body中和head中的区别是什么?
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。
JavaScript应放在哪里
head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。
body 部分中的脚本: 当页面被加载时立即执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。
body 和 head 部分可同时有脚本:你可在文件中放无数的脚本,因此你的文件中可以在body和head部分同时存在脚本。
2. JavaScript的变量
JavaScript 是一种弱类型语言,javascript 的变量类型由它的值来决定。定义变量需要用关键字 'var'
变量的命名规则
①驼峰命名法:userName 小驼峰 UserNamePwd 大驼峰;
②变量的名称可以以 $,_,字母开头;
③变量名称中可以包含数字,但是不能以数字开头;
④变量的不能使用JavaScript中的关键字进行命名;
⑤变量可以使用中文命名,但是LOW;
⑥变量中区分大小写:userName和UserName(表示两个不同的变量);
⑦变量名称中不允许出现空格,长度不能超过255个字符.
var userName='admin';
var $userName='admin';
var _userName='admin';
var $000userName='admin';
// var 000userName='admin';
// var date=123; //不能使用关键字命名
3. JavaScript数据类型及转换
(1)数据类型
JavaScript数据类型有2大分类:一是“基本数据类型”,二是“特殊数据类型”。
其中,基本数据类型包括以下3种:
1) 数字型(Number型)
2) 字符串型(String型)
3) 布尔型(Boolean型)
a. 数字型(Number型)
数字(Number)是最基本的数据类型。在JavaScript中,和其他程序设计语言(如C和Java)的不同之处在于,它并不区别整型数值(int)和浮点型数据(float)。在JavaScript中,所有的数字都是由浮点型表示的。
//number数字类型
var num=10;
// 重要的方法: typeof 用来检测变量的数据类型
// alert(typeof(num)); //检测结果为数字类型
// alert(typeof num); //第二种检测数据类型的方法
var num1=2.345;
// alert(typeof num1);
alert(num1);
b. 字符串型
字符串是由Unicode字符、数字、标点符号等组成的序列,它是JavaScript用来表示文本的数据类型。程序中的字符串型数据是包含在单引号或双引号中的,由单引号定界的字符串中可以含有双引号,由双引号定界的字符串中也可以含有单引号.
// 字符串类型string
var str1='admin';
// alert(typeof str1); //检测结果 为string 字符串类型
var str2='123';
alert(typeof str2); //检测结果 为string 字符串类型
c. 布尔型(Boolean型)
数值型和浮点型的数据值都有无穷多个,但是布尔型数据类型只有2个:真(true)和假(false)。0可以看作false,1可以看做true。
// 布尔类型boolean: 赋值只有两种结果true/false
var bool=true;
alert(typeof bool);// 检测结果为boolean布尔类型
var bool=false;
alert(typeof bool);// 检测结果为boolean布尔类型
特殊数据类型有3种:
(1)空值(null型)
(2)未定义值(undefined型)
(3)object对象类型
a. 空值(null型)
整型、浮点型这些数据在定义的时候,系统都会分配一定的内存空间,JavaScript中的关键字null是一个特殊的值,它表示空值,系统没有给它分配内存空间,null不等同于空的字符串("")或0,因为空的字符串("")或0是存在的,但是null表示其不存在的。
b. 未定义值(undefined型)
如果一个变量虽然已经用var关键字声明了,但是并没有对这个变量进行赋值,而无法知道这个变量的数据类型,因此这个变量的数据类型是undefined,表示这是一个未定义数据类型的变量,此外,JavaScript中有一种特殊类型的数字常量NaN,即“非数
字”。当在程序中由于某种原因发生计算错误后,将产生一个没有意义的数字,此时JavaScript返回的数字值就是NaN
null与undefined的区别是,null表示一个变量被赋予了一个空值,而undefined则表示该变量尚未被赋值。
案例:
特殊的数据类型
//(1)undefined未定义类型:声明变量未初始化
var unde;
// alert(typeof unde);//检测结果为undefined 未定义类型
// (2)null空类型
var str=null;
// alert(typeof str);
// (3)object对象类型
var str1=new String(); //实例化,创建对象
// alert(typeof str1); //检测结果为对象类型object
(2)数据类型转换
所谓的类型转换,就是将一种数据类型转换为另外一种数据类型,
a. 数值型转换为字符串型
在JavaScript中,将数值型数据(整型或浮点型)转换为字符串,都是使用toString()方法
案例:
var num=10;
var num1=String(num); //第一种转换的方式
// alert(typeof num1); //检测结果为string字符串类型
var num2=num.toString();// 第二种方式 常用
// alert(typeof num2); //检测结果为string类型
b. 字符串型转换为数值型
在JavaScript中,将字符串型数据转换为数值型数据有parseInt()和parseFloat()这2种方法。其中,parseInt()可以将字符串转换为整型数据;parseFloat()可以将字符串转换为浮点型数据
语法:
parseInt() //将字符串型转换为整型
parseFloat() //将字符串型转换为浮点型
案例:
var str1='123';
// alert(typeof Number(str1)); //检测结果为number类型
var str2='123.45';
// alert(typeof Number(str2)); //检测结果为number类型
var str3=Number(str2);
// alert(str3); //输出结果为123.45
var str4='abc123';
// alert(typeof Number(str4)); //检测结果为number
// alert(Number(str4));//检测结果为NaN 表示非数字 表明转换失败
var str5='123abc';
// alert(typeof Number(str5));//检测结果为number
// alert(Number(str5)); //转换失败 NaN 必须要求是纯数字才可以转换
var str6='abc123';
var num_01=parseInt(str6);
// alert(typeof num_01); //检测结果为number
// alert(num_01);// 转换失败 NaN值
// 重点: 在转换的过程中遇到非数字的类型 就不会再转换, 然后输出转换完成数字
var str7='123abc';
var num_02=parseInt(str7);
// alert(num_02); //输出结果为123,省略abc
var str8='12ab33cc';
var num_03=parseInt(str8);
// alert(num_03); //测试结果为12 ,同样是遇到非数字的类型就停止转换,输出转换完成结果
var str9='123.34';
var num_04=parseInt(str9); //转换为整数型,导致数据的流失
// alert(num_04);
// 转换为数字类型保留为浮点数,确保数据的完整性
var num_05=parseFloat(str9);
// alert(num_05);
4. JavaScript中的运算符和表达式
JavaScript的运算符按运算符类型可以分为以下5种:
(1) 算术运算符:加、减、乘、除 取余
(2) 比较运算符:> ,< ,>= ,<= , != , ==
(3) 赋值运算符;= ,+= , -= ,/= ,*= ,%=
(4) 逻辑运算符;&&(与), ||(或) , !(非)
(5) 条件运算符;(三目/三元运算符) 格式:条件?值1:值2
案例:
(1)算数运算符
var a=2,b=3;
// 输出到浏览器的文档流中
document.write(a+b); // 测试结果为5
// +号的作用有两种:(1)求和运算;(2)连接字符串
document.write('<br />'); //设置页面换行
// document.write('\r\n'); 没有效果
var a1=2,b1='3';
// document.write(a1+b1);
// alert(a1+'\r\n'+b1); //换行的转义字符使用
document.write('<hr />');
var a2=23,b2=12;
// document.write(a2-b2);
// document.write(a2*b2);
// document.write(a2/b2);
// document.write(a2%b2);
(2)比较运算符
var num1=32,num2=10;
document.write('<hr />'+(num1>num2)); //添加括号,设置优先级
// document.write(num1!=num2);
(3)赋值运算符
var num_01=5,num_02=4;
// num_01+=num_02;
// num_01=num_01+num_02;
// alert(num_01+=num_02);
// alert(num_01-=num_02);
num_01/=num_02;
// alert(num_01);
// alert(num_01*=num_02);
alert(num_01%=num_02);
5)逻辑运算符: && || !
var $num01=3,$num02=4;
// 逻辑运算符 与&& 表示的是前者条件满足同时后者条件也要满足,
// 只要任何一边的条件不成立,返回都为fasle
// alert(($num01>5 && $num02<5)?true:false);
// 逻辑运算符 或|| 表示的是只要满足一边的条件都为true(真),
// 如果两边都为假,结果为假, 两边都为真,结果为真
// alert(($num01<4 || $num02>8)?true:false);
// 逻辑运算符 非! 表示改变原来正确的条件
alert(!($num01<4)?true:false);
(4)条件运算符/三目运算或是三元运算符
var num01=3,num02=4;
// alert(num01>num02?'0':'1');
// alert(num01<num02?'成立':'不成立');
// alert(num01>num02?true:false);
(5)write()和writeln()之间的区别?
document.write() //将内容写入文档,当前编辑位置为写入的内容的后一个字符。
document.writeln() //将内容写入文档,并添加一个换行符,当前编辑位置为写入的内容的后一行的起始位置