1. 定义JS的两种方式：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<!-- 定义js -->
<!-- js的两种定义方式可以混用，加载顺序为自然顺序 -->
<!-- 不要把两种定义方式合并起来写 -->
<!--第一种-->
<script type="text/javascript">
function testButton() {
alert("hello js!");
}
</script>
<!-- 第二种 -->
<script type="text/javascript" src="first_js.js"></script>
<!-- 第二种 错误-->
<!--<script type="text/javascript" src="first_js.js"> function test() { } </script>-->
</head> <body> <input type="button" value="测试js" onclick="testButton();" />
<input type="button" value="测试js" onclick="test();" /> </body> </html>
2.if，循环语句：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
<!-- js和Java都是一种语言 -->
<!-- Java是强类型的语言，JavaScript是弱类型的语言：所谓的强弱，就是看定义变量时存不存在多种类型 -->
<!-- 在js中无论声明什么样的数据，都只需要一个类型 var -->
var global = "我是全局变量";
function test() {
var string = "zhangsan";
var integer = 15;
var doubleIt = 12.11;
<!-- 特殊定义全局变量的方式 -->
blobal2 = "我是global2";<!-- 在函数中声明一个变量，如果不声明变量类型var，就默认是全局变量 -->
alert(string+"-------"+integer+"------"+doubleIt+"-------"+global+"-------"+blobal2);
} <!-- -->
/*
等同于===就等同于==，只是两个等号会自动把类型转换为一致(如果var string = "12"，var int1 = 12，在js中使用==号就会自动把string="12"--->string=12)
*/
function test2() {
var int1 = "12";
var int2 = 12;
if(int1 == int2) {
alert(111);
} else {
alert(222);
}
} /*
运算符
*/
function test3() {
var int1 = 1;
var int2 = 1;
if(int1 == int2) {
alert("相同");
} else if(int1 === int2) {
alert("类型相同");
} else {
alert("都不相同");
} var today = 1;
switch(today) {
case 1 : alert("今天星期一");
break;
case 2 : "今天星期二";
break;
default : "不懂了吧，这是中国农历";
}
} // 循环语句
function test4() {
/**for(var i = 0; i < 3; i++) {
alert(i);
}*/ /**var j = 0;
while(j < 5) {
alert(j);
j++;
}*/ // 打印三角形
for(var i = 0;i < 5; i++) {// 打印三角形的行数
for(var j = 0; j < 5-i; j++) {
document.write("*");// 输出页面
}
document.write("<br />");
} } </script>
</head> <body>
<input type="button" value="测试1" ondblclick="test();" />
<input type="button" value="测试2" ondblclick="test2();" />
<input type="button" value="测试3" onclick="test3();" />
<input type="button" value="测试4" onclick="test4();" />
</body> </html>
3.函数和参数：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
/* 在Java中有method(方法)，但是在js中不叫方法，叫函数(function) */ /*
Java定义方法：访问修饰符，返回值类型(void) 方法名(声明类型的参数1，声明类型的参数2){
方法体
} js定义函数:function 函数名(不带类型的参数1, 不带类型的参数2) {
函数体
} js就算不声明返回类型，依然可以返回(return)
就算不声明void，也可以不返回
js的形式参数一定不能有类型
*/ function test1(description, hireDate) {
alert(description+"----------"+hireDate);
var a = "我是a";
return a;
} // 在哪里调用函数，参数就会从哪里被传递过来
function test2(age, name) {
alert(age+"---------"+name);
var description = "我是描述";
var hireDate = "我是日期";
var b = test1(description, hireDate);
alert(b);
} // 匿名函数
var test5 = function() {
alert("我是匿名函数");
}
// 如果在匿名函数中使用一个变量去接收，这个变量包含了函数所有东西
// 如果以一个函数的形式去接收，只会执行函数体中的内容
function test6() {
var test7 = test5;
alert(test7);
} </script>
</head> <body> <input type="button" onclick="test2();" value="测试" /> <input type="button" onclick="test6();" value="测试" />
</body> </html>
4.事件机制
<!DOCTYPE>
<html>
<head>
<title></title>
<meta charset=UTF-8/>
<script type="text/javascript">
function test(){
alert("测试onclick");
}
</script>
<script type="text/javascript">
function test1(){
alert("测试ondblclick---双击");
}
</script>
<script type="text/javascript">
function test2(){
alert("测试onmousedown---按下鼠标是触发");
}
</script>
<script type="text/javascript">
function test3(){
alert("测试onmouseup---按下鼠标松开后触发");
}
</script>
<script>
function test4(){
alert("测试onmouseover--当鼠标移动到某对象范围上触发");
}
</script>
<script type="text/javascript">
function test5(){
alert("测试onmousemove---当鼠标移动时候触发");
}
</script>
<script type="text/javascript">
function test6(){
alert("测试onmouseout---当鼠标离开某范围对象是触发");
}
</script>
<script type="text/javascript">
function test7(){
alert("测试onkeyperss--当键盘上某个键被按下并且释放是触发"（一直按下？）);
}
</script>
<script type="text/javascript">
function test8(){
alert("测试onkeydown---当键盘上某个键被按下时触发（一直按下）");
}
</script>
<script type="text/javascript">
function test9(){
alert("测试onkeyup---当键盘上某个按键被按放开时触发此事件");
}
</script>
</head>
<body>
<input type="button" value="测试onclick" onclick="test();"/>
<input type="button" value="测试ondblclick" ondblclick="test1();"/>
<input type="button" value="测试onmousedown" onmousedown="test2();"/>
<input type="button" value="测试onmouseup" onmouseup="test3();"/>
<input type="button" value="测试onmouseover" onmouseover="test4();"/>
<input type="button" value="测试onmousemove" onmousemove="test5();"/>
<input type="button" value="测试onmouseout" onmouseout="test6();"/></br>
<input type="button" value="测试onkeypress" onkeypress="test7();"/>
<input type="text" value="测试7" onkeypress="test7();"/></br>
<input type="button" value="测试onkeydown" onkeydown="test8();"/>
<input type="text" value="测试8" onkeydown="test8();"/></br>
<input type="button" value="测试onkeyup" onkeyup="test9();"/>
<input type="text" value="测试9" onkeyup="test9();"/></br> </body> <ml>
5.字符串的简单运算：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript"> // eval:把字符串格式的数据进行简单的运算
// eval只有一个参数
// eval原理：就是把数字格式的字符串转换为数字类型，然后再进行计算
function test1() {
var string1 = "12";
var string2 = "13";
var eval1 = eval(string1);
var eval2 = eval(string2);
alert(eval1+"-----"+eval2);
alert(eval1+eval2);
alert(eval(string1)+eval(string2));
} // parse************
// parseInt() == Integer.parseInt();
// parseDouble() == Double.parseDouble();
function test2() {
var string1 = "13";
var string2 = "14";
alert(parseInt(string1));
} // isNaN:判断一个非法的数字 12 / 0，返回的是true或者false
function test3() {
alert(12/0);
alert(isNaN(12/0));
} // isFinite():判断是否为一个数字,返回的是true或者false
function test4() {
alert(isFinite("15"));
} // escape():进行编码
// unescape():进行解码
// 一般情况下，只针对于中文
function test5() {
// 进行编码：好处一：防止信息被泄露，好处二：防止中文乱码
alert(escape("我是李四"));//GBK
alert(unescape("%u6211%u662F%u674E%u56DB")); } </script>
</head> <body>
<input type="button" value="测试eval" onclick="test1();" />
<input type="button" value="测试parse" onclick="test2();" />
<input type="button" value="测试isNaN" onclick="test3();" />
<input type="button" value="测试isFinite" onclick="test4();" />
<input type="button" value="测试escape" onclick="test5();" />
</body> </html>
6.控制台记录：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
// onfocus:聚焦
// onblur:失去焦点
// 在js调试中，首先要想到alert，然后必须会使用console.log();-->输出控制台
function test1() {
console.log("我是被输出了");
} // 键盘事件
function test2() {
console.log("我也被触发了");
} </script>
</head> <body> 鼠标事件：<input type="text" onblur="test1();" />
键盘事件：<input type="text" onkeyup="test2();" /> </body> </html
7.event事件获取键盘ascii：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
// event对象:事件的对象，监控的是一个事件的状态
function test1(ev){// 参数是形式参数，名字可以自己定义
var evt = window.ev||event;// 就是为了兼容IE浏览器，IE浏览器是默认只能取出event
var code = evt.keyCode||charCode;// 获取到了键盘上对应的ascii
alert(code);
}
</script>
</head> <body onkeypress="test1(event);"> </body> </html>
8.键盘记录：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
var str = "";
function test1(ev) {
var ascii = ev.keyCode;// charCode:默认只支持到IE8
str = str + String.fromCharCode(ascii);
document.getElementById("div1").innerHTML = str;
}
</script>
</head> <body onkeydown="test1(event)">
<input type="password" />
<div id="div1"></div>
</body> </html>
9.获取目标的类型，值，事件机制等：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
// event对象:事件的对象，监控的是一个事件的状态
function test1(ev){// 参数是形式参数，名字可以自己定义 var evt = window.ev||event;// 兼容IE，获取event对象
// 鼠标事件
var src = evt.srcElement||evt.target;// 为了兼容IE，IE浏览器默认兼容target
// src就代表了button的对象，也就是获取到了button的所有内容
//var test = function(){alert(111);}
// src是获取不到当前标签
alert(src.type);
}
</script>
</head> <body>
<input type="button" value="测试鼠标" onclick="test1(event)" />
</body> </html>
10.confirm 和 prompt：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
function test1() {
// alert()：警告
alert("弹窗测试");// 会非常不友好，在10年前用户体验还可以，经过发展，出现了各种插件对alert进行重写修改，样式很漂亮，但是还是很不友好，现在弹窗功能几乎废弃 // alert(js中)<--->alter(oracle中用的)
// 现在alter用的最多的地方就是进行调试，后来Google和firefix开始支持控制台调试，console.log();，再后来Firefox变了，不专一了，console.log()就被他废弃了
} function test2() {
var name = prompt("请输入您的姓名！");//弹出个输入框，让输东西
console.log(name);
} function test3() {
// 最常用
var isSuccess = confirm("此信息一旦删除就无法恢复，您确定删除吗？");// 返回一个boolean类型，也就是true/false ，弹出个确认框
alert(isSuccess);// 返回值中点击确定返回true，点击取消返回false
if(confirm("此信息一旦删除就无法恢复，您确定删除吗？")) {
alert("此消息已经删除");
} else {
alert("没事别瞎点！");
}
} </script>
</head> <body>
<input type="button" value="测试alert" onclick="test1();" />
<input type="button" value="测试prompt" onclick="test2();" />
<input type="button" value="测试confirm" onclick="test3();" />
</body> </html
11.时间和内置对象：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript"> // 时间
function test1() {
var date = new Date();// 当前服务器(自己电脑)的时间
// date.getYear()距1900年到至今的年数
// date.getMonth()获取到当前的月份(从0月开始)
// date.getDay()获取到星期几从0开始(0代表星期天)
// 不只是有get函数，还有set函数，和Java一样
date.setYear(1999);
alert(date.getYear()+"-----"+date.getMonth()+"----------"+date.getDay());
alert(date.toLocaleString());// 获取到本地时间(年月日 时分秒)，以字符串的形式输出，和Java中的toString()方法一样 }
// 内置对象：拿来直接使用，不需要new的对象，就称之为内置对象 System，Math，String...
// String对象
function test2() {
var str = "hello js";// 定义一个字符串
// charAt:获取指定下标的字符
//alert(str.charAt(1));
// substring:截取字符串
//alert(str.substring(1, 3));// 如果传入的数字为负数，会全部截取；如果有两个参数，第二个参数为负数，会倒着截取；如果第一个参数为负数，默认从字符串的起始位置开始截取；如果两个参数都为负数，就不会截取
// substr:截取字符串
//alert(str.substr(1,3));
// substr和substring的区别：substr为闭区间，但是substring为半开区间 // indexOf:获取指定字符的下标
//alert(str.indexOf("e"));
// length:获取字符串的长度
alert(str.length);
// toLowerCase:转换为小写
// toUppercase:转换为大写
} </script>
</head> <body>
<input type="button" value="测试date" onclick="test1();" />
<input type="button" value="测试String" onclick="test2();" />
</body> </html>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
// Math
// random:随机数
function test1() {
alert(Math.random());
} // round:四舍五入
function test2() {
alert(Math.round(Math.random()*100));
} // ceil:向上取整
function test3() {
alert(Math.ceil(29.01));
} // floor:向下取整
function test4() {
alert(Math.floor(29.99));
} </script>
</head> <body>
<input type="button" value="测试random" onclick="test1();" />
<input type="button" value="测试round" onclick="test2();" />
<input type="button" value="测试ceil" onclick="test3();" />
<input type="button" value="测试floor" onclick="test4();" />
</body> </html>
12.从input框中获取输入的值：(同理还可以获取其他标签的value)
e<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript"> // 如何从input框中获取输入的值
// 第一种：通过form获取
function test1() {
var ins = document.forms[0].username.value;// 这里value就是输入input框的值，0代表第一个form的下标
alert(ins);
} // 第二种：通过DOM对象获取
function test2() {
var ins2 = document.getElementById("pwd1").value;// 以后这一种是总是被用到
alert(ins2);
} </script>
</head> <body>
<form action="">
用户名：<input type="text" name="username" />
<input type="submit" value="提交" />
<input type="button" value="测试点击" onclick="test1();" />
</form> <form action="">
需要打印的行数：<input type="text" name="pwd" id="pwd1" />
<input type="submit" value="提交" />
<input type="button" value="测试点击" onclick="test2();" />
</form>
</body> </html>
13.更换一定范围背景颜色：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
function chageBackgroundColor() {
var div = document.getElementById("div1");// 获取到的是一个object对象
div.style.backgroundColor = "blue";
}
</script>
</head> <body>
<div id="div1" style="background:red; width:200px;height:200px;" onclick="chageBackgroundColor();"></div>
</body> </html>