Day48
1.流程控制语句
if else
for
for-in(遍历数组时，跟Java是否一样)
While
do while
break 语句用于跳出循环
continue 用于跳过循环中的一个迭代
2.函数
2.1 JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function
function 函数名(参数列表){
…代码块…
}
分类：
无参无返回值的函数
带参数的函数
带返回值的方法
注意：函数就是方法
<body>
<script type="text/javascript">
//无参无返回值的函数
function fun01(){
console.log("用良心做教育1");
}
fun01();
//带参数的函数
//注意：形参不需要加类型，调用方法时可以传参也可以不传参
function fun02(a,b){
console.log("用良心做教育2：" + a + " -- " + b);
}
fun02();
fun02(10,20);
fun02("xxx","yyy");
fun02("abc",12345);
//带返回值的方法
//注意：JS函数里的返回值不用像Java方法里必须指定返回值类型
function fun03(){
return "用良心做教育3";
}
var v = fun03();
console.log(v);
</script>
</body>
2.1.1 函数也是数据
函数也是一种数据，我们可以把函数赋值给一个变量
var add = function(a,b,c){
return a+b+c;
}
2.1.2 函数的重载
注意：JS的函数里没有重载的概念
<body>
<script type="text/javascript">
function fun(a,b){
alert(a+b);
}
function fun(a,b,c){
alert(a+b+c);
}
//a - 10
//b - 20
//c - undefind
fun(10,20);
</script>
</body>
2.2.3 函数的递归
注意：递归是一种思想，只要是面向对象的语言都有这个思想
需求：设计一个函数，传入n，求n的阶乘
<body>
<script type="text/javascript">
function fun(n){
if(n != 1){
return fun(n-1)*n;
}else{
return 1;
}
}
var num = fun(5);
alert(num);
</script>
</body>
2.2 系统提供的预定义函数
parseInt()：试图将其收到的任何输入值转换成整数类型，转换失败则返回NaN
parseFloat()：同上类似
isNaN(xxx)：判断是否为非数字
isFinite(xxxx)：判断输入的是否是一个既非Infinity也非NaN的数字
eval()：会将其输入的字符串当作javascript代码来执行 (重要！！！！)
<body>
<script type="text/javascript">
console.log("判断参数是否是数字：" + isFinite("abc"));//false
console.log("判断参数是否不是数字：" + isNaN("abc"));//true
console.log("将字符串转换为整数：" + parseInt("100.123"));//100
console.log("将字符串转换为小数：" + parseFloat("100.123"));//100.123
var str = "alert('用良心做教育');";
eval(str);//认为字符串为js代码去执行
</script>
</body>
3.DOM
采用DOM的方式来操作网页的元素
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
3.1 HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型
HTML DOM 模型被构造为对象的树。
3.2 HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
3.3 查找元素
通常，通过 JavaScript，您需要操作 HTML 元素
为了做到这件事情，您必须首先找到该元素，有三种方法来做这件事：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
注意：document表示该文档，就是dom树
3.3.1 通过id查找 getElementById
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id
注意：getElementById获取到的是单个对象
<body>
<span id="span01">用良心做教育</span>
<br />
<span>做真实的自己</span>
<script type="text/javascript">
//通过id获取元素
var span01 = document.getElementById("span01");
//绑定单击事件
span01.onclick = function(){
//设置内容
span01.innerHTML = "做真实的自己";
}
</script>
</body>
3.3.2 通过标签名查找 getElementsByTagName
通过标签名查找 HTML 元素
注意：getElementsByTagName获取到的是数组，要用[0]，[1]去选择
<body>
<span>用良心做教育</span>
<br />
<span>做真实的自己</span>
<script type="text/javascript">
//通过标签获取元素数组
var span01 = document.getElementsByTagName("span")[0];
//绑定单击事件
span01.onclick = function(){
//设置内容
span01.innerHTML = "xxxx";
}
</script>
</body>
3.3.3 通过class查找 getElementsByClassName
通过class查找 HTML 元素
注意：getElementsByClassName获取到的是数组，要用[0]，[1]去选择
<body>
<span class="myclass">用良心做教育</span>
<br />
<span class="myclass">做真实的自己</span>
<script type="text/javascript">
//通过class属性获取元素数组
var span01 = document.getElementsByClassName("myclass")[0];
//绑定单击事件
span01.onclick = function(){
//设置内容
span01.innerHTML = "xxxx";
}
</script>
</body>
3.3.4 通过name查找 getElementsByName
注意：getElementsByName获取到的是数组，要用[0]，[1]去选择
<body>
<img name="xxx" src="../../img/小米.jpg" />
<img name="xxx" src="../../img/小米.jpg" />
<script type="text/javascript">
//通过name属性获取元素数组
var img = document.getElementsByName("xxx")[0];
//绑定单击事件
img.onclick = function(){
//设置属性
img.src = "../../img/华为.jpg";
}
</script>
</body>
3.4 DOM_HTML 操作元素
3.4.1 操作内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
<body>
<button onclick="fun01()">获取内容 - innerText</button>
<button onclick="fun02()">设置内容 - innerText</button>
<br />
<span>用良心做教育</span>
<br />
<button onclick="fun03()">获取内容 - innerHTML</button>
<button onclick="fun04()">设置内容 - innerHTML</button>
<br />
<span>用良心做教育</span>
<script type="text/javascript">
var span01 = document.getElementsByTagName("span")[0];
var span02 = document.getElementsByTagName("span")[1];
function fun01(){
console.log(span01.innerText);
}
function fun02(){
span01.innerText = "<h1>做真实的自己</h1>";
}
function fun03(){
console.log(span02.innerHTML);
}
function fun04(){
//把文本当做html标签设置
span02.innerHTML = "<h1>做真实的自己</h1>";
}
</script>
</body>
innerHTML，innerText的区别：
innerHTML：把文本当做html标签设置
innerText：文本就是文本
3.4.2 操作属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
获取属性值：getAttribute
修改属性值：setAttribute
<body>
<button onclick="fun01()">获取属性</button>
<button onclick="fun02()">设置属性</button>
<br />
<img src="../../img/小米.jpg" width="100px" height="100px" />
<br />
<script type="text/javascript">
var img1 = document.getElementsByTagName("img")[0];
var img2 = document.getElementsByTagName("img")[1];
function fun01(){
console.log(img2.getAttribute("src"));
console.log(img2.getAttribute("width"));
console.log(img2.getAttribute("height"));
}
function fun02(){
img2.setAttribute("src","../../img/华为.jpg");
img2.setAttribute("width","100%");
img2.setAttribute("height","100%");
}
</script>
</body>
3.4.3 操作css样式
如需改变 HTML 元素的css样式，请使用这个语法：
document.getElementById(id).style.property=new style
<body>
<button onclick="fun01()">获取样式</button>
<button onclick="fun02()">设置样式</button>
<br />
<span>用良心做教育</span>
<script type="text/javascript">
var span = document.getElementsByTagName("span")[0]
function fun01(){
console.log(span.style.color);
console.log(span.style.fontSize);
}
function fun02(){
span.style.color = "red";
span.style.fontSize = "50px";
}
</script>
</body>
3.5 事件
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript
HTML 事件的例子：
l 当用户点击鼠标时
l 当网页已加载时
l 当鼠标移动到元素上时
l 当输入字段被改变时
l 当提交 HTML 表单时
3.5.1 onclick 单击事件
点击之后，更改标题内容
this代表当前被点击的对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 onclick="fun01()">用良心做教育</h1>
<script type="text/javascript">
var h1 = document.getElementsByTagName("h1")[0];
function fun01(){
h1.innerText = "做真实的自己";
}
</script>
</body>
</html>
换一种写法：
this代表当前被点击的对象
obj是随便写的一个对象
<body>
<h1 onclick="fun01(this)">用良心做教育</h1>
<script type="text/javascript">
function fun01(obj){
obj.innerText = "做真实的自己";
}
</script>
</body>
换一种写法：
<body>
<h1>用良心做教育</h1>
<script type="text/javascript">
var h1 = document.getElementsByTagName("h1")[0];
//绑定单击事件
h1.onclick = function(){
this.innerText = "做真实的自己";
}
</script>
</body>
3.5.2 onload 页面加载事件
onload 一般可以来做一些网页的环境准备工作
页面加载事件：事件会在页面元素和图像加载完成后立即发生
注意：js是一行一行去执行的
<title></title>
<script type="text/javascript">
//页面加载事件：事件会在页面元素和图像加载完成后立即发生
window.onload = function(){
var h1 = document.getElementsByTagName("h1")[0];
h1.onclick = function(){
this.innerText = "做真实的自己";
}
}
</script>
</head>
<body>
<h1>用良心做教育</h1>
</body>
3.5.3 键盘事件
监听器：
onkeydown：键盘按下事件
onkeypress：键盘按下事件 - 功能键(上下左右、删除键…)是不会被触发的
onkeyup：键盘松开事件
<body>
<input type="text"
onkeydown="myDown()"
onkeypress="myPress()"
onkeyup="myUp()"
/>
<script type="text/javascript">
function myDown(){//键盘按下事件
console.log("down");
}
function myPress(){//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的
console.log("press");
}
function myUp(){//键盘松开事件
console.log("up");
}
</script>
</body>
案例，设置一个文本框，每敲一个字母，会触发将输入文本转换为大写的函数
<body>
<input type="text"
onkeyup="myUp(this)"
/>
<script type="text/javascript">
function myUp(obj){
//获取value属性
var v = obj.value;
//转大写
v = v.toUpperCase();
//设置value属性
obj.value = v;
}
</script>
</body>
3.5.4 鼠标移动事件
onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触
<body>
<img src="../../img/小米.jpg" width="100px" height="100px"
onmousedown="myDown()"
onmouseup="myUp()"
onmousemove="myMove()"
onmouseover="myOver()"
onmouseout="myOut()"
/>
<script type="text/javascript">
function myDown(){//鼠标按下事件
console.log("down");
}
function myUp(){//鼠标松开事件
console.log("up");
}
function myMove(){//鼠标移动事件
console.log("move");
}
function myOver(){//鼠标移入事件
console.log("over");
}
function myOut(){//鼠标移出事件
console.log("out");
}
</script>
</body>
案例：图片，移入图片中就设置高亮，移出就暗沉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
width: 100px;
height: 100px;
opacity: 0.3;/*设置透明度*/
}
</style>
</head>
<body>
<img src="../../img/touxiang01.jpg" />
<img src="../../img/touxiang02.jpg" />
<img src="../../img/touxiang03.jpg" />
<img src="../../img/tx1.jpg" />
<img src="../../img/tx2.jpg" />
<img src="../../img/tx3.jpg" />
<img src="../../img/波多野结衣.jpg" />
<script type="text/javascript">
//动态绑定事件
var imgArr = document.getElementsByTagName("img");
for(var i = 0;i<imgArr.length;i++){
var img = imgArr[i];
img.onmouseover = function(){
this.style.opacity = 1;
}
img.onmouseout = function(){
this.style.opacity = 0.3;
}
}
</script>
</body>
</html>
运行结果：
3.5.5 焦点事件 onfocus/onblur
onfocus：获取焦点事件
onblur：失去焦点事件
<body>
<input type="text"
onfocus="myFocus()"
onblur="myBlur()"
/>
<script type="text/javascript">
function myFocus(){//获取焦点事件
console.log("focus");
}
function myBlur(){//失去焦点事件
console.log("blur");
}
</script>
</body>
案例：写一个注册的文本框，默认显示“请输入账号…”，光标定位到之后，自动将里面的信息清除掉
<body>
<input type="text"
value="请输入账号..."//value的内容可以直接显示在文本框里面
οnfοcus="myFocus(this)"
οnblur="myBlur(this)"
/>
<script type="text/javascript">
function myFocus(obj){//获取焦点事件
if(obj.value == "请输入账号..."){
obj.value = "";
}
}
function myBlur(obj){//失去焦点事件
//获取该函数里的代码，如果当前浏览器支持该函数，就返回函数里的代码（字符串），如果不支持就返回undefined
//alert(obj.value.trim);
//判断浏览器是否兼容次方法
if(obj.value.trim){
if(obj.value.trim() == ""){
obj.value = "请输入账号...";
}
}else{
//注意：IE老版本是不支持trim()
//将字符串的首尾空格的字符替换成空字符串，以达到去空格的目的
if(obj.value.replace(/(^\s+)|(\s+$)/g,"") == ""){
obj.value = "请输入账号...";
}
}
}
</script>
</body>
