一、提示框 1. 弹出警示框 alert(); window.alert(); window 窗口 2. 控制台输出 console.log() 3. 文档打印 document 文档 document.write(); 1.下面哪种JavaScript语法格式是正确的（ ） A．echo "I enjoy JavaScript"; B．document.write( I enjoy JavaScript) C．response.write("I enjoy JavaScript ") ; D．alert("I enjoy JavaScript "); 二、 变量 Java Var aa:int = 10; Var num = 10; 字母 _ $ 开头 Var dd=100,ee=100 声明多个变量 逗号隔开 1.Javascript中, 以下声明变量语句中哪个不正确？ A、var aa; B、var bb=3; cc='good'; C、var dd = ee = 100; D、var ff=3, gg='he's good'; 三、 事件三要素 事件源 被触发的对象 名词 事件 动词 onclick onmouseover onmouseout 事件处理程序 放到函数里面就行了 事件源.事件 = function(){ 语句; } 入口函数: window.onload = function(){ } 四、 行内式 <div onclick=”alert(11)”> 内嵌式 外链式 <script type=”text/javascript” src=”xx.js”></script> 五、数据类型 Number string boolean null undefined 1.2 函数(function) 函数： 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 四大发明 造纸术 火药 指南针 印刷术 1.2.1 函数的声明 函数使用跟变量一样，需要 声明 1.2.2 自定义函数 function fun(){ alert("我是自定义函数") } fun(); // 函数不调用，自己不执行 1.2.3 函数直接量声明 var fun1 = function(){ alert("直接量声明") } fun1(); 也需要调用 1.2.4 利用Function 关键字声明 var fun2 = new Function("var a = 10; var b = 20; alert(a+b)"); fun2(); 1.2.5 变量声明提升 什么是变量提升 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 } 在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值。 var a = 18; f1(); function f1(){ var b=9; console.log(a); console.log(b); var a = '123'; } 结果是： undefined 9 1.2.6 函数参数 arguments是存储了函数传送过过来实参 Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例. arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同 arguments对象的长度是由实参个数而不是形参个数决定的 <script> function fn(a,b) { console.log(fn.length); //得到是 函数的形参的个数 //console.log(arguments); console.log(arguments.length); // 得到的是实参的个数 if(fn.length == arguments.length) { console.log(a+b); } else { console.error("对不起，您的参数不匹配，正确的参数个数为:" + fn.length); } //console.log(a+b); } fn(1,2); fn(1,2,3); </script> Var a = 10, b = 20; 等价的 Var a = 10; Var b = 20; 1.3 案例 鼠标展示 代码： var box = document.getElementById("box"); function fn(liid,bg){ // 封装函数 参数的传递 var obj = document.getElementById(liid); obj.onmouseover = function(){ box.style.backgroundImage = bg; } } fn("li01","url(images/01big.jpg)"); // 实参 fn("li02","url(images/02big.jpg)"); fn("li03","url(images/03big.jpg)"); fn("li04","url(images/04big.jpg)"); fn("li05","url(images/05big.jpg)"); 1.4 返回值 return 定义： 一个函数实际上就是一个计算过程，计算完成之后的结果就是返回值。 定义函数的返回值： 在函数内部用return来设置返回值，一个函数只能有一个返回值。 同时，终止代码的执行。 所有的自定义函数默认没有返回值； Return 后面不要换行 function $(id){ return document.getElementById(id); } $("demo").style.backgroundColor = 'purple'; $("test").style.backgroundColor = "blue"; 1.以下代码执行的结果是多少？请分析为什么？ 1 var total=10; 1 var number = square(5); 2 alert(number); 3 function square(n) { 4 total = n*n; 5 return total; 6 } 结果是 25 1.5 算术运算符 + - * / % ^ 1+1 = 2 5%2 == 1 2%5 == 2 2^3 A++ ++后置 每次自加1 先运算后自加 ++a ++前置 每次自加1 先自加 后运算 1.分析代码，得出正确的结果。 1 var a=10, b=20 , c=30; 2 ++a; 3 a++; 4 e=++a+(++b)+(c++)+a++; 5 alert(e); 77 1.6 条件语句(if) If(条件表达式) { 语句;} If() {}else {} If() else if(){} else if(){} else {} 1.7 获得焦点 失去焦点 事件 我们前面学过了 onclick 点击 onmouseover onmouseout’ 获得焦点: onfocus fao ~克死 失去焦点: onblur 不len ~~ <script> window.onload = function(){ var txt = document.getElementById("txt"); txt.onfocus = function(){ //得到焦点 //alert("得到了焦点"); //什么时候该清空呢 //用户没有输入的时候，用户第一次使用的时候 // 如果 这里input 里面的文字 是 请输入... 说明用户没有用过，就应该清空 if(txt.value == "请输入...") { txt.value = ""; txt.style.color = "#333"; } } txt.onblur = function(){ //失去焦点 //alert("失去了焦点"); //什么时候再还原呢？ //input的值是 空的时候，我们再复原 if(txt.value == "") { txt.value = "请输入..."; txt.style.color = "#ccc"; } } } </script> 1.8 this (自己的) 指的是本身 This 主要是指事件的调用者 。 className 类名 $("result").className ="wrong"; innerHTML 更换 盒子里面的内容 文字 标签都换. 表单更换内容 Input.value isNaN nan 不是一个数字 is 是 是 不是一个数字 isNaN(“12”) 如果里面的不是个数字 返回 true 否则返回false 1.9 属性和方法 手机 黑色的 5.5寸的 塑料的 铁的 外在特性 属性 手机的颜色是黑色的。 Iphone.color = “red”; 属性给值一定是等号 方法： 手机 打电话 发短信 玩游戏 聊QQ 看电影 动词 可以干什么 Iphone.tel(); 方法和属性的区别： 方法一律带有小括号 。 isNaN( ); 动词 方法给值： isNaN（“值”）; 1.9.1 表单自动获得焦点 Txt.focus(); 方法 Onfocus 事件 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var txt = document.getElementById("txt"); txt.focus(); //自动获得焦点 } </script> </head> <body> 自动获得焦点: <input type="text" id="txt"/> </body> </html> 1.9.2 鼠标经过选择表单 sele.onmouseover = function(){ this.select(); //选择 } 方法 select() 选择功能 1.10 For 循环 人生一个循环 i+=3 i=i+3 1.11 getElementsByTagName() 获取某类标签 前面我们可以得到一个盒子 通过 id 获得 getElementById() 只得到一个 盒子 我们想要获取某类标签 比如说所有 的div li span getElementsByTagName(); 很多个所以是复数 很多个 得到的是一个伪数组。 Lis 数组 Lis[索引号] 一个