<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 需要使用script引入外部的js文件来执行 src 属性专门用来引入js文件路径（可以相对路径，也可以绝对路径） script标签可以用来定义js代码，也可以用来引入js文件，但是两个功能二选一，不能同时使用 --> <!--<script type="text/javascript" src="test2.js"> </script>--> <script type="text/javascript"> var i; alert(i);//undefined i=12; //typeof() javascript语言提供过的一个函数，返回变量的数据类型 alert(typeof(i));//number i="abc"; alert(typeof(i));//string var a = 12; var b = "abc"; alert(a*b);//NaN function fun(){ alert(arguments.length);//2 alert(arguments[0]);//abc alert(arguments[1]);//123 for(var i ;i<arguments.length,i++){ alert(arguments[i]); } } fun("abc",123); </script> </head> <body> <!-- 变量： 数值类型 number 字符串类型 string 对象类型 object 布尔类型 boolean 函数类型 function 特殊的值 null 空值 undefined 未定义，所有js变狼为赋于初始值的时候，默认的值都是undefined NaN not a number 非数字，非数值 定义变量的格式 var 变量名; var 变量名 = 值; 关系运算 等于 == 等于是简单的做i面值的比较 全等于 === 除了比较字面值，还会比较两个变量的数据类型 0、null、undefined “”（空串）都认为是false 逻辑运算 在javascript中，所有的变量，都可以作为一个boolean类型的变量去使用 &&且运算 有两种情况： 当表达式全为真的时候，返回最后一个表达式的值 当表达式中，有一个为假的时候，返回第一个为假的表达式的值 ||或运算 有两种情况： 当表达式全为假的时候，返回最后一个表达式的值 当表达式中，有一个为真的时候，返回第一个为真的表达式的值 数组 1.数组的定义 var 数组名 =[]; 空数组 var 数组名 =[1,'abc',true]; 只要通过数组的下标赋值，那么最大的下标值，就会自动的给数组扩容 函数 function 函数名(形参列表){ 函数体 } 在JavaScript中，如何定义带有返回值的函数： 只需要在函数体内直接返回return值就可 函数的第二种定义方式 var 函数名 = function(参数列表){ 函数体} js中不允许重载函数，如果有重载，直接覆盖上次的定义 argument隐形参数： 在function函数中不需要定义，但却可以直接用来获取所有参数的变量。 隐形参数像Java基础中的可变长参数一样 js中的自定义对象 对象的定义： var 变量名 = new Object(); --对象实例 变量名.属性名 = 值； --定义属性 变量名.函数名 = function(){} --定义函数 对象的访问： 变量名.属性名、变量名.函数名 方式二： 对象的定义 var 变量名 = { 属性名 ： 值, 属性名： 值, 函数名： function(){ } } js中的时间 常用的事件 ： onload 加载完成事件： 也米娜加载完成之后，常用于页面js代码初始化操作 onclick 单击事件 ：常用于按钮的点击响应操作 onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法 onchange 内容发生改变事件 常用于下拉框和输入框内容改变后操作 onsubmit 表单提交事件 常用于表单提交前，验证所有表单项是否合法 事件的注册（或绑定）: 告诉浏览器，当事件响应后要执行那些操作代码 分为两类： 静态注册 或 动态注册 静态注册： 通过html标签的事件属性直接赋予事件响应后的代码 动态注册：先通过js代码得到标签的dom标签，再通过dom对象.事件名=function(){} 这种形式赋予事件响应后的代码 动态注册基本步骤： 1.获取标签对象 2.标签对象.事件名 = function(){} --> </body> </html>
alert("方式二");
onload、onclick、onblur、onchange、onsubmit事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>onload事件</title> <script type="text/javascript"> //onload事件 /* function onload() { alert('静态注册onload事件，所有代码'); }*/ //onload事件动态注册，是固定写法 window.onload= function() { alert('动态注册onload事件，所有代码'); } </script> </head> <!--静态onload事件 onload是浏览器解析完页面之后，自动执行 <script type="text/javascript"> //onload事件 function onload() { alert('静态注册onload事件，所有代码'); } </script> 在body标签内 <body onload="onload();"> --> <body > </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //onclick 用于按钮的点击响应操作 function onclickfn() { alert("静态注册onclick事件"); } //动态注册onlick事件 window.onload = function () { //1.获取标签对象 /* document 是JavaScript语言提供的一个对象(文件) getElementById 通过id属性获取标签对象 */ var btn02obj= document.getElementById("btn02"); //2.通过标签对象.事件名= function(){} btn02obj.onclick = function () { alert("动态按钮"); } } </script> </head> <body> <!--静态注册--> <button onclick="onclickfn();">按钮1</button> <button id="btn02">按钮2</button> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //onblur 用于输入框失去焦点，验证输入内容是否正确 // 静态注册失去焦点事件 function onblurfn() { //console是控制台对象，专门用来向浏览器的控制器打印输出，用于测试使用 //log是打印的方法 console.log("静态注册失去焦点"); } //动态注册 window.onload = function () { //1.获取标签对象 var elementById = document.getElementById("text02"); //2.通过标签对象，获取事件名 elementById.onblur = function () { console.log("动态失去焦点"); } } </script> </head> <br> 用户名：<input type="text" onblur="onblurfn();"></br> 密码：<input type="text" id="text02"></br> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //onchange 下拉表或输入框内容发生改变后操作 function onchangefn() { alert("课程改变"); } window.onload = function () { var elementById = document.getElementById("teacher"); elementById.onchange=function () { alert("老师已经改变"); } } </script> </head> <body> 请选择喜欢的课程： <select onchange="onchangefn();"> <option> java</option></br> <option> web</option></br> <option> oracle</option></br> </select> 请选择喜欢的老师： <select id="teacher"> <option> java老师</option></br> <option> web老师</option></br> <option> oracle老师</option></br> </select> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onsubmitfn() { //验证所有表单项是否合法，如果有一个不合法就组织表单提交 alert("静态表单注册事件"); return false; } window.onload= function () { var elementById = document.getElementById("onsubmitfn"); elementById.onsubmit =function () { alert("动态表单注册事件"); return false; } } </script> </head> <body> <!--return false 可以阻止表单提交--> <form action="http://localhost:8080" method="get" onsubmit=" return onsubmitfn;"> <!-- onsubmit 用于表单提交前，验证表单项是否合法--> <input type="submit" value="静态注册"> </form> <form action="http://localhost:8080" id="onsubmitfn"> <!-- onsubmit 用于表单提交前，验证表单项是否合法--> <input type="submit" value="动态注册"> </form> </body> </html>