目录--便于查找(开始撸码)
1_JavaScript的引入
2_JavaScript的语法_变量
3_JavaScript的语法_基本数据类型
4_JavaScript的语法_引用数据类型
5_JavaScript的语法_运算符
6_JavaScript的语法_JS的布尔运算规则
7_JavaScript的语法_语句
8_JS中的函数
9_JS中的事件
10_JS中的事件_页面加载事件
11_BOM对象_screen对象
12_BOM对象_navigator对象
13_BOM对象_window对象的弹框函数
14_BOM对象_window对象的定时器函数
15_BOM对象_window对象的定时器函数
16_BOM对象_window对象的全局函数
17_BOM对象_location对象
1_JavaScript的引入
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的引入</title>
<!--
JavaScript的引入:在html页面中如何使用JavaScript
1.内嵌式:在html页面中创建一个script标签,在标签中直接写js代码
格式:
<script type="text/javascript">
js代码
</script>
2.外联式:把js代码写在一个以.js结尾的文件中,在html页面中使用script标签引入外部的js文件
js文件可以被多个页面引入
格式:
<script src="外部js文件的路径" type="text/javascript"></script>
script标签中如果引入了外部的js文件,那么标签中就不能在写js代码了,会失去作用
如果要在继续写js代码,需要重新创建一个script标签,在新的标签中写
注意:
理论上script标签,可以写在html中的任意位置,在不影响功能的前提下
尽量把script标签写在后边(让页面先加载出来,给用户显示,在读取js代码)
-->
<!--1.内嵌式-->
<script type="text/javascript">
//有一个全局函数alert(参数);可以在页面中弹出一个对话框,输出数据
alert(1);
</script>
<!--2.外联式-->
<script type="text/javascript" src="js/1.js" >
//alert(3);
</script>
</head>
<body>
</body>
</html>
2_JavaScript的语法_变量
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的语法_变量</title>
<script type="text/javascript">
/*
* 变量
* java语言:强类型语言,在使用每种数据的时候,必须先明确数据类型
* 变量的定义格式: 数据类型 变量名 = 数据值;
* js语言:弱类型语言,在定义变量的时候,使用关键字var(variable变量),来接收数据
* 赋什么类型的值,那么这个变量就是什么类型
* js变量的定义格式:
* var 变量名; 变量有默认值undefined
* var 变量名 = 数据值;
*/
var i = 10;
//alert(i);
var d = 1.1;
//alert(d);
var b = true;
//alert(b);
var str = "abc";
//alert(str);
var c = '中国';
alert(c);//js中没有字符,单引号包裹的也是字符串
</script>
</head>
<body>
</body>
</html>
3_JavaScript的语法_基本数据类型
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的语法_基本数据类型</title>
<script type="text/javascript">
/*
* JavaScript的语法_基本数据类型
* undefined类型:值就是undefined的,变量定义未赋值的默认值
* null类型:只有一个值null
* number类型:所有整数和小数都是number类型
* string类型:所有被单引号或者双引号包裹的字符串
* boolean类型:有两个值true和false
*
* 有一个关键字typeof可以查看变量的数据类型
*/
var u;
//alert(u);//undefined
//alert(typeof u);//undefined
//alert(null==undefined);//true
var i = 10;
//alert(i);//10
//alert(typeof i);//number
var d = 1.1;
//alert(d);//1.1
//alert(typeof d);//number
var str = "aaaa";
//alert(str);//aaaa
//alert(typeof str);//string
var b = false;
alert(b);//false
alert(typeof b);//boolean
</script>
</head>
<body>
</body>
</html>
4_JavaScript的语法_引用数据类型
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的语法_引用数据类型</title>
<script type="text/javascript">
/*
* JavaScript的语法_引用数据类型
* java语言:面向对象的编程语言
* 定义一个类,根据类创建对象,调用对象中的方法帮我们做事情
* js语言:基于对象的编程语言
* 正在js中没有类,但是有一些内置的对象,这些对象都是根据函数模拟出来的
* 造一个对象：var obj = new Object();
* 造一个字符串对象：var str = new String();
* 造一个日期对象：var date = new Date();
* 注意:
* js中所有的对象都是object类型
*/
var obj = new Object();
//alert(obj);//[object Object]
//alert(typeof obj)//object
var str = new String();
//alert(str);//""
//alert(typeof str);//object
var date = new Date();
//alert(date);//Mon Sep 23 2019 09:19:03 GMT+0800
alert(typeof date);//object
</script>
</head>
<body>
</body>
</html>
5_JavaScript的语法_运算符
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的语法_运算符</title>
<script type="text/javascript">
/*
* JavaScript的语法_运算符
* 算术运算符:+-* /%
*/
//alert(5/2);//2.5
//alert("5"+5);//55 字符串连接
//alert("5"-5);//0 字符串的整数在参与运算的时候,会转换为整数
//alert("5"*5);//25
//alert("5"/5);//1
//alert("5"%5);//0
//alert("a"-5);//NaN not number 无效数字
/*
* 比较运算符
* ==:比较的是值
* ===:比较的是值与数据类型
*/
//alert("5"==5);//true
alert("5"===5);//false
</script>
</head>
<body>
</body>
</html>
6_JavaScript的语法_JS的布尔运算规则
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的语法_JS的布尔运算规则</title>
<script type="text/javascript">
/*
* JavaScript的语法_JS的布尔运算规则:在js中可以使用其他数据类型的值,作为布尔值使用
* undefined相当于false
* null相当于false
* number:0|0.0相当于false 其他是true
* string:""空字符串相当于false,非空字符串true
* 引用数据类型(对象):都相当于true
*/
var obj = new Object();
if(obj){
alert("你猜猜我们出现吗?")
}
</script>
</head>s
<body>
</body>
</html>
7_JavaScript的语法_语句
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的语法_语句</title>
<script type="text/javascript">
/*
* JavaScript的语法_语句
* 普通for循环
* java:
* for(int i=0; i<10; i++){
* System.out.println(i);
* }
* js:
* for(var i=0; i<10; i++){
* alert(i);
* }
*/
for(var i=0; i<10; i++){
//alert(i);
}
/*
* 增强for循环
* java:用于遍历数组和集合
* for(数据类型 变量名 : 数组/集合){
* System.out.println(变量名);
* }
* js:用于遍历数组,在js中没有集合
* for(var 数组的索引 in 数组名){
* alert(数组名[数组的索引]);
* }
*/
//定义一个数组
var arr = [1,2,3,"a","b","c",true,false,1.1,2.2,3.3];
//使用普通for循环遍历数组
for(var i=0; i<arr.length; i++){
//alert(arr[i]);
}
//使用增强for循环遍历数组
for(var i in arr){
//alert(i);//0123456... 数组的索引
//alert(arr[i]);
document.writeln(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
8_JS中的函数
<html>
<head>
<meta charset="UTF-8">
<title>JS中的函数</title>
<script type="text/javascript">
/*
* JS中的函数(非常重要):就相当于java中的方法
* 1.普通函数
* 定义格式:
* function 函数名(参数列表){
* 函数体;
* return 返回值;
* }
* 注意:
* 1.函数的参数列表不能写数据类型var (var a,var b) 错误 (a,b)
* 2.函数没有返回值类型,写return就有返回值,没有写return就没有返回值
* 如果只写return不写值,作用就是结束函数
* 使用格式:
* 没有返回值:直接调用
* 函数名(参数);
* 有返回值:定义变量接收返回值
* var 变量名 = 函数名(参数);
*/
//定义一个计算两个整数和的函数
function add(a,b){
//alert(a+b);
}
//调用函数
add(10,20);
//定义一个计算两个整数差的函数
function div(a,b){
return a-b;
}
//调用函数
var d = div(100,20);
//alert(d);//80
/*
* 2.匿名函数:没有名字
* 定义格式:
* function (参数列表){
* 函数体;
* return 返回值;
* }
* 使用格式:
* 1.把匿名函数赋值给一个变量,变量名就相当于函数名,使用变量名调用函数
* 2.在js中有一些函数的参数需要传递其他函数,作为参数传递(定时器)
*/
//定义一个计算两个数和的匿名函数
var s = function(a,b){
return a+b;
}
//调用匿名函数
alert(s(10,20));
/*
* setTimeout(函数,毫秒值); 执行一次的定时器
* setTimeout(function(){},毫秒值); 执行一次的定时器
*/
</script>
</head>
<body>
</body>
</html>
9_JS中的事件
<html>
<head>
<meta charset="UTF-8">
<title>JS中的事件</title>
<script type="text/javascript">
/*
* JS中的事件
* 1. 事件源：被监听的html元素
* 发生事件的地点
* 生活中: 天津港口,香港
* js:js中的标签(元素) img标签 input标签 div标签
* 2. 事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
* 生活中:爆炸事件,枪击事件,暴乱事件,抢劫事件
* js中:鼠标单击事件,获取焦点事件,失去焦点事件,鼠标移入事件,鼠标移出事件...
* 3. 事件与事件源的绑定：在事件源上注册上某事件
* 生活中:
* 天津港口发生了爆炸事件
* 香港发生了暴乱事件
* js中:
* 在标签上定义一个事件相关的属性
* 按钮发生了点击事件
* <input type="button" onlick="调用函数()"/>
* 4. 事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装
* 生活中:
* 天津港口发生了爆炸事件
* 响应:
* 救援,灭火,重建...
* js中:
* 按钮发生了点击事件
* 响应:
* 定义一个函数作为事件的响应函数,来处理事件
*/
//定义按钮点击事件的响应函数:按钮发生了点击事件,就会执行这个函数
function butOnclick(){
alert("就点你咋的!");
}
//定义文本框获取焦点事件的响应函数
function textOnfocus(){
alert("获取到了焦点!")
}
//定义图片的鼠标移入事件的响应函数
function imgOnmouseover(){
alert("鬼子又进村抓花姑娘了!")
}
</script>
</head>
<body>
<!--
按钮发生了点击事件
事件源: 按钮 <input type="button"/>
事件: 鼠标点击事件 onclick
把事件和事件源绑定到一起: 在input标签上添加一个onclick属性,属性的调用一个函数
事件发生后响应行为:定义一个函数来处理事件
-->
<input type="button" value="没事别点我" οnclick="butOnclick()" />
<!--
文本框获取焦点事件
事件源: 文本框 <input type="text"/>
事件: 获取焦点事件 onfocus
把事件和事件源绑定到一起: 在input标签上添加一个onfocus属性,属性的调用一个函数
事件发生后响应行为:定义一个函数来处理事件
-->
<input type="text" name="username" οnfοcus="textOnfocus()" />
<!--
图片的鼠标移入事件
事件源: 图片 img
事件: 鼠标移入事件 onmouseover
把事件和事件源绑定到一起: 在input标签上添加一个onmouseover属性,属性的调用一个函数
事件发生后响应行为:定义一个函数来处理事件
-->
<img src="img/2.jpg" width="250px" height="300px" οnmοuseοver="imgOnmouseover()"/>
</body>
</html>
10_JS中的事件_页面加载事件
<html>
<head>
<meta charset="UTF-8">
<title>JS中的事件_页面加载事件</title>
<script type="text/javascript">
/*
* JS中的事件_页面加载事件
* onload:当页面加载完毕会触发这个事件
*/
//alert(1);
//定义一个页面加载事件的相依函数
/*function bodyOnload(){
alert(1);
}*/
//给window对象添加一个页面加载事件
window.onload = function(){
alert(1);
}
</script>
</head>
<!--<body οnlοad="bodyOnload()">-->
<body>
<table border="1px" width="200px" cellpadding="0px" cellspacing="0px">
<tr>
<td rowspan="3" bgcolor="yellow">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td align="right">2-2</td>
<td align="center">2-3</td>
</tr>
<tr align="center">
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
11_BOM对象_screen对象
<html>
<head>
<meta charset="UTF-8">
<title>screen对象</title>
<script type="text/javascript">
/*
* screen对象
* screen 对象包含有关客户端显示屏幕的信息。
* 属性:
* width 返回显示器屏幕的宽度。
* height 返回显示屏幕的高度。
* BOM对象都可以使用对象名直接访问属性或者是掉用函数
*/
alert(screen.width+"*"+screen.height);//1366*768
</script>
</head>
<body>
</body>
</html>
12_BOM对象_navigator对象
<html>
<head>
<meta charset="UTF-8">
<title>navigator对象</title>
<script type="text/javascript">
/*
* navigator对象
* navigator 对象包含有关浏览器的信息。
* 属性:
* appName 返回浏览器的名称。
* appVersion 返回浏览器的平台和版本信息。
*/
alert(navigator.appName); // Netscape 网景公司
alert(navigator.appVersion);// 5.0 (Windows)
</script>
</head>
<body>
</body>
</html>
13_BOM对象_window对象的弹框函数
<html>
<head>
<meta charset="UTF-8">
<title>window对象的弹框函数</title>
<script type="text/javascript">
/*
* window对象的弹框函数
* 1. 提示框：alert(提示信息);
* 2. 确认框：confirm(提示信息);
* 3. 输入框：prompt(提示信息);
*/
/*
* 1. 提示框：alert(提示信息);
* 可以在页面中弹出一个对话框,输出指定的内容,可以用于程序的调试
*/
//alert(a);
//alert(1);
/*
* 2. 确认框：confirm(提示信息);
* 有返回值:
* 点击确定,返回true
* 点击取消,返回false
*/
//var con = confirm("您确定要删除吗?");
//alert(con);
/*
* 3. 输入框：prompt(提示信息);
* 弹出一个输入框,让用户输入数据:比如可以输入二次密码 登录密码 支付密码
* 返回值:
* 点击确定,返回输入的内容
* 点击取消,返回null
*/
var pro = prompt("请输入您的支付密码:");
alert(pro);
</script>
</head>
<body>
</body>
</html>
14_BOM对象_window对象的定时器函数
<html>
<head>
<meta charset="UTF-8">
<title>window对象的定时器函数</title>
<script type="text/javascript">
/*
* window对象的定时器函数
* 定时器的id setTimeout(函数,毫秒值);执行一次的定时器
* 定时器的id setInterval(函数,毫秒值);反复执行的定时器
* 参数:
* 毫秒值:定时器设置的时间
* 函数:定时的时间到了之后,就会调用传递的函数
* clearTimeout(定时器的id) 取消由 setTimeout() 方法设置的 定时器。
* clearInterval(定时器的id) 取消由 setInterval() 设置的的定时器
*/
//定义一个炸弹爆炸的函数
/*function c4(){
alert("c4爆炸了,匪徒胜利了!");
}*/
//调用执行一次的定时器
//window.setTimeout(c4,5000);//5000毫秒后执行c4函数
//调用执行一次的定时器,参数使用匿名函数
var timeID = setTimeout(function(){
alert("c4爆炸了,匪徒胜利了!");
},5000);
//alert(timeID);//2
//定义按钮点击事件的响应函数
function clearC4(){
clearTimeout(timeID);
}
</script>
</head>
<body>
<input type="button" value="拆除炸弹" οnclick="clearC4()"/>
</body>
</html>
15_BOM对象_window对象的定时器函数
<html>
<head>
<meta charset="UTF-8">
<title>window对象的定时器函数</title>
<script type="text/javascript">
/*
* window对象的定时器函数
*/
//定义一个反复执行的定时器,每个1000毫秒执行一次
var interID = setInterval(function(){
alert("嘿嘿,恭喜你中毒了!")
},3000);
//定义一个按钮点击事件的响应函数
function clearInter(){
clearInterval(interID);
}
</script>
</head>
<body>
<input type="button" value="取消反复执行的定时器" οnclick="clearInter()" />
</body>
</html>
16_BOM对象_window对象的全局函数
<html>
<head>
<meta charset="UTF-8">
<title>window对象的全局函数</title>
<!--
window对象的全局函数:在script标签中任意的位置都可以使用
parseInt("字符串的整数") 把字符串的整数转换为整数
parseFloat("字符串的小数") 把字符串的小数转换为小数
-->
<script type="text/javascript">
var i = parseInt("11");
//alert(i);//11
//alert(i+22);//33
//alert(typeof i);//number
var f = parseFloat("1.1");
//alert(f);//1.1
//alert(typeof f);//number
var a = parseInt("a");
alert(a);//NaN notnumber 无效数字
</script>
</head>
<body>
</body>
</html>
17_BOM对象_location对象
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script type="text/javascript">
/*
* location对象
* location 对象包含有关当前 URL 的信息。
* location对象可以操作浏览器的地址栏
* 属性:
* href="浏览器的地址"
* 就相当于在浏览器的地址栏中输入地址并敲击回车的过程
*/
//定义鼠标点击事件的响应函数
function butOnclick(){
location.href = "http://www.itcast.cn";
}
//定义图片点击事件的响应函数
function imgOnclick(){
location.href = "http://h5.itcast.cn/special/2019fbh";
}
</script>
</head>
<body>
<input type="button" οnclick="butOnclick()" value="点击我到传智"/>
<img src="img/ad.jpg" οnclick="imgOnclick()"/>
</body>
</html>
**********************************************完毕*******************************************************
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
