<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础01</title>
</head>
<body>
<span id="time"></span>
</body>
<script type="text/javascript">
//JS中常用的两个输出函数
//在网页中输出
document.write("你好啊,Java");
//弹出一个窗口显示输出内容
alert("你好啊,Java");
// 关于JavaScript的变量的定义
// var 变量名= 值;
//
//
// 注意:
// 1)在js中,var可以用来定义任何数据类型的变量,var 可以省略,但是不建议省略
// 2)var是可以重复定义变量的(后面的值会覆盖掉前面的值),是因为JavaScript弱类型语言,而Java是一种强类型语言
// 3)如果定义一个变量,但是变量没有值,那么值(undefind),没有定义的变量不能直接使用!
//
// 查看一个变量的数据类型,使用一个函数:typeOf(变量名)
//
// Javascript数据类型:
// 在javascript,数据类型变量名的值来决定的!
// 1)不管是整数还是小数都是number类型!
// 2)不管是字符还是字符串,都是string类型 String:在js中表示字符串对象
// 3)boolean类型
// 4)object :对象类型
document.write("<br/>");
var num1 = 10;//整数
var num2 = 10.11;//小数
document.write("num1="+num1+" num1的类型是"+typeof(num1)+"<br/>");
document.write("num1="+num2+" num2的类型是"+typeof(num2)+"<br/>");
var char = 'A';//字符
var str = "apple";//字符串
document.write("char="+char+" char的类型是"+typeof(char)+"<br/>");
document.write("str="+str+" str的类型是"+typeof(str)+"<br/>");
var flag = false;//布尔类型
document.write("flag="+flag+" flag的类型是"+typeof(flag)+"<br/>");
var obj = new Object();//对象类型
document.write("obj="+obj+" obj的类型是"+typeof(obj)+"<br/>");
document.write("<hr/>");
//类型转换函数
var num3 = "110";
document.write("num3转换前类型"+typeof(num3));
document.write("<br/>")
num3 = parseInt(num3);
document.write("num3="+num3+"<br/>");
document.write("num3转换后类型"+typeof(num3));
document.write("<br/>");
document.write("<hr/>");
var num3 = "110.11";
document.write("num3转换前类型"+typeof(num3));
document.write("<br/>")
num3 = parseFloat(num3);
document.write("num3="+num3+"<br/>");
document.write("num3转换后类型"+typeof(num3));
document.write("<br/>");
document.write("<hr/>");
//运算符
/**
* 算术运算符:+,-,* ,/.
* 比较运算符:>= ,<= ,<,>..
* 逻辑运算符:逻辑双与&&.逻辑双或||,逻辑非!
* 三元运算符:表达式? true的结果:false的结果;
*
*
* 注意:js中,true代表1,false代表0
*/
//流程语句
/**
* if..,else..语句;
* switch语句;case后可以是常量,变量,表达式
* do...while..语句
* 增强for循环for(var 变量名 in 数组名称/对象名)
* with()语句
*/
//函数
/**
* 函数的定义:
* function 函数名称(形式参数列表)//{
* //语句
*
* }
*
* 函数的调用
* 函数名称(实际参数列表) ;
*
*
* 函数中的注意事项:
* 1)函数的形式参数不能有var关键字定义,否则报错
* 2)在js中函数是可以有return语句的,直接return,但是没有返回值
* 3)在js中,函数是不存在的重载概念,后面定义的函数回覆盖掉前面定义的函数
* 4)当实际参数的数量小于形式参数的数量,就会出现一个值肯定是NaN;如果实际参数大于形式参数,那么最终会计算前面的值,然后将后面的数据丢弃掉!
* 5)在js的每一个函数中,里面存在默认的数组:arguments,它的作用就是将实际参数从左到右依次赋值给形式参数(从左到右)
* */
function add(a,b){
return a+b;
}
document.write(add(10,20)+"<br/>");
document.write("<hr/>");
//常用对象(如同SE中的类)Number String Date Math
/*
* js中String对象 的常用方法
chatAt() :返回指定索引位置处的字符
indexOf():表示某个子字符串在当前字符串中第一次出现的索引
lastindexOf();
fontColor():给当前字符串设置一个颜色标记
substring(start,end):截取功能
*/
var str1 = new String("Java");
var str2 = new String("Java");
document.write((str1==str2)+"<br/>");//false
document.write((str1.valueOf()==str2.valueOf())+"<br/>");//true valueof比较对象的内容
document.write(str1.charAt(1)+"<br/>");//a
document.write(str1.indexOf("a")+"<br/>");//1
document.write(str1.lastIndexOf("a")+"<br/>");//3
document.write(str1.fontcolor("#00ff00")+"<br/>");//绿色Java
document.write(str1.substring(1,3)+"<br/>");//av
document.write("<hr/>");
/*
*Js中常用的Math对象方法
* Math.ceil(num)向上取整
* Math.floor(num)向下取整
* Math.round(num)四舍五入
* Math.random()产生随机数[0,1)区间
* Math.max/min(num1....)返回多个数中的最大/小者
*/
var num = 1.12;
document.write(Math.ceil(num)+"<br/>");//2
document.write(Math.floor(num)+"<br/>");//1
document.write(Math.round(num)+"<br/>");//1
document.write(Math.random()+"<br/>");//0.7758340940272558
document.write(Math.max(10,12,43,23,54,65,43)+"<br/>");//65
document.write(Math.min(10,12,43,23,54,65,43)+"<br/>");//10
document.write("<hr/>");
/*
*Js中常用的Date方法
*使用Date对象打印一个时钟
*/
function newTime(){
var date = new Date();
var str = date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate()+" "+
date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
//获取span标签对象
var time = document.getElementById("time");
//设置为文本属性
time.innerHTML = str;
}
//定时器
window.setInterval("newTime()",1000);//将显示在网页开头
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础02</title>
</head>
<body>
</body>
<script type="text/javascript">
//Aarray对象
/*JS中数组中可以存储各种类型的元素;
*而且不存在数组角标越界,可以自动的扩充数组
*/
//创建数组的方式
//方式一
var arr1 = new Array(3);//创建一个长度为3的数组
var arr2 = [0,1,2,3,4];//直接指定数组中的元素,不需要new Array()
//打印数组的长度,数组的length属性
document.write(arr1.length+"<br/>");//3
document.write(arr2.length+"<br/>");//5
//Array中常用的方法
/*
* join():将数组中的所有元素以一个符号进行拼接,返回一个新的字符串
* reverse 方法:将数组中的元素进行反转
*/
var arrString = arr2.join("-");
document.write(arrString+"<br/>");
//遍历数组使用for循环
for(var i= 0;i<arr2.length;i++){
document.write(arr2[i]+" ");
}
document.write("<br/>");
//将数组进行翻转
var arr3 = arr2.reverse();
for(var i= 0;i<arr3.length;i++){
document.write(arr3[i]+" ");
}
document.write("<hr/>");
//自定义对象
//创建自定义对象的方式:
//方式一:类似于有参构造
function Person(name,age){
this.name = name;
this.age = age;
this.speak = function(){
alert("这是说话功能");
}
}
//创建该对象
var p = new Person("李四",35);
document.write(p.name+" "+p.age+"<br/>");
p.speak();
//方式二:类似于无参构造
function Animal(){}
var animal = new Animal();//创建对象
//追加属性值
animal.name = "老鼠";
animal.age = 10;
//追加方法
animal.eat = function(){
alert("这是吃的方法");
}
document.write(animal.name+" "+animal.age+"<br/>");
animal.eat();
//方式三: 利用Object对象 ,Object对象在js中代表任意对象的一个模板
function Student(){}
var s = new Object();
//追加属性,追加方法
//方式四:json解析
var a = {
"name" : "张三",
"age" : 13,
"sleep" : function(){
alert("这是睡觉功能");
}
}
document.write(a.name+" "+a.age+"<br/>");
a.sleep();
//原型
/*
* 原型(prototype)
作用:就是给js中的内置对象追加方法使用的
1)每一个js内置对象都有一个原型属性(prototype)
2)如果往原型对象中追加一个方法,那么这个方法会自动追加到内置对象中
3)原型属性是可以直接被内置对象调用然后追加方法
*/
Array.prototype.max = function(){
var a = this[0];
for(var i= 0;i<this.length;i++){
if(this[i]>a){
a= this[i];
}
}
return a;
}
var arr = [12,34,5,423,43];
var s = arr.max();
document.write(s);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础03</title>
</head>
<body>
<input type="button" value="open" onclick="testOpen()">
<input type="button" value="setInterval" onclick="testSetInterval()">
<input type="button" value="clearInterval" onclick="testClearInterval()">
<input type="button" value="setTimeout" onclick="testSetTimeimeout()">
<input type="button" value="clearTimeout" onclick="testClearTimeout()">
<input type="button" value="alert" onclick="testAlert()">
<input type="button" value="confrim" onclick="testConfrim()">
<input type="button" value="prompt" onclick="testPrompt()">
<hr/>
<input type="button" value="href" onclick="testHref()">
<input type="button" value="reload" onclick="testReload()">
</body>
<script type="text/javascript">
//window对象
/*
*window对象:它代表浏览器的一个窗口对象
注意:
由于window对象中的方法频繁调用,所以为了简化书写方式,有时候window可以去掉
里面涉及的方法:
open("打开资源文件url","以什么什么方式打开(_blank)/_self","指定新打开的窗口和高度")
和定时器相关的方法:
setInterval("任务",时间毫秒值); 没经过多少毫秒后重复执行这个任务
clearInterval():取消和setInterval相关的任务
window.clearInterval(iIntervalID) :这个要插入一个Id
setTimeout("任务",时间毫秒值); 经过多少毫秒后只执行一次
clearTimeout():取消和setTimeout相关的超时事件
和弹框相关的方法
window.alert("提示框") ; //window可以省略
window.confirm("消息对话框");有确认框,取消框
prompt:提示对话框，其中带有一条消息和一个输入框
*/
//常用方法测试
function testOpen(){
//打开一个页面
window.open("广告.html");
}
var setID;
function testSetInterval(){
//每经过xx时间执行xx操作(执行多次)
setID = window.setInterval("testOpen()",2000);
}
function testClearInterval(){
//清楚setInterval()操作,需要传入一个ID参数
window.clearInterval(setID);
}
var timeoutID
function testSetTimeimeout(){
//在经过xx时间后执行xx任务(只执行一次)
timeoutID = window.setTimeout("testOpen()",3000);
}
function testClearTimeout(){
//清除setTimeout()操作
window.clearTimeout(timeoutID);
}
function testAlert(){
//弹出单项选择一个窗口,并显示内容
window.alert("你好啊!");
}
function testConfrim(){
//弹出一个双向选择窗口,根据客户选择返回一个boolean值
var flag = window.confirm("您确定要删除吗?")
if(flag){
alert("删除数据");
}else{
alert("取消删除");
}
}
function testPrompt(){
//弹出一个带输入框的双向选择窗口,根据客户输入与选择返回一个boolean值
var flag = window.prompt("请输入密码");
if(flag){
alert("登陆成功");
}else{
alert("请重新输入");
}
}
//location对象:地址栏对象
/*
href属性:可以修改页面的href属性来实现页面跳转 更改的href属性:--- URL(统一资源定位符)
URI
方法:
定时刷新:reload()
*/
//常用属性及方法测试
function testHref(){
//将当前页面转化为目标页面
window.location.href = "广告.html";
}
function testReload(){
//刷新页面
window.location.reload();
}
//window.setTimeout("testReload()",1000);
//这里虽然使用的setTimeout()方法,只执行一次,但是每当页面刷新,就有需要执行新的刷新方法
//所以页面就在不同刷新
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础04前</title>
</head>
<body>
<a href="基础04后.html">基础04后</a>
<input type="button" value="forward" onclick="testForward()">
</body>
<script type="text/javascript">
//history对象
/*
*常用方法
* history对象中的方法
forward:装入历史列表中下一个url
back:装入历史列表中前一个url
go(正整数或者负整数)
*/
function testForward(){
//forward:装入历史列表中下一个url(首先要存在一个历史记录)
//window.history.forward();
window.history.go(1);
}
//screen对象:屏幕对象
//属性 描述
//availHeight 获取系统屏幕的工作区域高度，排除 Microsoft® Windows® 任务栏。
//availWidth
document.write(screen.availHeight+"<br/>") ;//除去Microsoft® Windows® 任务栏的屏幕高度
document.write(screen.height+"<br/>") ;//屏幕高
document.write(screen.availWidth+"<br/>") ;//除去Microsoft® Windows® 任务栏的屏幕宽度
document.write(screen.width+"<br/>") ;//屏幕宽
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="back" onclick="testBack()">
</body>
<script type="text/javascript">
function testBack(){
//back:装入历史列表中前一个url
//window.history.back();
window.history.go(-1);
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件分类</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
border: 1px solid #00F;
}
</style>
</head>
<body onload="testload()">
省份:
<select id="jiguan" onchange="testCity()">
<option value="请选择">请选择</option>
<option value="陕西">陕西</option>
<option value="广东">广东</option>
<option value="浙江">浙江</option>
</select>
城市:
<select id="city"></select>
<hr/>
<br/><br/><br/><br/><br/>
<div id="div1" onmouseover="OnMouseOver()" onmouseout="OnMouseOut()"></div>
</body>
<script type="text/javascript">
function testCity(){
//通过id属性值获取当前id="jiguan"的标签内容
var jiguan = document.getElementById("jiguan").value;
////获取id="city"所在的select标签对象
var city = document.getElementById("city");
//每一次选择前清除city内容,为了保证不叠加城市内容
city.innerHTML = "";
//判断
if(jiguan=="陕西"){
var arr = ["西安","宝鸡","咸阳"];
for(var i = 0;i<arr.length;i++){
//转换为html形式
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="广东"){
var arr = ["广州","佛山","深圳"];
for(var i = 0;i<arr.length;i++){
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="浙江"){
var arr = ["杭州","温州","南京"];
for(var i = 0;i<arr.length;i++){
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
}
function OnMouseOver(){
alert("鼠标经过了");
}
function OnMouseOut(){
alert("鼠标移开了");
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告</title>
</head>
<body>
广告
</body>
</html>