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>