java:javaScript(定义方式,循环语句,函数与参数,事件机制,控制台记录,event事件获取键盘ascii,confirm和prompt,事件和内置对象,获取input,点击更换背景色)

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>
上一篇:Java中,权限修饰符的权限测试


下一篇:Knative 基本功能深入剖析:Knative Eventing 之 Sequence 介绍