一、函数声明
函数： 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1.自定义函数 需要调用 function fun(){} ;fun();
2.函数直接量声明 用var声明 也需要调用 var fun = function(){} fun();
3.利用function关键字声明 var fun = new function (); fun();
二、变量提升
1 function fun(){
2 console.log(num);
3 var num = 20;
4 }
相当于
5 function fun(){
6 var num;
7 console.log(num);
8 Num = 20;
9 }
在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值。
三、函数参数
arguments是存储了函数传送过过来实参
形参
实参
实例：鼠标滑过显示背景图实例 写了三遍 如下
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
#box {
height: 70px;
width: 360px;
padding-top: 360px;
border:1px solid #ccc;
margin:100px auto;
overflow: hidden;
background: url(images/01big.jpg) no-repeat;
}
#box ul{
overflow: hidden;
border-top:1px solid #ccc;
}
#box li {
float: left;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
function fun(liid,bg){
var liid = document.getElementById(liid);
liid.onmouseover = function(){
box.style.backgroundImage = (bg);
}
}
fun("01","url(images/01big.jpg)");
fun("02","url(images/02big.jpg)");
fun("03","url(images/03big.jpg)");
fun("04","url(images/04big.jpg)");
fun("05","url(images/05big.jpg)");
}
</script>
</head>
<body>
<div id="box">
<ul>
<li id="01"></li>
<li id="02"></li>
<li id="03"></li>
<li id="04"></li>
<li id="05"></li>
</ul>
</div>
</body>
</html>
四、return返回值
1.一个函数就是一个计算过程，计算结果就是返回值。
- 在函数内部用return来设置返回值，一个函数只能有一个返回值。
同时，终止代码的执行。
3.return不可以换行。
4.所有的自定义函数默认没有返回值。
五、$id函数
function $(id){
return documeng.getElementById(id);
}
$("demo").style.color = 'pink';
六、算数运算符
- / % ^
- A++ ++后置 每次自加1 先运算后自加
++a ++前置 每次自加1 先自加 后运算
七、if语句
If(条件表达式) { 语句;}
If() {}
else {}
If()
else if(){}
else if(){}
else {}
小例子：
function $(id){ return document.getElementById(id);}
$("btn").onclick = function(){
//alert(11);
//alert($("txt").value); // 获得表单的值
if($("txt").value == "嘿嘿")
{
alert("恭喜中奖");
}
else
{
alert("抱歉");
}
}
}
八、获得焦点，失去焦点事件
例子：
<script type="text/javascript">
window.onload = function () {
var txt = document.getElementById("txt");
txt.onfocus = function(){
if(txt.value == "请输入..."){
txt.value = "";
txt.style.color = "black";
}
}
txt.onblur = function(){
if(txt.value == ""){//在这里的值要用双等号
txt.value = "请输入...";
txt.style.color = "gray";
}
}
}
</script>
==是关系运算符号，=是赋值运算符号。
if语句，就是当括号里为真时候成立。
if（i==1），就是当i==1时，执行下面的语句；
if（i=1），就是先给i赋值1，然后执行下面语句。只要不赋值0，i=2或其他，都是表示if条件成立的。
九、简单的表单验证
1.this 事件的调用者
2.className 类的名字 在js中使用
3.innerHTML 更换盒子里内容 文字标签都能换。
4.表单内容 input.value
5.isNaN(“12”) 如果里面的不是个数字 返回 true 否则返回false
isNaN() 不是一个数字。
小例子
<script type="text/javascript">
window.onload = function(){
function $(id) {
return document.getElementById(id);// 不能加引号+
}
$("txt").onblur = function(){
if(this.value == "") {
$("result").className = "wrong";
$("result").innerHTML = "请输入";
}
else if(this.value>150 ||this.value < 0){
{
$("result").className = "wrong";
$("result").innerHTML = "请输入正确范围";
}
}
else if(isNaN(this.value)){
$("result").className = "wrong";
$("result").innerHTML = "请输入数字";
}
else {
$("result").className = "right";
$("result").innerHTML = "输入正确";
}
}
}
</script>
<div class="box">
语文: <input type="text" id="txt" /> <span id="result">请输入成绩</span>
</div>
十、方法和属性
-
Iphone.color = “red”; 属性给值一定是等号
isNaN（“值”）; 方法给值： 一定带括号 -
onfocus 这是一个事件
txt.focus() 这是获得焦点的方法 -
鼠标经过选择表单
a.onmouseover = function(){
this.select()
}
十一、for循环
金字塔实例
+i+是固定语法：
<script>
for (var i = 1; i <= 100 ; i+=5)
{
document.write("<hr width= "+i+"%/>");
}
</script>
作业：
求阶乘
<script type="text/javascript">
var a = parseInt(prompt("请输入一个数"));
var sum = 1;
for (var i = 1; i <= a; i++) {
sum = sum * i;
}
alert(sum);
</script>
网友评论