1.引入js的三种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS引入的三种方式</title>
</head>
<body>
<!--
在标签内部引入js
alert();提示框
-->
<h2 onclick="alert('你好世界')">
点击一下
</h2>
<h2 onclick="alert('你好世杰')">
再点我啊
</h2>
<!--
在script标签内部引入js
js代码写在标签中
script可以放在html的任意位置
-->
<script type="text/javascript">
alert('继续');
document.write("Hello World!");
document.write(Date());
</script>
<!--
通过script的src引入外部文件
src指向js文件的路径
一旦使用src，里面的js源码失效
-->
<script type="text/javascript" src="./js/index-1.js">
</script>
</body>
</html>
2.警告框、确认框、输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三种框</title>
</head>
<body>
<script type="text/javascript">
//1.警告框
alert("警告：前方高能");
// 2.确认框
var rs=confirm("确定退出？");
console.log(rs);//在控制台输出
// 3.输入框
var user=prompt("请输入您的名字","尊");
alert(user);
</script>
</body>
</html>
3.js变量的定义和使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>变量的定义和使用</title>
</head>
<body>
<script type="text/javascript">
// js变量 js（弱类型）
// 变量名的声明 字母 数字 下划线 $
// 不能是js的关键字保留字
// 不能以数字开头
var i = 1;//整数
var i1 = "abc";//字符串
var i2 = true;//布尔值类型
var i3 = 10.5;//浮点数类型
var i4;
var i5 = 6, i6 = "123";//同时定义多个变量，不建议使用
//查看当前变量的类型 typeof
console.log(typeof i);
console.log(typeof i1);
console.log(typeof i2);
console.log(typeof i3);
console.log(typeof i4);
console.log(typeof i5);
console.log(typeof i6);
fun1();
// js支持面向对象
var obj = new Object();//初始化一个对象
console.log(typeof obj);
// 函数
function fun1() {
//函数体
document.write("hhh");
confirm("8888");
}
console.log(typeof fun1);
</script>
</body>
</html>
4.数据类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数据类型转换</title>
</head>
<body>
<script type="text/javascript">
// 数据类型转换：数值型和字符串类型之间的转换
var i=10;
var i1=10.5;
var i2="12";
var i3="10.5abc";
var i4="abc10.5";
var i5="0xa";
var i6=null;
var i7=true;
// 转换成整数
console.log(parseInt(i1));
console.log(parseInt(i2));
console.log(parseInt(i6));
console.log(parseInt(i7));
// string转int
console.log(parseInt(i3));
console.log(parseInt(i4));
console.log(parseInt(i5));
// 强制转成浮点型
console.log(parseFloat(i));//如果有小数才保留
console.log(parseFloat(i2));
// 转换成string类型
var i10=i.toString();
console.log(typeof(i10));
// 转换成布尔值类型
console.log(Boolean(i));
console.log(Boolean(i1));
console.log(Boolean(i2));
console.log(Boolean(i4));
console.log(Boolean(i6));
console.log(Boolean(0));
// 转换成number类型
// Number只能解析纯数字类型（字符串）或布尔值类型
console.log(Number(i7));
console.log(Number(i3));
console.log(Number(i6));
console.log(Number("123axx"));
console.log(Number("213"));
console.log(Number("0xda"));
</script>
</body>
</html>
5.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
// 无参数无返回值
method();
function method() {
// alert("无参数无返回值");
}
// 无参数有返回值
function method1() {
return "无参数有返回值";
}
// alert(method1);
// 有参数有返回值
function getSum(i, j) {
return i + j;
}
var sum = getSum();
console.log(sum);
// 有参数无返回值
function max(i, j) {
console.log(i+j);
}
max("你","好");
// 预定义函数
var i="6";
console.log(parseInt(i));
i=isNaN(i);//判断当前变量是否是NaN类型
if(i){
// alert(i+"是非数字");
}else{
// alert(i+"是数字");
}
// eval();可以将字符串转成js表达式
var x="var x=10; var y=20; document.write(x+y);"
// document.write(x);
eval(x);
// 定义单击函数
function cleck(){
alert("点了一下！");
}
function toOver(){
alert("onmouseover事件！");
}
function toDown(){
alert("onmousedown事件！");
}
function toChange(){
alert("内容改变！！！");
}
function toOkay(){
alert("还行！");
}
</script>
<!-- 控件都要有一些事件 -->
<br>
<input type="button" value="点击一下" onclick="cleck()"
onmouseover="toOver()">
<br><br>
<input type="text" onfocus="console.log('获取焦点！');"
onblur="console.log('失去焦点！');">
<br><br>
<input type="button" value="事件" onmousedown="toDown()">
<br><br>
<input type="text" value="点我试试！" onchange="toChange()">
<br><br>
<input type="text" onkeydown="toOkay()">
</body>
</html>
6.事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件补充</title>
</head>
<body onbeforeunload="toleave()">
<script type="text/javascript">
function init(){
confirm("页面加载完成！");
}
function toleave(){
confirm("页面离开的时候！");
}
</script>
<form action="http://127.0.0.1">
<input type="submit" value="提交" onclick="return false;">
</form>
</body>
</html>
7.内置事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内置对象</title>
</head>
<body>
<script type="text/javascript">
/*
1.字符串
2.数学
3.日期
4.数组
*/
// 字符串
var str="abcaaSADSsasdsass";
console.log(str.length);//长度
console.log(str.charAt(1));// 查找指定索引的字符
console.log(str.indexOf("c"));//查找指定字符首次出现的索引
console.log(str.lastIndexOf("a"));//最后一次出现的索引位置
console.log(str.split("a"));//分割字符
console.log(str.substring(2,5));//截取字符[,)
console.log(str.substr(3,2));//所开始，截取长度！
console.log(str.toUpperCase());//小写转大写
console.log(str.toLowerCase());//大写转小写
// 数学
var r=Math.random();//随机数
console.log(r);
console.log(r*100);
console.log(Math.ceil(100.2));//向上取整 101
console.log(Math.ceil(-100.1));//-100
console.log(Math.floor(100.9));//向下取整 100
console.log(Math.floor(-100.1));//-101
console.log(Math.round(100.4));//四舍五入
console.log(Math.round(-100.5));
console.log(Math.PI);
console.log(Math.E);
console.log(Math.abs(-11.1));//求绝对值
// 日期
var date=new Date();
console.log(date);
console.log(date.getFullYear());//获取年
console.log(date.getMonth());//获取月份
console.log(date.getDate());//获取天
console.log(date.getHours());//获取小时
console.log(date.getMinutes());//获取分钟
console.log(date.getSeconds());//获取秒
console.log(date.getTime());//获取时间戳
// 数组
// 1.一维数组
var arr=new Array();
//查看数组长度
console.log(arr.length);
//添加元素 通过下标添加
arr[0]="尊";
arr[1]=12;
arr[2]=12.3;
arr[3]=23;
arr[4]=true;
//查看所有元素
console.log(arr);
//对数组进行重新排序（以字符）返回一个新的数组
console.log(arr.sort());
console.log(arr.length);
// 在数组中每个元素放一个 -- 字符串，返回一个字符串
var str=arr.join("--");
console.log(str);
// 初始化一个指定长度的数组
var arr1=new Array(5);
console.log(arr1[2]);//undefined
// 定义一个数组直接赋值
var arr2=[12,23,112,45,22];
console.log(arr2);
// 对数组进行排序
console.log(arr2.sort());
// 按照大小顺序排 升序
function sortNumber(a,b){
return a-b;
}
console.log(arr2.sort(sortNumber));
// 遍历数组中所有元素
for (var i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}
// foreach遍历
for(var index in arr2){
console.log(arr2[index]);
}
// 合并数组
var arr3=arr.concat(arr2);
console.log(arr3);
arr3.push("qq");//在尾部添加
console.log(arr3);
arr3.pop();//从尾部出栈
console.log(arr3);
// 数组反转
console.log(arr3.reverse());
// 定义二维数组
var arr4=[[1,2,3],[2,3,4],[3,4,5]];
// 打印输出二维数组
for(var row=0;row<arr4.length;row++){
for(var col=0;col<arr4[row].length;col++){
document.write(arr4[row][col]+" ");
}
document.write("<br>");
}
// foreach
for(var index in arr4){
var tmp=arr4[index];
for(var index1 in tmp){
document.write(tmp[index1]+" ");
}
document.write("<br>");
}
</script>
</body>
</html>