JavaScript
第一章 函数
函数是完成某个特定功能的一组语句
函数的主要作用是减少重复编写程序，也就是说一段代码可能在多个地方都要用到，可以将这段代码封装到函数中，在各处只需要根据名称调用函数即可
函数无形中还有一个作用，那就是如果某个模块代码非常多，可以提取几个函数，然后通过调用函数完成模块功能，这样代码看起来更加简洁，可读性更强
例如
alert('hello');
alert('欢迎光临');
alert('这是我的代码');
如果我们在js中需要重复使用以上三句代码，就需要多次书写
alert('hello');
alert('欢迎光临');
alert('这是我的代码');
alert('hello');
alert('欢迎光临');
alert('这是我的代码');
alert('hello');
alert('欢迎光临');
alert('这是我的代码');
为了避免这种重复性的工作 我们把这三句代码用一个{}包裹起来，看作一个整体，并且给这个整体起一个名字
function say(){
alert('hello');
alert('欢迎光临');
alert('这是我的代码')
}
在此时,我们得到了一个函数,函数只有在调用时才能执行,我们如果想让浏览器多次弹出这三行代码 只需要这样操作:
function say(){
alert('hello');
alert('欢迎光临');
alert('这是我的代码')
}
say();
say();
say();
1.1 函数定义/调用
如上例 定义一个函数非常简单
function 函数名(){
函数代码;
}
说明
- function定义函数的关键字 类似于 var，浏览器看到function，就知道后面是函数
- "函数名" 即为为函数起的名字
- "函数代码"即为完成特定功能的代码
我们来编写一个实现两个数相加的简单函数,并给函数起一个有意义的名字: 'add'
代码如下:
function add(){
var sum = 3 + 2;
alert(sum);
}
我们只需要在合适的地方调用即可
add();
说明：调用函数的语法是：函数名称()，所以()是函数调用的标志
1.2 函数的参数
可以在调用函数时传入值,使函数的调用更为灵活
比如我们想要编写一个能够帮助我们完成任意两个数之和的计算函数,'add1'
代码如下:
function add1(a,b){
var sum = a + b;
alert(sum);
}
add1(1,2);
如果确定函数需要传入参数，则在函数定义的时候,可以在小括号中定义"形参",形式上的参数,多个形参用逗号分隔;
在我们调用函数的时候,在调用的小括号中传入"实参",实际上的参数,多个实参用逗号分隔;
在调用的时候,实参会按照顺序赋值给形参,此时我们的a和b就有了具体的值1和2,我们的sum也就有了具体的求和结果;
注意
形参和实参是一一对应的;
如果不一一对应呢?
function fn(a,b){
console.log(a+b);
}
fn(1,2,3);
多一个可能没有关系,大不了函数内部没法用
function fn(a,b){
console.log(a+b);
}
fn(1);
少一个就会出现毛病,在当前代码下,形参b相当于声明之后没有赋值,所以b为undefined;
一切的所有的数据类型 都可以当做实参传入;
1.2.1 案例
使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数
第一步： 编写代码完成一个函数的定义吧。
第二步： 我们来补充函数体中的控制语句，完成函数功能吧。
提示:再想一想，两个整数比较有三种情况，大于，等于或小于，所以我们需要控制语句判断(if...else if)。第三步： 写好的函数，我们就可以任意调用函数了。通过函数调用实现两组数值中，返回较大值吧。
function app(a,b){
if(a>b){
alert(a);
}else if(a<b){
alert(b);
}else{
alert("请重新输入")
}
}
app(1,2);
1.3 函数的返回值
在js中 凡是运算皆有返回值,对于函数而言,我们执行完函数之后 也可以获得返回值;
function app(a,b){
if(a>b){
return a;
}else if(a<b){
return b;
}else{
return "请重新输入";
}
}
var val = app(3,4);
我们在获得结果的时候不去弹出,而是return,函数运行结束之后会得到我们return的结果
思考：为什么要返回计算结果，而不是像上面那样直接在函数内部弹出。。。。
需要注意的是,函数内部一旦遇到return 函数会立即停止执行,并返回return的值;
function app(){
return 123;
alert('hahahaha');
}
函数执行之后 并没有弹出任何东西; 在遇到return的时候就停止执行了;
1.4 作用域
看下面案例
function f1() {
var a = 10;
}
console.log(a);
结果报错了：Uncaught ReferenceError: a is not defined
说明在函数外部无法使用函数内部定义的变量
再看下面案例
var a = 10;
function f1() {
console.log(a)
}
f1();
输出结果为10
说明：在函数内部可以调用外部的变量
再看一个案例
var a = 10;
function f1() {
var a = 20;
function f2() {
var a = 30;
console.log(a);
}
f2();
}
f1();
输出结果 30
修改一下
var a = 10;
function f1() {
var a = 20;
function f2() {
//此行被删除
console.log(a);
}
f2();
}
f1();
输出结果为20
再修改一下
var a = 10;
function f1() {
//此行被删除
function f2() {
//此行被删除
console.log(a);
}
f2();
}
f1();
输出结果 10
总结：
函数内部使用变量时，首先在自身内部寻找
如果在自身内部没有找到，则到上层函数中寻找，如果找到，则使用这个变量，如果找不到，则一直像上寻找，如果最终也找不到，则值为undifiend
事件
我们常见的网页效果很多都是对我们的键盘,鼠标等动作进行的反馈,比如加入购物车时商品会抛向购物车,鼠标放到轮播图上轮播会暂停,鼠标放到商品上会出现放大镜效果,这些都是浏览器给我们的反馈.
如果我们想要做出这样的效果,首先要学会使用事件;
可以这么认为，浏览器通过一系列的事件不断的监视着用户在浏览器上的操作，如单击、鼠标移动、按下键盘上某个键等等，监视到浏览器的操作后，可以通过开发者自己编写的代码处理用户的操作
5.1 事件演示
我们想要操作HTML元素做出一定的变化,首先需要找到它;
document.getElementById方法是根据元素的id找到元素，这里先记住，后面会详细讲解
```html
<div id="box">点我吧</div>
<script>
var oBox = document.getElementById('box');
console.log(oBox);
</script>通过上述方法我们可以很方便的通过id获取到需要寻找的div
获取之后为其添加单击事件
~~~javascript
//我点击盒子,系统弹窗
oBox.onclick = function(){
alert('为啥点我?');
}
~~~
总结：这即是最简单的事件监听,`元素`+`.`+`事件函数名` = `函数体`,当满足事件函数的事件发生之后,函数体就会执行;
这是，用户如果使用鼠标左键单击 div 后，就会弹出窗体
关于上面的事件，可以这样形象的理解：
我踹了你一脚,你得有点反馈吧?
你等着我踹,当我踹的时候,进行反馈
### 5.2 案例
**案例:** 第一个简单的js效果
```html
<body>
<style>
#obox{
300px;
height: 300px;
background: blue;
}
#obox2{
300px;
height: 300px;
background: red
}
</style>
<div id="obox">
</div>
</body>
<script>
var oBox = document.getElementById('obox');
oBox.onclick = function(){
oBox.id = 'obox2';
}
</script>
我们可以通过操作 对象的属性 完成一些简单的效果;该div用js获取到之后就是我们可以操作的对象,它的属性和方法都可以被我们获取或者更改;
作业:
查找整理js还有哪些事件?
5.3 js事件列表
一般事件
| 事件 | 介绍 |
|---|---|
| onclick | 鼠标点击时触发此事件 |
| ondblclick | 鼠标双击时触发此事件 |
| onmousedown | 按下鼠标时触发此事件 |
| onmouseup | 鼠标按下后松开鼠标时触发此事件 |
| onmouseover | 当鼠标移动到某对象范围的上方时触发此事件 |
| onmouseout | 当鼠标离开某对象范围时触发此事件 |
| onmouseenter | 当鼠标移动到某对象范围的上方时触发此事件 |
| onmouseleave | 当鼠标从某对象范围的上方移除后触发此事件 |
| onmousemove | 鼠标移动时触发此事件 |
| onkeypress | 当键盘上的某个键被按下并且释放时触发此事件. |
| onkeydown | 当键盘上某个按键被按下时触发此事件 |
| onkeyup | 当键盘上某个按键被按放开时触发此事件 |
页面相关事件
onload |页面内容完成时触发此事件 onmove |浏览器的窗口被移动时触发此事件
表单相关事件
| 事件 | 介绍 |
|---|---|
| onblur | 当前元素失去焦点时触发此事件 |
| onchange | 当前元素失去焦点并且元素的内容发生改变而触发此事件 |
| onfocus | 当某个元素获得焦点时触发此事件 |
操作元素
6.1 innerHTML
我们想把上面例子中的obox这个div内部文字修改成为连续点我!,该如何操作?
同操作元素,我们想要操作文本,首先还是要"找到它!"
<div id="obox">点我吧</div>
<script>
var oBox = document.getElementById('obox');
oBox.onclick = function(){
console.log(oBox.innerHTML);
}
</script>
我们可以很轻松的得到div内部的文本,修改也变的非常方便,只需要重新赋值即可;
oBox.onclick = function(){
oBox.innerHTML = '连续点我';
}
但仅仅是这样,谈何"暴力"?
我们不仅仅可以修改元素内部的文本,甚至可以加上新的元素!
oBox.innerHTML = '<h1>试试超大的点击效果</h1>'
案例: 读古诗
<h1 id='title'></h1>
<div id='content'></div>
<button id='btn'>点击读古诗</button>
<script>
var arr = ['悯农','望月怀古','江雪']
var arr1 = ['锄禾日当午,汗滴禾下土','海上生明月,天涯共此时','千山鸟飞绝,万径人踪灭']
var btn = document.getElementById('btn');
var title = document.getElementById('title');
var content = document.getElementById('content');
btn.onclick = function(){
var tag = Math.floor(Math.random()*arr.length);
title.innerHTML = arr[tag];
content.innerHTML = arr1[tag];
}
</script>
6.2 innerText
innerHTML可以帮助我们暴力的修改节点内的内容,但是innerHTML却不是w3c标准,而是被各大浏览器'私下'公认的标准
如果我们仅仅希望修改节点内的文本元素,可以使用innerText
<div id="obox">点我吧</div>
<script>
var oBox = document.getElementById('obox');
oBox.onclick = function(){
oBox.innerText = '<h1>试试超大的点击效果</h1>'
}
</script>
最终 带有样式的标签也被转换成了文字;
总结：我们发现，上面两个属性修改的其实就是标签的开始标记和结束标记之间的文本
获取表单元素的值
对于表单元素来说,value属性的值即为表单元素值,这个值是不能采用innerHTML获取到的;我们只需要使用value直接获取即可
<input type="text" name="name" id="inp" value="hello">
<script>
var inp = document.getElementById('inp');
console.log(inp.value);
</script>
非常方便;
7.1 动态获取表单元素的值
我们的表单元素的值需要被记录的情况无非以下三种
- 有人输入时
- 表单值改变/切换时
- 表单提交时
为此我们分别讲解
7.1 表单输入时获取表单值
当表单被输入---当...时,我们知道此时应该使用事件了,那么该使用什么事件呢?表单输入一般使用的是键盘,所以我们只需要使用键盘事件即可
<input type="text" name="name" id="inp" value="hello">
<script>
var inp = document.getElementById('inp');
inp.onkeyup = function(){
console.log(inp.value);
}
</script>
7.2 表单内容改变/切换时获取表单值
一般情况下,下拉菜单经常切换表单值
<select id="inp">
<option value="0">保定</option>
<option value="1">石家庄</option>
<option value="2">邢台</option>
</select>
<script>
var inp = document.getElementById('inp');
inp.onchange = function(){
console.log(inp.value);
}
</script>
案例: 二级下拉菜单
<select id="pro">
<option value="0">请选择</option>
<option value="1">北京</option>
<option value="2">河北</option>
</select>
<select id="city">
</select>
<script>
var citys = [[],['朝阳','海淀','昌平'],['保定','石家庄','唐山']];
var pro = document.getElementById('pro');
var city = document.getElementById('city');
pro.onchange = function(){
var val = pro.value;
//根据pro的值获取省份的下标
var str = '';
for(var i = 0;i<citys[val].length;i++){
//遍历该省份数组中的城市,拼接成为option
str += '<option value="'+ i +'">'+ citys[val][i] +'</option>';
}
city.innerHTML = str;
}
</script>
7.3 表单提交时获取表单值
当我们按下表单提交按钮时,需要获取表单内容
<form action="" id="fom">
<input type="text" name="name" id="inp">
<input type="submit" value="提交">
</form>
<script>
var fom = document.getElementById('fom');
var inp = document.getElementById('inp');
fom.onsubmit = function(){
console.log(inp.value);
return false;
}