一.JavaScript的简单介绍
1.JavaScript是一种基于对象和事件驱动的客户端脚本语言,提供用户和界面的交互方式.
2.JavaScript的编辑工具：
常见的JavaScript编辑工具有很多，例如记事本、 Hbuilder、Dreamweaver和Visual Studio，还有Sublime Text、 Notepad++等。
3.对象:万事万物皆对象
对象中的三大要素/三大特征:
属性:描述对象的外观特征
行为:(1)方法(主动行为): 对象自己本身所具备的能力.
(2)事件(被动行为) :对象自己接受到一种指令需要完成的一 种行为.
4.脚本语言(就是解析语言):：弥补编译语言的不足而存在的,作为补充语言,不用编译.
编译语言:把代码编译成CPU认识的语言(机器码),然后整体执行.
解析语言:一行一行解析,解析一行执行一行,然后显示给用户.
弱类型脚本语言:：简单理解定义一个变量,可以有多种数据类型.
弱类型:根据值来确定数据类型,接受数据的格式:var 变量名称=值.
二.JavaScript嵌入页面的方式
1.行间式嵌入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
/* onclick单击事件;alert('')消息框*/
<div class="div1" onclick="alert('hello')" style="width: 100px;height: 100px;border: 1px solid black;margin: 100px auto;">请点击</div>
</body>
</html>
2.内嵌式:通过script标签嵌入head中(body中)
head中的脚本:需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中.当把脚本放在head部分中时,可以保证脚本在任何调用之前被加载.
body中的脚本:当页面被加载时执行的脚本放在HTML的body部分,放在body部分的脚本通常被用来生成页面的内容.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function load(){ //function实现函数//
alert('你好,这是页面的加载事件......')
}
</script>
</head>
<body onload="load()"> //onload加载事件//
</body>
</html>
没有名称的加载事件,通过window调用加载事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
alert('没有名称的加载事件...')
}
</script>
</head>
<body>
</body>
</html>
3.外部式/外联式:通过script标签引入外部js文件夹中的.js文件
三.变量的定义以及变量的初始化
1.消息框:
alert(’’);
confirm(‘是否确实关闭窗口’);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function load(){
confirm('是否确定关闭窗口')
}
</script>
</head>
<body onload="load()">
</body>
</html>
prompt(‘值1’,‘值2’):值1表示消息框的提示,值2该消息框中的文本内容提示(默认值)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function load(){
prompt('请输入年龄','23')
}
</script>
</head>
<body onload="load()">
</body>
</html>
console.log(‘我是控制台显示’)--------将内容显示到控制台
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function load(){
console.log('请输入年龄','23')
}
</script>
</head>
<body onload="load()">
</body>
</html>
2.变量:在整段程序中不断变化的量,同时用来存储数据的量.
(1)变量的定义:使用关键字var进行定义
var num
(2)变量的初始化:是指变量赋值.
num=10;
eg:var num1=10; num2=20;//使用var定义多个变量//
eg:var num1,num2; num1=2;num2=3;
eg:var num1=2,num2; num2=3;
(3)变量的命名规则
i.驼峰命名法:小驼峰 大驼峰
ii.变量的名称可以以$_,字母开头;
iii.变量名称中可以包含数字,但是不能以数字开头;
iv.变量名称不能使用JavaScript中的关键字进行命名;
v.变量可以使用中文命名,但是low;
vi.变量中区分大小写:userName和UserName便表示两个不同的变量;
vii.变量的名称中不允许出现空格,长度不能超过255个字符.
四.数据类型
JavaScript中的数据类型分为两大类:
1.基本的数据类型3种:数字类型;字符串类型;布尔类型.
2.特殊的数据类型3种:未定义类型;空类型对象类型.
3.复杂的数据类型:function(函数);array(数组);date(日期 ).
1.基本的数据类型
(1)number数字类型
重要方法:typeof用来检测变量的数据类型.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num=10;
alert(typeof(num));/*检测结果为number数字类型*/
alert(typeof num)/*第二种检测类型书写格式*/
</script>
</head>
<body>
</body>
</html>
(2)字符串类型string
var str1='admin';
alert(typeof str1);/*检测结果为字符串类型*/
(3)布尔类型boolean:赋值只有两种结果true/flase
var bool=true;
alert(typeof bool);/*检测结果为布尔类型*/
2.特殊的数据类型
(1)undefined未定义类型:声明变量未初始化.
var unde;
alert(typeof unde);/*检测结果为undefined未定义类型*/
(2)null空类型
(3)object对象类型
var str2=new String();/*实例化,创建对象*/
alert(typeof str2);/*检测结果为object对象型*/
五.数据类型的转换
1.将数字类型转换成字符串类型
第一种转换方式
var num=10;
var num1=String(num);/*第一种转换方式*/
alert(typeof num1)
var num=10;
var num2=num.toString();/*第二种方式*/
alert(typeof num2);
2.将字符串转换成数字类型
var str1='123';
alert(typeof Number(str1));/*结果为number*/
var str2='123.45';
alert(typeof Number(str2));/*结果为number*/
var str2='123.45';
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);/*结果为123,转换为整数型,导致数据流失*/
var str9='123.34';
var num_05=parseFloat(str9);
alert(num_05);/*结果为123.34,转换为数字类型保留为浮点数,确保数据完整性*/
3.将日期类型(object)转换成字符串类型
var time=new Date();
//alert(time);
//alert(typeof time);/*显示结果为object类型*/
var strtime=time.toString();/*使用toString方式*/
//alert(typeof strtime);/*结果为string类型转换成功*/
alert(typeof strtime+"");/*最简单最常用转换字符串,拼接字符串*/
六.JavaScript中的运算符
可以按照运算符的类型分为5种
1.算数运算符:+,-,*,/,%
2.比较运算符:>,<,>=,<=,!=,==
3.赋值运算符:=,+=,-=,/=,%=,*=
4.条件运算符/三目运算符/三元运算符:条件?值1:值2
5.逻辑运算符:&&(与),||(或),!(非)
1.算数运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var a=2,b=3;
//document.write(a+b);/*测试结果为5*/
//document.write('<br/>')/*设置页面换行*/
document.write('\r\n');没有效果*/
</script>
</head>
<body>
</body>
</html>
(1)+号的作用:i.求和运算;ii.连接字符串.
(2)write()与writeln()之间的区别?
write(输出项1,输出项2);{执行输出后光标不换行}
writeln(输出项1,输出项2);{执行输出后光标换到下一行}
writeln{仅输出空白且光标换到下一行}
var a1=2,b1=3;
document.write(a1+b1);
alert(a1+'\r\n'+b1);/*换行的转义字符使用*/
document.write('<br />');
var a2=23,b2=12;
document.write(a2-b2);/*测试结果为11*/
document.write(a2*b2);/*测试结果276*/
document.write(a2/b2);/*1.9666666666667*/
document.write(a2%b2);/*测试结果为11*/
2.比较运算符
var num1=32,num2=10;
document.write('<br />'+(num1>num2));/*测试结果为true*/
3.赋值运算符
var num_01=5,num_02=4;
//alert(num_01+=num_02);/*测试结果为9*/
//alert(num_01-=num_02);/*测试结果为1*/
//alert(num_01/=num_02);/*测试结果为1.25*/
//alert(num_01*=num_02);/*测试结果为20*/
alert(num_01%=num_02);/*测试结果为1*/(余数)
4.条件运算符
var num01=3,num02=4;
//alert(num01>num02?'0':'1');/*测试结果为1*/
//alert(num01<num02?'成立':'不成立');/*测试结果为成立*/
alert(num01>num02?true:false);/*测试结果为false*/
5.逻辑运算符
(1)逻辑运算符与&&,表示的是前者条件满足同时后者条件也要满足,只要任何一边的条件不成立,返回值都为false.
var $num01=3,$num02=4;
alert(($num01>5&&$num02<5)?true:false);/*测试结果为false*/
(2)逻辑运算符或||,表示的是只要满足一边的条件都为true,如果两边都为假,结果为假false,如果两边都为真,结果为真true.
var $num01=3,$num02=4;
alert(($num01<4||$num02>8)?true:false);/*测试结果为true*/
(3)逻辑运算符非!,若表达式的值为false则输出为true,若表达式值为true,则输出值为false.
var $num01=3,$num02=4;
alert(!($num01<4)?true:false);/*测试的值为false*/
转义字符
