一、基本数据类型：五种基本数据类型，分别为null、string、boolean、number、undefined；其中所有的数值类型为number类型，null是定义了变量并且复制为空的类型，而undifined为止声明，还没有进行赋值操作的变量。
二、引用数据类型：Object类型
三、在网页中使用javascript的三种方式：
1、使用script标签（type现在的浏览器可以不指定），如下：
<script type="text/javascritp">
JavaScript语句。。。
</scritp>
2、从外部导入JS文件，也是使用script标签，如下：
<script src="../hello.js"></script>
3、直接写在HTML标签中，eg: <input type="button" value="消息对话框" οnclick="prompt("Hello JS!")"/>
四、javascript的变量和基本的循环语句和java类似，javascript对大小写是敏感的Function（不是标识符）与function不是同一个标识符，这里不做展开。
五、typeof检测变量的返回值，各个返回值和其对应的意思如下：
undefined 定义变量但未对其赋值
number 定义变量并对其赋值数值型数据
string 定义变量并对其赋值用单引号或双引号引起的字符串
boolean true或false
object javascript中的对象、数组和null
六、数组
1、 创建数组：var arrayName = new Array(size)；或var arrayName = [ ]；（这种方式常用，比较方便）
2、访问数组：arrayName(index)；
eg: var arr = new Array(4);
arr[0] = "apple";
arr[1] = "banana";
arr[2] = "orange";
arr[3] = "peach";
虽然我这里定义了数组的大小为4但是任然可以 arr[20] = "berry"；此时arr.length = 21(数组的下标从0开始)，其中arr[4]到arr[20]为undefined，因为此时只是定义但未对其赋值。
3、数组的属性：length；这里只要注意数组的下标从0开始即可。
4、数组的常用方法：join() 将数组的素有元素放入一个字符串中，用指定的分割符进行分隔
eg：var arr = [];
arr[0] = "tao";
arr[1] = "rui";
arr[2] = "ke";
arr[3] = "ji";
var arrToStr = arr.join(",");
alert(arrToStr);
结果为：tao，rui，ke，ji
sort（compareFunction：function），通过指定的方式对数组进行排序操作，一下操作对数组进行降序排序
eg：var arr = [];
arr[0] = 2;
arr[1] = 18;
arr[2] = 3;
arr[3] = 42;
arr[4] = 75;
arr.sort(function myfun(a, b){
return a>b ? true : alse;
});
alert(arr);
结果为：[2, 3, 18, 42, 75]
push()；在数组末尾添加一个或n个元素并返回新数组的长度，
eg：var names = ["John","ye","mgh"];
var newLength = names.push("zxc");
alert(newLength);
结果为：newLength = 4；新数组为：["John","ye","mgh"，"zxc”];
七、JavaScript常用的输入输出函数
alert("欢迎学习JS!")；弹出一个警告框，参数为显示的内容
prompt(“请输入您的姓名？”，“Jhon”)； 弹出输入框，第二 个参数为输入框的默认值，第二个参数可以省略不写，该函数返回的是输入的内容（注意这里返回的内容都是string 类型的）
confirm（“提示信息”）； 弹出提示信息
八、JavaScript中的函数
1、函数是完成特定功能的代码块
2、函数分为JS提供的系统函数和用户自定义函数，函数不必定义在某个类中，直接定义
3、常用的系统函数：parseInt(index，str)；将string类型的变量转换为number类型的变量（整数），不是进行四舍五入是截取整数部分，eg:parseInt(3.5) = 3；
parseFloat(str)；将string类型的变量转换为number类型的变量（浮点数），eg：parseFloat（3.6） = 3.6；
isNaN（args）；如果args是number类的返回false，否则返回true，这个函数对于数字输入检测很有用
自定义函数：格式: function functionname(args1，args2， . . . ) {
要执行的JavaScript语句；
return [value]; // return语句可以省略
}
函数调用一般和表单事件一起调用，调用格式：事件名 = “functionname（）”；
匿名函数：定义：var fun= function(num) {
for(var i= 0；i<bum； i++) {
document.write(“hello ”+ i+"<br />");
}
}
调用：<.input type="button" οnclick="fun(prompt('请输入循环的次数？'))” value="显示问候语">；
系统 函数使用实例，根据输入的数字和符号进行相应的四则运算：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript函数</title>
<script type="text/javascript">
// 输入框
function showInput(num) {
var input = parseFloat(prompt("请输入第"+num+"个数？"));
if(isNaN(input)) {
showInput(num);
}
return input;
}
// 运算符输入框
function getYsf() {
var ysf = prompt("请输入运算符？");
var ysfs = ['+', '-', '*', '/', '%'];
if(ysfs.indexOf(ysf) == -1){
ysf = getYsf();
}
return ysf;
}
// 计算结果
function calc() {
var num1 = showInput("一");
var num2 = showInput("二");
var ysf = getYsf();
var reslut;
switch (ysf){
case "+":
reslut = num1 + num2;
break;
case "-":
reslut = num1 - num2;
break;
case "*":
reslut = num1 * num2;
break;
case "/":
reslut = num1 / num2;
break;
case "%":
reslut = num1 % num2;
break;
}
alert("结果为："+num1+ysf+num2+"="+reslut);
}
</script>
</head>
<body>
<input type="button" οnclick="calc()" value="计算" />
</body>
</html>
九、BOM（Brower Object Model）浏览器对象模型
1、window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
2、由于window是顶层对象，所有由他调用的子对象可以不用显示的写出window，以下的两种写法是等价的：
document.write("Hello JS!"); window.document.write("Hello JS!");
3、window对象的常用属性：history属性（有关访问过的URL信息）和location属性（URL为当前用户的URL信息）
history属性的方法：back();返回前面访问过的页面 history.back();
forward();向前history.forward();
go（1）；也是向前，与forward()不同的是，它可以指定步数；eg：history.go（2）；
location属性的方法：reload()方法刷新当前页面
replace(url)页面跳转到指定的url处，无浏览器历史记录；eg：location.replace("heep://www.taobao.com")；
href(url)；页面跳转，有浏览器历史记录,可以用history.back()；返回上一个页面
十、window对象常用的函数：
prompt（）；alert（）；confrim（）；方法上面已经介绍过，这里不在讨论；
close（）；方法用来关闭用JavaScript打开的浏览器窗口(只能关闭通过JS打开的窗口)；
open(url，“”，“width：300px, height:300px”);打开url地址的页面；eg：open("http://www.sina.cn"); // 打开新浪手机网
第二个参数为空时每次总是打开新窗口，设置值时不重新打开新窗口，只在同一个页面打开，相当于指定窗口的id，复用打开的第一个窗口
setTimeout()；在指定的毫秒数后调用函数或计算表达式 eg：function fun() { alert("Hello JS!"); } setTimeout(fun, 2000); // 经过两秒后执行fun函数（只执行一次）setInterval()； 在指定的周期（以毫秒计）来调用函数或表达式(循环执行)setInterval(fun, 2000); // 每过两秒执行一次fun函数（循环执行）
其中setTimeOut()、和setInterval()；为定时函数；
var funTag = setTimeOut("指定的函数", "等待的毫秒数"); // funTag为setTimeOut函数返回的唯一标识
var funFlag = setInterval("指定的函数", "间隔执行的毫秒数"); // 同理，funFlag为setInterval函数返回的唯一标识
清除函数：
clearTimeOut(setTimeOut()返回的ID值); // eg:clearTimeOut(funTag)；
clearInterval(setInterval()返回的ID值); // eg: clearInterval(funFlag)；
实例一（实现四张图片轮播的效果）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片轮播</title>
<script type="text/javascript">
var i = 0;
// 更换图片
function changeImage() {
var imgs = ['img/01.jpg', 'img/02.jpg', 'img/03.jpg', 'img/04.jpg'];
document.getElementById("img1").src = imgs[i%imgs.length];
i++;
}
var flag;
// 开始
function start() {
flag = setInterval(changeImage, 1000); // 间隔一秒更换一张图片
}
// 停止
function stop() {
clearInterval(flag); // 清除定时函数
}
</script>
</head>
<body>
<div>
<img id="img1" src="img/01.jpg" />
</div>
<button οnclick="start()">开始</button>
<button οnclick="stop()">停止</button>
</body>
</html>
运行结果图如下：
十一、JavaScript内置对象
Math对象的主要函数：ceil()函数（天花板函数），Math.ceil(2.3) = 3；向上取整，floor()函数(地板函数)，Math.floor(2.9) = 2；
random()函数，返回0和1之间的随机数，取值范围为[0，1），round()四舍五入函数，Math.round(2.4) = 4；
求返回范围在[min, max]之间的公式：Math.floor(Math.random() * (max - min + 1) + min);
eg：alert("返回5-40的数："+Math.floor(Math.random() *(40-5+1)+5));
Date对象：
以下是Date对象的两个使用实例：
一、用图片（0-9）动态显示当前时间：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>时间显示</title>
</head>
<style>
span{
font-size: 70px;
font-family: "华文行楷";
color: #FF0000;
}
</style>
<script type="text/javascript">
function f() {
var date = new Date();
var hour = date.getHours();
var minut = date.getMinutes();
var sec = date.getSeconds();
document.getElementById("img1").src = "img/time_num_"+parseInt(hour/10)+".png";
document.getElementById("img2").src = "img/time_num_"+parseInt(hour%10)+".png";
document.getElementById("img3").src = "img/time_num_"+parseInt(minut/10)+".png";
document.getElementById("img4").src = "img/time_num_"+parseInt(minut%10)+".png";
document.getElementById("img5").src = "img/time_num_"+parseInt(sec/10)+".png";
document.getElementById("img6").src = "img/time_num_"+parseInt(sec%10)+".png";
}
window.onload = setInterval(f, 1000);
</script>
<body>
<span>当前时间:</span>
<img id="img1" src="img/time_num_1.png" />
<img id="img2" src="img/time_num_1.png" />
<img src="img/time_num_colon.png" />
<img id="img3" src="img/time_num_1.png" />
<img id="img4" src="img/time_num_1.png" />
<img src="img/time_num_colon.png" />
<img id="img5" src="img/time_num_1.png" />
<img id="img6" src="img/time_num_1.png" />
</body>
</html>
效果图如下：
实例二：倒计时动态显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示离过年还有多久</title>
<style>
span{
font-size: 70px;
font-family: "华文行楷";
color: #FF0000;
}
</style>
<script type="text/javascript">
var arr = [];
function diff() {
var nowDate = new Date();
var msecond1 = nowDate.getTime();
var endDate = new Date('2017-1-28');
// var endDate= new Date(2017, 0, 28);
var msecond2 = endDate.getTime();
arr[0] = parseInt(Math.abs(msecond1-msecond2)/1000/60/60/24);
arr[1] = 24-nowDate.getHours()-1;
arr[2] = 60-nowDate.getMinutes();
arr[3] = 60-nowDate.getSeconds();
}
function show() {
diff();
document.getElementById("img1").src = "img/time_num_"+parseInt(arr[0]/10)+".png";
document.getElementById("img2").src = "img/time_num_"+parseInt(arr[0]%10)+".png";
document.getElementById("img3").src = "img/time_num_"+parseInt(arr[1]/10)+".png";
document.getElementById("img4").src = "img/time_num_"+parseInt(arr[1]%10)+".png";
document.getElementById("img5").src = "img/time_num_"+parseInt(arr[2]/10)+".png";
document.getElementById("img6").src = "img/time_num_"+parseInt(arr[2]%10)+".png";
document.getElementById("img7").src = "img/time_num_"+parseInt(arr[3]/10)+".png";
document.getElementById("img8").src = "img/time_num_"+parseInt(arr[3]%10)+".png";
}
window.onload = setInterval(show, 1000);
</script>
</head>
<body>
<div>
<span>距离春节仅有:</span>
<img id="img1" src="" />
<img id="img2" src="" /><span>天</span>
<img id="img3" src="" />
<img id="img4" src="" /><span>时</span>
<img id="img5" src="" />
<img id="img6" src="" /><span>分</span>
<img id="img7" src="" />
<img id="img8" src="" /><span>秒</span>
</div>
</body>
</html>
运行结果图：
扫一扫
2109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
