一、概述
javascript 简称：js
是实现网页动态效果的一个技术（是一门编程语言）
二、js的三种引入方式
第一种：相当于css的行内引入方式
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 第一种写法 -->
<!-- alert() 是一个js函数 功能是弹出一个警告框
onclick 属性：点击事件
-->
<button type="button" onclick="alert('哈哈哈')">注册</button>
</body>
</html>
第二种：相当于css的内联方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 第二种写法 相当于内联-->
<script>
var num = 20;
//alert(num);
//控制台输出
console.log(num);
</script>
</head>
<body>
<button type="button" onclick="alert('哈哈哈')">注册</button>
</body>
</html>
第三种：相当于css的外联
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 第三种引入方式 相当于外联-->
<script src="./test.js" type="text/javascript"></script>
</head>
<body>
<button type="button" onclick="alert('哈哈哈')">注册</button>
</body>
</html>
test.js:
alert("天上人间");
三、js的语法格式
数据类型
number 数字
string 字符串
boolean 布尔
object 对象
array 数组
js的基本数据类型：
number 包含整数和小数
string boolean
类对象模型：
object
特殊类型：
array
javascript声明变量的时候名字的规范：
1.严格区分大小写
2.能够使用英文字母、数字、下划线
3.不能以数字开头，但是可以以字母、下划线$开头
4.变量名见名知意
5.使用var来修饰变量时，可以不带var
6.js语句结束可以以;结尾，也可以省略
示例：
//在控制台打印变量num
var num = 10;
console.log(num);//10
//打印num的数据类型
console.log(typeof num);//number
var num1 = 2.3;
console.log(num1);//2.3
console.log(typeof num1);//number
var str1 = "你好，js";
var str2 = "你好，世界";
console.log(str1 + str2);//你好，js你好，世界
console.log(typeof str1);//string
var ret1 = true;
console.log(ret1);//true
console.log(typeof ret1);//boolean
//关于string的一些方法
str2 = str2 + ", 睡吧";//字符串拼接
console.log(str2);//你好，世界, 睡吧
var str3 = "大肠刺身".concat(",羊眼刺身");
console.log(str3);//大肠刺身,羊眼刺身
//获取一个字符串的字符
console.log("榴莲"[1]);//莲
//分割
var arr = "生吃鸡蛋,生吃韭菜".split(",");
console.log(arr[0]);//生吃鸡蛋
console.log(arr[1]);//生吃韭菜
console.log(arr[2]);//undefined
console.log(typeof arr);//object
//去空格
var str4 = " 哈哈哈哈 "
console.log(str4);
//str4 = str4.trim();去掉两边的空格
str4 = str4.trimLeft();//去掉左边空格
str4 = str4.trimRight();//去掉右边空格
console.log(str4);//哈哈哈哈
//可以将字符串类型的数据转为number类型的数据
var i = parseInt("12");
//var i = parseInt("猫")//NaN not a number
console.log(i);//12
console.log(typeof i);//number
var i1 = parseFloat("3.14");
console.log(i1);//3.14
console.log(typeof i1);//number
console.log("字符串的长度".length);//6
对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
//对象 json对象
var student = {"name":"哆啦A梦","age":999};
var students = [{"name":"野比大雄","age":10},{"name":"静香","age":11}]
console.log(student);//{name: "哆啦A梦", age: 999}
console.log(typeof student);//object
console.log(students);//0: {name: "野比大雄", age: 10}
//1: {name: "静香", age: 11}
console.log(typeof students);//object
console.log(students[0]);//{name: "野比大雄", age: 10}
console.log(student.name);//哆啦A梦
console.log(student["name"]);//哆啦A梦
//数组的声明
var arr1 = new Array();
var arr2 = [10,20,30,40];
console.log(arr1);//[]
console.log(typeof arr1);//object
arr1[0] = 999;
console.log(arr1[0]);//999
console.log(arr2);//(4) [10, 20, 30, 40]
console.log(arr2[0]);//10
arr1.push("黄焖鸡");
arr1.push("黄焖酥肉");
console.log(arr1);//(3) [999, "黄焖鸡", "黄焖酥肉"]
//删除并返回数组中的最后一个元素
//console.log(arr1.pop())//黄焖酥肉
//console.log(arr1);//(2) [999, "黄焖鸡"]
//从下标为0（包含0）的位置删除1个
arr1.splice(0,1);
console.log();
</script>
</object>
</script>
</html>
循环
和java循环非常类似
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
/* while () {} */
/* do{}while() */
/* for() {} */
var a = 10;
// 当a = 10 >0 a-- a=9 console.log(9)
//当a = 9 >0 a-- a=8 console.log(8)
//当a = 1 >0 a-- a=0 console.log(0)
// while (a-- > 0) {
// console.log(a)
// }
var b = 10;
// do {
// console.log("回锅肉"+ b)
// b--;
// } while(b > 0);
// for(var i = 0; i < 10; i++) {
// console.log(i)
// }
// var arr = [10,20,102,230]
// for (var i = 0; i < arr.length; i++) {
// console.log(arr[i])
// }
//增强for循环
var student = {"name":"哆啦A梦","age":999};
for(var studentkey in student) {
console.log(studentkey + ":" + student[studentkey])
}
var students = [{"name":"士强", "age":78},
{"name":"老邢","age":99},
{"name":"老万","age":99}]
for (var i = 0; i < students.length; i++) {
console.log(students[i].name);
console.log(students[i].age);
}
</script>
</html>
运算符和分支结构
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
/*
算术运算符：+ - * / %
关系运算符：> < == >= <= != ===
逻辑运算符：&& || !
*/
var num = 20;
console.log(num + 12)
if (num > 10) {
console.log(num + "大于了10")
}
console.log(1 == "1")//true
console.log(1 === "1")//false
//=== 比较的是数据类型和内容
//== 只比较内容
/*
和java一模一样
if () {}
if () {} else {}
if () {} else if() {} else if(){} else {}
*/
var num = 100;
if (num >90) {
console.log("秀儿")
} else if (num > 80) {
console.log("有点锈")
} else if (num > 70) {
console.log("秀不动了")
} else {
console.log("回家吧")
}
</script>
</html>
函数（方法）
语法格式：function 方法的名字(){}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
//函数的声明
function alertInfo(a) {
alert(a);
}
//函数的调用
alertInfo(3);
//如果有返回值，使用关键字return
function add(a, b) {
return a + b;
}
var c = add(2,3);
console.log(c);
//拼接
//console.add("wqer",3);报错
function sub(a,b) {
return a - b;
}
console.log(sub(5,3));//2
console.log(sub("wqer"),2);//NaN
console.log(sub("wqer"),"r");//NaN
//匿名函数,也被成为闭包
var fun = function(a , b) {
return a + b;
}
console.log(fun(3,4));
var sortFun = function(a, b) {
return a - b
}
var arr = [1,3,67,4,23];
arr.sort(sortFun);
console.log(arr);
var arr1 = [423,54,6,3,67,35,6,234];
arr1.sort(function(a, b)
{
return a - b;
})
console.log(arr1);
</script>
</html>
四、DOM
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<div>
哈哈哈哈哈
</div>
<span class="cls1">红牛</span>
<span class="cls1">雷碧</span>
<span class="cls1">康帅傅</span>
<span class="cls1">六个核弹</span>
<sapn clsss="cls1">承德露露</sapn>
<p>
<span>阿尔卑斯</span>
</p>
<p>大白兔</p>
<p>金丝猴</p>
<br />
<footer name="ft">
<div>
卫龙
</div>
</footer>
<footer name="ft">大刀肉</footer>
<footer name="ft">大辣片</footer>
<button type="button" onclick="divChange()">点一下有惊喜哦！</button>
<button type="button" onclick="clsChange()">变身</button>
<button type="button" onclick="tagNameChange()">点我啊</button>
<button type="button" onclick="nameChange()">变</button>
</div>
</body>
<script>
function divChange() {
//通过id名找到一个要操作的标签
var div1 = document.getElementById("div1");
console.log(div1);
//innerHTML,获取元素对象的内容，带有标签的
console.log(div1.innerHTML);
div1.innerHTML = "樯橹灰飞烟灭";
}
function clsChange() {
//通过clss名找到多个要操作的标签
var eles = document.getElementsByClassName("cls1");
console.log(eles);
for (var i = 0; i < eles.length; i++) {
console.log(eles[i])
console.log(eles[i].style)
eles[i].style.color="red";
eles[i].style.fontSize="25px";
}
}
function tagNameChange() {
//通过标签名字获取对象,返回值是一个数组
var tags = document.getElementsByTagName("p");
console.log(tags[0]);
tags[0].style.color="gold";
tags[0].style.fontSize="40px";
tags[0].innerHTML="阿尔卑斯";
}
function nameChange() {
var names = document.getElementsByName("ft");
console.log(names);
names[0].style.color="green";
names[0].style.fontSize="50px";
console.log(names[0].innerHTML);//内部的带标签的内容
console.log(name[0].innerText);//内部的文本内容，不带标签
names[0].innerText = "哈哈哈";
}
</script>
</html>
五、window对象
onload
onload是在浏览器启动的时候就被加载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id = "b1">
</body>
<script>
//只要浏览器启动加载页面，就会执行onload这个事件
window.onload = function () {
//动态的创建一个div标签
var body = document.getElementById("b1");
var div = document.createElement("div");
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "red";
body.appendChild(div);
}
</script>
</html>
window下面的提示框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="alertInfo()">提示框</button>
<button type="button" onmouseenter="confirmInfo()">鼠标移入确认框</button>
<button type="button" onmouseleave="inputInfo()">鼠标移出输入框</button>
</body>
<script>
function alertInfo () {
window.alert("你好，世界！");
}
function confirmInfo () {
var ret = window.confirm("你是单身狗吗");
console.log(ret);
if (ret) {
console.log("祝你早日脱单");
} else {
console.log("祝你早生贵子");
}
}
function inputInfo () {
var ret = window.prompt();
console.log(ret);
if(ret > 100) {
window.alert("土豪")
} else {
window.alert("穷")
}
}
</script>
</html>
window返回上一级的写法
window.history.back();
表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="onload1.html" method="get" onsubmit="return infoConfirm()">
用户名：
<input type="text" name="username" id="uid" onfocus="clearAttr()"/>
<span id="nameAttr" class="Attr"></span>
<br>
密 码：
<input type="text" name="password" id="pas" onfocus="clearAttr()"/>
<span id="passwordAttr" class="Attr"></span>
<br>
<br>
   
