Javascript<一>

javascript是什么？

1.基于对象和事件驱动的脚本语言（它要求放在浏览器中去解析）

2.无需编译，可由浏览器直接解释运行

3.JavaScript 是一种弱类型语言

交互性（它可以做的就是信息的动态交互）

安全性（不允许直接访问本地硬盘）

跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）

JavaScript语言组成

ECMAScript核心语法 ---script核心语法

BOM---浏览器对象模型，用来获取或设置浏览器的属性、行为。如：新建窗口，获取屏幕分辨率等。

DOM---文档对象模型，操作对象是文档，和浏览器没有太多关系。

JavaScript与Html的结合方式

在事件中写<!doctype html>
<html lang="en">
 <head>
  <title>JS三种结合方式</title>
 </head>
 <body>
  <input type="button" value="点我点我"  onclick="alert('aaaaaaa')"></input>
 </body>
</html>

在<script></script>直接写JS代码。

引入外部js文件<script type="text/javascript" src="demo3.js" ></script>

全局函数

parseInt();转整数

parseFloat();//转小数

isNaN()//判断是否为数字为数字返回false 不为数字返回true eg：isNaN("abc")

eval() eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。

unescape() 函数可对通过 escape() 编码的字符串进行解码。

BOM---浏览器对象模型

DOM Window

属性：status：状态栏、self：自己、top：顶层窗口、parent：父窗口

方法：

alert();

confirm();显示带有一段消息以及确认按钮和取消按钮的对话框。弹出确认取消框点确定会返回true,否则返回false

prompt();弹出一个带有输入文本的对话框会返回在文本框中输入的值.第一个参数是提示文本，第二个参数是默认值

open();用于打开一个指定的窗口

close();用于关闭当前窗口

setInterval() 、setTimeout();定时器。前者隔一段时间运行一次，后者只运行一次

DOM Navigator

appName 浏览器名称

appVersion 浏览器版本

platform 操作系统

DOM Screen

关于显示器的一些属性。

width 返回显示器屏幕的宽度。

height 返回显示器的高度。

DOM History

因为隐私问题，此对象只有3种方法了。

back(); 后退

forward(); 前进

go()//数字 go(1)---前进 go(-1)---后退

附：

一般是点了超链接（利用a标签）后，可以后退，也可以通过location可以达到a标签的效果。

onclick="location.href='demo2.html'"

主页<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <title>原始窗口</title>
  <script>


  </script>
 </head>
 <body>
  开始~\(≧▽≦)/~啦啦啦
  <!--
  <a href="demo2.html" >打开新界面</a> 
  -->
  <input type="button" value="通过Location来实现a标签的效果" onclick="location.href='demo2.html'"/>

 </body>
</html>

demo2.html<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<script>
function goback(){
history.back();
}
</script>
  <title>History对象</title>
 </head>
 <body>
  打开后的窗口!!!
  <input type="button" value="后退" onclick="goback()"/>
 </body>
</html>

事件

javascript是事件驱动的，所以事件也是非常重要的。

大致常用的事件有：

鼠标移动事件:

onmouseover 悬停

onmouseout 移开

onmousemove移动

onclick点击

鼠标事件示例<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<script>
function RecorderMouse(e){
window.status=e.clientX+'*'+e.clientY;
}
</script>
  <title>鼠标事件</title>
 </head>
 <body>
  <input type="text" onmouseover="alert('鼠标进入了文本框')" onmouseout="alert('鼠标离开了文本框')" />

  <!--创建一个块-->
  <div style="border:1px solid red;width:600px;height:1000px;" onmousemove="RecorderMouse(event)"></div>
 </body>
</html>

加载与卸载事件

onload 加载

比如：在body中设置onload事件，用window.open(“”)打开很多网页。

onunload 关闭

加载与卸载&&XML DOM的添加标签方法<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
	<script>
function addText(){
//通过XML DOM添加一个input标签
var inputEle=document.createElement("input");

//设置element属性 此处：type=“text”
inputEle.setAttribute("type","text")

//添加到body中---设置好标签总要确定将标签放到什么位置
document.body.appendChild(inputEle);
}
</script>
  <title>点击事件&创建标签并添加标签属性</title>
 </head>
 <body onload="alert('载入成功')" onunload="alert('卸载成功')">

	<input type="button" value="添加一个文本域" onclick="addText()" />

 </body>
</html>

上述事例用到了

1、XML DOM的createElement(“input”)来添加input标签

2、用setAttribute（”type”,”text”）给此标签添加属性。

3、确定上述标签的位置。

聚焦与离焦事件

onfocus 得到焦点

onblur 推动焦点

键盘事件

onkeydown 键盘按下

onkeypress 键盘压住

onkeyup 键盘弹起

提交与重置事件

onsubmit=" return 函数名()",而且函数一定要有返回值， true代表表单提交 false不提交

Javascript练习

//参考JS的DATE类做一个动态时钟

动态时钟<!doctype html>
<html lang="en">
<meta charset="UTF-8">
 <head>
  <title>动态时钟</title>
 <style>
 #show{
 text-align:center;
 font-size:50px;
 color:red;
 }
 </style>
 </head>
 <!-- 
 思路：
 body中有个文本框，其value用来显示时间
 通过getElementById得到文本标签，然后设置value的值。
 最后通过定时器每秒设置一次value的值。
 -->
 <body style="text-align:center"> 
 <input type="text" id="show" />
  <script>
  function showTime(){
  var date=new Date();
  
  var hour=date.getHours();
  var minute=date.getMinutes();
  var second=date.getSeconds();

  //格式化时间格式，避免出现个位数
	hour=hour<10?"0"+hour:hour;
	minute=minute<10?"0"+minute:minute;
	second=second<10?"0"+second:second;

  //获取标签并给value赋值
  document.getElementById("show").value=hour+':'+minute+':'+second;  
  }

  //通过定时器每隔一秒给value赋值 setInterval(方法，时间)

  setInterval("showTime()",1000);
  </script>

 </body>
</html>

//秒表定时器,有开始、停止、重新计时。

//省市级联，选择省后市级的下拉菜单自动出现对应的市

省市级联<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

<script>
function changCity(){
   var citys=new Array();
   citys[0]=new Array('');
   citys[1]=new Array('济南','青岛');
   citys[2]=new Array('长沙','衡阳');
   //得到省下拉菜单节点的所选项的value值
   var selProvince=document.getElementById("province").value;
	//得到市下拉菜单节点
   var cityEle=document.getElementById("city")

   var city=citys[selProvince];

   //清空之前的市级下来列表
   cityEle.options.length=1;
	for(var i=0;i<city.length;i++){
   cityEle.add(new Option(city[i],city[i]));
	}
}
</script>
  <title>省市级联</title>
 </head>
 <body>
  <select id="province" onchange="changCity()">
	<option value="0">请选择省份</option>
	<option value="1">山东</option>
	<option value="2">湖南</option>
  </select>
  <select id="city">
  <option value="0">请选择城市</option>
  </select>
 </body>
</html>

posted @ 2014-04-17 23:28 Mio酱阅读(204) 评论(0) 收藏举报

刷新页面返回顶部