JavaScript的使用
导入js方式
- 在html页面中直接插入javascript
- 引入外部的javascript
- 外部的js文件中不能包含<script>标签。
在导入外部js文件的<script>标签中不能在写javascript代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<title>js导入</title>
<!-- 1、在html页面中直接插入javascript -->
<script>
alert("hello js");
</script>
<!-- 引入外部的javascript -->
<script src="xxx.js">
//不能在写javascript代码
</script>
</head>
<body>
</body>
</html>
js基础语法
- var 运算符(variable 的缩写)加变量名定义的
- JavaScript 对大小写敏感
变量可以存在两种数据类型,即原始类型与引用类型。原始类型 相当于 Java基本数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var a = null;
alert(typeof(a));//通过typeof方法可以获取一个变量的类型
</script>
</head>
<body>
<!-- 数字转换成字符串 -->
<script>
var x = null;
var y = "abc";
var z = 12;
alert(typeof z.toString()); //把number转为string
</script>
<!-- 字符串转换成数字 -->
<script>
var a = "123zb3";
var b = parseInt(a);
alert(b);
alert(typeof(b));
</script>
<!-- 强制类型转换 -->
<script>
//转为Boolean类型
var x = 0;
alert(Boolean(x));
//转为数字
//var y = "4d5as4d5"; //Nan
var y = "415484";
alert(Number(y)); //4545
//转为字符串
var z = 1;
alert(String(z)); //true
</script>
</body>
</html>
js逻辑语句
同JAVA (if-else) (switch) (for/for in)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- if-else -->
<script>
var sex = 'male';
if(sex == 'male'){
alert('你是男生');
}else{
alery('你是女生');
}
</script>
<!-- switch -->
<script>
var season = 1;
switch(season){
case 1:
alert("xxxx");
break;
case 2:
alert("xxxx");
break;
}
</script>
<!-- for/for in -->
<script>
for(var i = 0;i < 3;i++)
alert(i);
</script>
<script>
var arr = [1,2,5,4,1,6];
for(idx in arr){
//idx是索引,遍历的是索引
alert(arr[idx]);
}
</script>
</body>
</html>
js常用对象
- Boolean主要用于提供将布尔值转换成字符串的 toString() 方法。
- Array 对象用于在单个的变量中存储多个值。
- String 类定义了大量操作字符串的方法,例如从字符串中提取字符或子串,或者检索字符或子串。
- Date 对象用于处理日期和时间。
- Math 对象用于执行数学任务。
-
RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具。
类似JAVA
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- Boolean -->
<script>
//把字符串转为对象
var b = new Boolean('true');
alert(typeof(b)); //Object
//对象转为原始Boolean类型
var b2 = Boolean(b);
alert(typeof(b2)); //boolean
</script>
<!-- Number -->
<script type="text/javascript">
//String转为Numer包装类对象
var n1 = new Number('3');
alert(typeof(n1)); //object
//对象转为原始Number类型
var n2 = Number(n1);
alert(typeof(n2)); //number
</script>
<!-- Array -->
<script>
//创建数组
var arr1 = new Array();
arr1.push('fdsf','sss');
alert(arr1.length); //2
//创建数组
var arr2 = new Array(2);
arr2.push('brother');
alert(arr2[2]); //brother
//控制台输出 (重)
console.log(arr1.toString());
</script>
<!-- String -->
<script>
var s1 ="你好,我";
console.log(typeof(s1));
//基本数据类型转对象
var s2 = new String(s1);
console.log(typeof(s2)); //object
//对象转string类型
var s3 = String(s2);
console.log(typeof(s3)); //string
//'我'的位置
var index = s2.indexOf('我');
alert(index); //3
</script>
<!-- Date -->
<script>
var dt = new Date(); //返回当前日期的对象
console.log( "年"+ dt.getFullYear());
console.log( "月"+(dt.getMonth()+1)); //月是从0到11
console.log( "日"+dt.getDate());
console.log( "时"+dt.getHours());
console.log( "分"+dt.getMinutes());
console.log( "秒"+dt.getSeconds());
//年2018 月7 日21 时11 分1 秒12
</script>
<!-- Math -->
<script>
var pi = Math.PI;
console.log( 'PI:' + pi );
console.log( '4的平方' + Math.pow(4,2) );
console.log( '生成一个随机数:' + Math.random());
</script>
<!-- RegExp -->
<script type="text/javascript">
//检验邮箱
var email = "7777@qq.com";
var reg = /^[A-z0-9_]+@[A-z0-9]+\.[A-z]+$/; //不要有多余空格
// /^ 代表开始 , $/代表结束 , \.代表小数点
console.log(reg.test(email)); //true
</script>
</body>
</html>
JS函数和事件
- 创建函数
function 函数名称(参数列表){
函数体;
return 返回值
}
var 函数名称=function(参数列表){
函数体;
}
-
如果调用时传递的参数与函数定义时参数个数不一致,在函数中通过对象arguments,获取所有函数中的参数
-
全局函数
encodeURI() | 把字符串编码为URI 把中文转为uri编码,实际开发中使用 |
decodeURI() | 解码URI |
encodeURIComponent() | 把字符串编码为URI组件 |
decodeURIComponent() | 解码一个编码的URI组件 |
4. 常见事件
onclick事件 | onchange事件 |
onfocus获得焦点事件 | onblur失去焦点事件 |
onmouseover:鼠标悬浮的事件 | onmouseout:鼠标离开的事件 |
onload:加载完毕的事件 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js函数和事件</title>
</head>
<body>
<!-- 创建函数 -->
<script>
function add1( a , b ){
alert( a + b ); //23
}
add1( 11 , 12 );
var add2 = function( a , b ){
alert( a + b ); //12
}
add2(11,1);
function add3( a , b ){
return a + b; //3
}
alert(add3( 1 , 2 ));
/*
对象arguments,我们可以通过它来获取所有函数中的参数
*/
function add4(a,b){
//内置一个参数数组
for( var i = 0;i < arguments.length; i++ ){
console.log(arguments[i]); //11 12 13 45 将传递过来的数据全部打印出来
}
}
add4(11,12,13,45);
</script>
<!-- 全局函数 -->
<script>
//encodeURI() 把字符串编码为URI 把中文转为uri编码,实际开发中使用
var url1 = "http://www.baidu.com/恩恩";
var s1 = encodeURI(url1);
console.log(s1);//http://www.baidu.com/%E6%81%A9%E6%81%A9
//decodeURI() 解码URI
var s2 = decodeURI(s1);
console.log(s2);//http://www.baidu.com/恩恩
//encodeURIComponent() 把字符串编码为URI组件
var s3 = encodeURIComponent(url1);
console.log(s3); //http%3A%2F%2Fwww.baidu.com%2F%E6%81%A9%E6%81%A9
//decodeURIComponent() 解码一个编码的URI组件
var s4 = decodeURIComponent(s3);
console.log(s4);
</script>
<!--*****************************常见事件**************************************-->
<!-- onclick事件 -->
<script>
function clickme(){
alert("点击的事件");
}
</script>
<button onclick="clickme()">点击我</button>
<!-- onchange事件 -->
<script>
//实现二级联动
//监听city的改变
function Change(){
//获取区域的标签
var _cityTag = document.getElementById('_city');
//获取城市的标签
var cityTag = document.getElementById('city');
//根据选择的城市不同,获取不同城市的值
var cityValue = cityTag.value;
//判断当前选择的城市下有哪些区域
switch(cityValue){
case 'gz':
//更改子标签的内容
_cityTag.innerHTML = '<option>天河区</option><option>白云区</option><option>越秀区</option>';
break;
case 'sz':
//更改子标签的内容
_cityTag.innerHTML = '<option>深圳区</option><option>深圳区</option><option>深圳秀区</option>';
break;
case 'zh':
//更改子标签的内容
_cityTag.innerHTML = '<option>珠海</option><option>珠海</option><option>珠海</option>';
break;
}
}
</script>
<select name = "city" id = "city" onchange = "Change()">
<option value = "gz">广州</option>
<option value = "sz">深圳</option>
<option value = "zh">珠海</option>
</select>
<select name = "_city" id = "_city">
<option>天河区</option>
<option>白云区</option>
<option>越秀区</option>
</select>
<!-- onfocus获得焦点事件 onblur失去焦点事件-->
<script>
//onfoucus获得焦点的事件 onblur失去焦点的事件
function begin(){
document.getElementById('tip').innerHTML = '输入中';
}
function end(){
document.getElementById('tip').innerHTML = '输入结束';
}
</script>
<span id = 'tip'></span><br>
请输入用户名<input type = "text" name = "username" onfocus = "begin()" onblur = "end()"> <!-- 绑定方法 -->
<!--onmouseover:鼠标悬浮的事件 onmouseout:鼠标离开的事件 -->
<script>
function over(){
alert("鼠标悬浮的事件");
console.log("鼠标悬浮的事件");
}
function out(){
alert("鼠标离开的事件");
console.log("鼠标离开的事件");
}
</script>
<div id = "d1"style = "width:100px;height:100px;background-color:red" onmouseover = "over()" onmouseout = "out()">aaaaaa</div>
<!-- onload:加载完毕的事件 -->
<div id = "dd" style = "width:100px;height:100px;background-color:blue"></div>
<script>
//需要吧div的内容写在前面
window.onload = function(){
document.getElementById("dd").innerHTML = "加载完成";
}
</script>
</body>
</html>
jsWindow对象方法
- window对弹框的三个方法,alert,confirm,prompt(常用)
- open方法:打开另一个链接相当于a标签
- 定时器(指定时间执行任务)
- 定时器应用:注册后5s跳转首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- window对弹框 -->
<script type="text/javascript">
function click1() {
//alert是window对象的方法,平时开如可以省略window
window.alert("党的十九大招开了");//提示框
}
function click2() {
//显示带有一段消息以及确认按钮和取消按钮的对话框。
//用户选择后,会返回true或者false
var rsl = window.confirm("你确定要分手吗?");
alert(rsl); //点击是提示true
}
function click3(){
//显示可提示用户输入的对话框,点确定后,返回用户输入的密码,点取消,返回null
var rsl = prompt("请输入你的银行卡密码");
alert("你输入的密码是:" + rsl)
}
</script>
<button onclick="click1();">点击1</button>
<button onclick="click2();">点击2</button>
<button onclick="click3();">点击3</button>
<!-- open方法 -->
<script>
function click4(){
//打开另一个连接
window.open("http://www.baidu.com");
}
</script>
<button onclick = "click4()">打开其他连接</button>
<!-- 定时器(指定时间执行任务) -->
<script type="text/javascript">
var timer;
//开启定时器
function myStart(){
timer = setTimeout(function(){
console.log("5s后显示的内容");
},5000)
}
function myClear(){
clearTimeout(timer);
}
</script>
<button onclick = "myStart()">开启定时器。5s后执行</button>
<button onclick = "myClear()">清除定时器</button>
<!-- 定时器:注册后5s跳转首页 -->
<br>注册成功<span id = "timespan">5</span>s后自动跳转到百度
<script>
var second = 5;
var timez = setInterval(function(){
var spanTag = document.getElementById("timespan");
if(second > 0){
second--;
spanTag.innerHTML = second;
}else{
clearInterval(timez); //时间到了清除定时器
window.location = "http://www.baidu.com";
}
},1000);//每循环一次1000ms
</script>
</head>
<body>
</body>
</html>