<button type="reset">重置</button>
    
<button type="submit">提交</button>
</form>
</body>
<script>
function infoConfirm() {
var nameInput=document.getElementById("uid");
//验证用户名是否为空
var name =nameInput.value
if(name == null || name == "") {
//在span标签里，显示用户名不能为空
var sp1 = document.getElementById("nameAttr");
sp1.innerText="用户名不能为空!";
sp1.style.color="red";
//不合法就不传递这个数据到另一个页面
return false;
}
console.log(name);
//验证密码是否为空
var passwordInput =document.getElementById("pas");
var password = passwordInput.value;
if(password == null || password == "") {
//在span标签里显示密码不能为空
var sp2 = document.getElementById("passwordAttr");
sp2.innerText = "密码不能为空";
sp2.style.color = "red";
return false;
}
//验证密码格式是否正确
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/
if(!reg.test(password)) {
var sp3 = document.getElementById("passwordAttr");
sp3.innerText = "密码为数字和字母的组合且在6位到10位之间";
sp3.style.color = "red";
return false;
}
console.log(password);
}
//焦点事件
function clearAttr() {
//返回一个数组
var spAttr = document.getElementsByClassName("Attr");
for(var i = 0; i < spAttr.length; i++) {
spAttr[i].innerText = "";
}
}
</script>
</html>
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
