函数，事件，对象
学会使用自定义函数
知道对象的概念。并且简单使用。
掌握常用事件
核心 函数 函数调用方法格式
测试
已知华氏度 = 摄氏度*9/5+32；
要求：范围300度以内,以30度为间隔，页面输出华氏度与摄氏度的对照表，要求10条数据。
var ss=0;
document.write("<table border='1px' align='center'>")
for(var i=1;i<=10;i++){
document.write("<tr>")
hs=ss*9/5+32;
document.write("<td>"+i+"</td>"+"<td>"+ss+"</td>"+"<td>"+hs+"</td>");
ss+=30;
document.write("</tr>")
}
一、函数、方法
1.1什么是函数：
函数是指一段可以直接被另一段程序或代码引用的程序或代码。也叫做子程序、（OOP中）方法。
一个较大的程序一般应分为若干个程序块，每一个模块用来实现一个特定的功能。所有的高级语言中都有子程序这个概念，用子程序实现模块的功能。在C语言中，子程序的作用是由一个主函数和若干个函数构成。由主函数调用其他函数，其他函数也可以互相调用。同一个函数可以被一个或多个函数调用任意多次。
在程序设计中，常将一些常用的功能模块编写成函数，放在函数库中供公共选用。要善于利用函数，以减少重复编写程序段的工作量。
函数百度百科
函数：
一段具有特定的功能的代码块。需要时调用，调用时执行！(自己不会主动执行！)
if{}：控制代码是否执行。
for{}：控制代码执行多少次。
function（）{}：控制代码和时执行。调用时执行。
1.2函数的分类：
1库函数
s给我们提供的具有特定功能的代码块。
alert() prompt() document.write() Number() parseInt() 。。。
这都是函数 带括号的其实都是函数
自定义函数( 重点 )
自己定义函数，根据自己的需求来定义功能。
1.3函数的定义和使用：
定义函数的格式：
参数列表和return都是可选的。可写可不写。
function 函数名(参数列表){
return 数据;
}
函数的调用：
方式一：函数名(参数);
函数名(参数);
alert(“1111”);
方式二：跟标签绑定调用。
事件源：绑定的标签
事件类型：触发事件的操作。
触发的操作：发生的某一件事情
点我1号
方式三：绑定匿名函数：给确定的某一个标签绑定函数
1.拿到这个标签
如何拿到这个标签：
根据id属性取到标签对象
绑定匿名函数
document.getElementById(“id值”);
2.绑定匿名函数
btnEle.onclick = function(){
alert(“111”);
}
1.4、函数的应用
绑定事件函数的函数：
触发事件的事件原 ， 某一个标签
什么时机触发 点击等
干什么 函数的主体代码块；
点击按钮改变页面颜色
<body>
<!-- 点击按钮改变页面颜色 -->
<button onclick="chagneColor2()">点我</button>
<!-- <button onclick="chagneColor2()">点我</button> -->
<script type="text/javascript">
function chagneColor(){
document.body.style.backgroundColor="red";
}
document.body.style.backgroundColor="red"
function chagneColor2(){
if(document.body.style.backgroundColor=="red"){
document.body.style.backgroundColor="blue";
}else if(document.body.style.backgroundColor=="blue"){
document.body.style.backgroundColor="yellow"
}else if(document.body.style.backgroundColor=="yellow"){
document.body.style.backgroundColor="red";
}
}
</script>
</body>
猜数字1-100
<body>
<!--
猜数字游戏
一个输入的值
定义一个按钮实现调用比较的函数
进行比大小
然后输出结果是猜到了还是猜大了猜小了
-->
<fieldset id="">
<legend>猜数字</legend>
请输入数字：<input id="input" /><button type="button" onclick="a()">点击猜数字</button><br />
<span id="tex"> </span>
<input type="" name="" id="text" value="" />
</fieldset>
</body>
<script type="text/javascript">
var i=parseInt(Math.random()*100);
function a(){
var a1 =document.getElementById("input").value;
if(a1==i){
document.getElementById("text").value=("猜对了");
}else if(a1>i){
document.getElementById("text").value=("猜大了");
}else {
document.getElementById("text").value=("猜小了");
}
}
</script>
1.5函数的返回值和参数；
**返回值 return ** //返回值 ，就表示当函数执行完毕后会得到一个确定的数值
计算器 低级：
<body>
<fieldset id="">
<!-- 计算器
两个输入的数据一个输出的数据 加减乘除四个按钮
input用value取值
inerText ：取出标签的文本内容
innerHTML ： 取出标签中的1所有内容 包括标签本身
outHTML：
outerHTML：
eval（） 计算内部表达式的值；
-->
<legend>计算器</legend>
第一个<input id="one" />
第二个<input id="two" /><br />
<button onclick="add()">+</button>
<button onclick="jian()">-</button>
<button onclick="cheng()">*</button>
<button onclick="chu()">/</button>
<br />
结果：<span style="border: 1px solid red;" id="result"></span>
</fieldset>
<script type="text/javascript">
function add(){
var oneval=document.getElementById("one").value;
var twoval=document.getElementById("two").value;
document.getElementById("result").innerHTML=Number(oneval)+Number(twoval);
}
function jian(){
var oneval=document.getElementById("one").value;
var twoval=document.getElementById("two").value;
document.getElementById("result").innerHTML=Number(oneval)-Number(twoval);
}
function cheng(){
var oneval=document.getElementById("one").value;
var twoval=document.getElementById("two").value;
document.getElementById("result").innerHTML=Number(oneval)*Number(twoval);
}
function chu(){
var oneval=document.getElementById("one").value;
var twoval=document.getElementById("two").value;
document.getElementById("result").innerHTML=Number(oneval)/Number(twoval);
}
//经过观察发现 代码冗余 获取值的代码冗余，思考：可以将冗余代码抽取出来。
</script>
另一个版本
<fieldset id="">
<legend>计算器</legend>
第一个<input id="one" />
第二个<input id="two" /><br />
<button onclick="jian(this)">+</button>
<button onclick="jian(this)">-</button>
<button onclick="jian(this)">*</button>
<button onclick="jian(this)">/</button>
<br />
结果：<span style="border: 1px solid red;" id="result"></span>
</fieldset>
<script type="text/javascript">
function jian(a){
var oneval=document.getElementById("one").value;
var twoval=document.getElementById("two").value;
document.getElementById("result").value=eval(oneval+a.innerText+twoval);
innerText 表示 获取标签中的文本（内容） 不包含标签
innerHTML表示 获取标签中的所有内容（包含标签+本身）
outerHTML 表示获取当前标签中的所有内容 包含标签本身
如果是表单元素 取值用value 属性
如果是非表单元素 取值用 innerText，innerHTML，outerHTML
二、对象
2.1什么是对象
在软件系统中，对象具有唯一的标识符，对象包括属性（Properties）和（行为）方法（Methods），属性就是需要记忆的信息，方法就是对象能够提供的服务。
2.2js获取对象
js对象：html中的标签。
//根据id获取元素对象 获取的是一个
document.getElementById(“id”);
三、事件
3.1、什么是事件
事件是可以被控件识别的操作，如按下确定按钮，选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件，如窗体的加载、单击、双击等事件，编辑框（文本框）的文本改变事件，等等。
发生的某件事情。通过html元素触发的事情。
3.2常用事件
1鼠标事件
| * onclick | 点击事件 |
|---|---|
| ondblclick | 双击事件 |
| onmousedown | 鼠标按下 |
| onmouseup | 鼠标松开 |
| onmouseover | 鼠标移入 |
| onmouseout | 鼠标移开 |
2键盘事件
| onkeydown | 按下 |
|---|---|
| onkeyup | 松开 |
| onkeypress | 按下并松开 |
| *onload | 页面加载完成时触发 |
|---|---|
| *onunload | 页面退出时触发 |
4.表单事件
| onblur | 元素失去焦点时触发 | 2 |
|---|---|---|
| * onchange | 该事件在表单元素的内容改变时触发( , , , 和 ) | 2 |
| * onfocus | 元素获取焦点时触发 | 2 |
| oninput | 元素获取用户输入时触发 | 3 |
| onreset | 表单重置时触发 | 2 |
| onsearch | 用户向搜索域输入文本时触发 ( <input=“search”>) | |
| onselect | 用户选取文本时触发 ( 和 ) | 2 |
| * onsubmit | 表单提交时触发 |
总结：
函数，事件，对象
总结：函数 学会函数的定义和调用
调用：直接，跟标签事件绑定
对象：document.getElementById();
、
、
、
、、
练习
:4个文本框：省 市 县 详细地址按钮触发：整体地址文本框：拼接显示在整体地址中
<body>
省：<input type="" name="" id="s" value="" />
市 ：<input type="" name="" id="shi" value="" />
县：<input type="" name="" id="x" value="" />
<button type="button" onclick="aa()" id=" ">和体</button>
详细地址<input type="" name="" id="btn" value="" />
<script type="text/javascript">
function aa(){
var sval=document.getElementById("s").value;
var shival=document.getElementById("shi").value;
var xval=document.getElementById("x").value;
document.getElementById("btn").value=(sval+shival+xval);
}
</script>
</body>