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：javaScript（定义方式，循环语句，函数与参数，事件机制，控制台记录，event事件获取键盘ascii，confirm和prompt，事件和内置对象，获取input，点击更换背景色）的更多相关文章
- JS运算符，流程控制，函数，内置对象，BOM与DOM
运算符 1.算数运算符 运算符 描述 + 加 - 减 * 乘 / 除 % 取余(保留整数) ++ 递加 - - 递减 ** 幂 var x=10; var res1=x++; '先赋值后自增1' 10 ...
- Thymeleaf 之 内置对象、定义变量、URL参数及标签自定义属性
Thymeleaf 之 内置对象.定义变量.URL参数及标签自定义属性 本文章来自[知识林] 如标题所述,这篇文章主要讲述Thymeleaf中的内置对象(list解析.日期格式化.数字格式化等).定义 ...
- js简介 基本操作 以及循环语句 内置对象 函数044
js 全称 javascript 从交互的角度 描述行为 一 .js注释方法: //单行注释 声明变量 var 二 .声明多个变量 : var a = '2' ,b = 4, c = tru ...
- javascript里的循环语句
前序:我一直对于for跟for..in存在一种误解,我觉得for都能把事情都做了,为啥还要for...in...这玩意了,有啥用,所以今天就说说JavaScript里的循环语句. 循环 要计算1+2+ ...
- Javascript初识之流程控制、函数和内置对象
一.JS流程控制 1. 1.if else var age = 19; if (age > 18){ console.log("成年了"); }else { console. ...
- 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍
昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
- python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）
11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= " ...
- 5、JavaScript进阶篇②——函数、事件、内置对象
一.函数 1. 什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; a ...
- JavaScript基础函数和词法分析以及常用的内置对象和使用方法（4）
day52 参考:https://www.cnblogs.com/liwenzhou/p/8004649.html 函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式 ...
随机推荐
- 命令方式 搭建 （简易）Maven项目
原料:1.配好的Maven环境变量 2.c m d命令 win + r 输入 cmd 切换到此项目所要存在的位置 使用命令创建文件夹 切换 到 maven_demo中 输入 cd mave ...
- PHP---pdo和mongodb的操作使用
<?php $pdo = new PDO("mysql:host=127.0.0.1;dbname=testdb","root","123456 ...
- Huber loss<转发>
from https://blog.csdn.net/lanchunhui/article/details/50427055请移步原文
- Python 练习实例3
Python 练习实例3 题目:一个整数,它加上100后是一个完https://www.xuanhe.net/全平方数,再加上168又是一个完全平方数,请问该数是多少? 程序分析: 假设该数为 x. ...
- C# 常用方法—— 32位MD5加密
其他常用方法详见:https://www.cnblogs.com/zhuanjiao/p/12060937.html /// <summary> /// 32位MD5加密(小写) /// ...
- [转] SSH两种登录方式（公私钥）解析
转自:https://www.cnblogs.com/hukey/p/6248468.html SSH登录方式主要分为两种: 1. 用户名密码验证方式 说明: (1) 当客户端发起ssh请求,服务器会 ...
- 线程Thread、线程池ThreadPool
Thread调用含参方法,参数必须是object类.ThreadPool调用的方法,无论是否含参,方法必须有object类参数(可不用,但得有) [线程] using System; using Sy ...
- java8中规范的四大函数式接口
java8中规范的四大函数式接口: 1.Consumer<T> :消费型接口 void accept(T t); 2.Supplier<T> :供给型接口 ...
- vue-upload 封装组件-上传组件
我后端的,刚接触vue个星期,根据需求写了个上传控件,很灵活的.没有看element el-upload源码,样式用的element的.感觉vue确实好用. 先看样子: <!-- 单文件上传组件 ...
- [NOIP2014普及组T1]珠心算测验 - NTT
求数组有多少个数,恰好等于集合中另外两个(不同的)数之和? 注意到数集比较小,而且涉及到下标的加法,可以很自然地想到卷积 注意减去自己加自己的贡献 真是一道NTT练手好题 #include <i ...