文章目录
一、JavaScript是什么？
一个页面由html css js 组成的！！！
js:相当重要！！！。如果想要学号前端，那些html,css根本没有技术含量的
但是js相当有技术含量！！！，但是咱们主要是做后端的，所以说学js学的比较少！！！可以让你们秀儿出来页面的那种。所以以后不断的学习js，我个人特别喜欢js。因为js是一门独立的语言有自己的语法格式。Js这门语言在语言排名当中没有出过前五名
http://github.com/ 这个需要注册，咱们会讲Git，版本控制，开发必用！！！服务器在国外打开比较慢
JavaScript:简称js。实现网页的动态效果的
JavaSCript和java有什么关系呢？没有关系，借助了java的名气命名。就好比老婆和老婆饼
好比雷锋和雷峰塔没有任何关系的
有自己的独立的语法格式
css修饰html标签的
js也是修饰html标签的，可以标签动起来的一门语言，所以在写代码的时候还是先写html标签
二、Js的三种引入方式
类比css有三种引入方式，这个js也有三种引入方式。因为你也是修饰html标签的
1.相当于行内
2.相当于内联
3.相当于外联
2.1js的初始
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的三种引入方式</title>
<!-- 第二种引入方式，类似css内联
放在任意位置都可以的，并不只是放在head头标签
可以放在网页的任意一个位置
写一个script标签，然后在script标签中写js的语法格式就可以了
-->
<script>
var num = 123;//int num = 123;不用指定数据类型，自动识别
//控制台打印一些，Java System.out.println()
//js控制台打印
console.log(num);
</script>
<!-- 第三种写法类型类似咱们的css的外联 link href
script src属性在当前页面引进外部的css文件
-->
<script src="test.js" type="text/jscript" charset="UTF-8"></script>
</head>
<body>
<!-- 先看第一种写法
button 按钮 有一个属性叫做onclick
这个onclick是当你点击这个按钮的时候执行这个onclick
这个onclick属性值必须写js的代码
alert()是js的代码。它是js封装好的一个函数
这个函数的功能是 弹窗效果！！
-->
<button onclick="alert('弹窗,出来了哦!')">点一下</button>
</body>
</html>
结果如下（示例）：
2.2js输出
使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
-->
</head>
<body>
</body>
<script>
//window是js封装好的一个对象，默认就是在本窗体在调用
// window.alert("使用window调用一个叫alert函数");
//document就是封装好的一个对象，当前文档流对象，当成body的对象
document.write("我是一个页面");
// console.log("呵呵哒");
</script>
</html>
结果如下（示例）：
3.3js语句
类似于java中声明变量如何声明
int a = 12;
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>声明js变量</title>
</head>
<body>
</body>
<script>
// 如何声明一个js变量
var a = 20;
var b = 30;
var c = 40;
console.log(a,b,c);
var d,e,f;
d = 20;
e = 30;
f = 40;
console.log(d,e,f);
// 这个分号带不带都行，但是如果写在一行了，就必须带分号
var name = "狗蛋";var age = 12;console.log(name,age);
</script>
</html>
结果如下（示例）：
四、js的数据类型
number 数字（包含了咱们的整数和浮点数）
String 字符串
boolean 布尔类型
object 对象
array 数组 特殊的object
1.首先在当前项目所在的文件夹外面创建一个test.js的文件，代码如下：
/*
js的基本数据类型：
1.number 包含了整数和小数
2.String 字符串
3.boolean 布尔
关于js的语法格式的注意事项：
1.如果js代码不换行写的话，必须带分号，代表一条语句结束
以后会碰到不换行的写法吗？会，很多！！！
不换行写的时候，执行效率高，但是可读性差
2.变量的命名和java变量命名的规则一摸一样
*/
var num = 10;console.log(num)//控制台打印的一个变量num
//怎么知道这个num变量的数据类型呢 typeof
console.log(typeof num)//查看num这个数据类型的 number
var num1 = 3.141555;
console.log(num1)
console.log(typeof num1);//number
//声明字符串类型的数据
//可以使用单引号，也可以使用双引号
var str1 = "你好";
var str2 = '好的很';
console.log(str1)
console.log(str2)
console.log(typeof str1)//string类型的数据
// 字符串拼接输出打印你好好的很
console.log(str1 + str2)
document.write(str1 + str2);
// 布尔类型的数据只有两个值 true false
var ret1 = true;
var ret2 = false;
console.log(ret1)
console.log(ret2);
console.log(typeof ret1);
//字符串的一些操作，和java中的差不多
str2 = str2 + "睡吧";//字符串的拼接，一般用这个
console.log(str2)
str3 = '大肠刺身'.concat("，羊眼刺身");//字符串拼接方法
console.log(str3);
// 分割一个字符串，把一个字符串变成一个数组
var arr = "生吃鸡蛋，生吃韭菜，生吃腰子".split(",")
console.log(arr)//和java数组长的非常像
console.log(arr[2])//生吃腰子,下标从0开始
console.log(typeof arr)//数组也是object 数组也是一个对象
// 去除空格 trim
var str4 = " 干锅榴莲 ";
console.log(str4)
// str4 = str4.trim()//去除首尾空格
str4 = str4.trimLeft()
str4 = str4.trimRight()
console.log(str4)
代码如下（示例1）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的数据类型</title>
<script>
var num = 23;
console.log(num)//控制台打印
// 单行注释
// 多行注释 /**/
</script>
<!-- 引入外部的js文件 -->
<script src="test.js"></script>
</head>
<body>
<!-- js中声明字符串的时候，单引号双引号都可以，但是双引号中不能再有双引号 -->
<button onclick="alert('是一个弹窗效果')">点一下</button>
</body>
</html>
结果如下（示例1）：
代码如下（示例2）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
</body>
<!-- 使用js的第二种引入方式 -->
<script>
// 对象 以后还会再讲 json对象【重点】
// 主要是 后端Java代码返回一个json字符串，然后前端（js）
// 拿到以后转为一个json对象进行操作
// 全靠这个东西进行前后端数据交互的！！
// 大括号代表的是一个对象，大括号里面的是键值对的数据
var student = {"name" : "李白","age" : 28};
console.log(student)
// 获取name的值，怎么获取？
console.log(student.name)
console.log(student.age)
// 还有一种写法,根据键获取值
console.log(student["name"])
// 刚才让大家看了，数组也是object
// 搞了一个数组，这个数组放了多个对象
var students = [{"name":"狗蛋","age":34},
{"name":"翠翠","age":32},
{"name":"大黄","age":13}]
console.log(students)
//获取第一个对象的name值
console.log(students[0].name)
// 难一点的对象
var students1 = {"java" : [{"name":"京京"},{"name":"红红"},{"name":"花花"}]}
console.log(students1.java[0].name)
//碰到大括号就使用.通过键获取值
// 碰到中括号就使用[]索引来获取值
</script>
</html>
结果如下（示例2）：
代码如下（示例3）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
// 声明一个数组 第一种声明方式
var arr1 = new Array()
arr1[0] = 12
arr1[1] = 23
console.log(arr1)
// 第二种声明方式
var arr2 = ["狗蛋","花花","旺财"];;
// 取数据
console.log(arr2[2])//旺财,和java中一样都是通过索引来取值的
console.log(typeof arr2)//object
</script>
</html>
结果如下（示例3）：
五、运算符和分支结构
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
//运算符
/*
算术运算符: + - * / %
关系运算符: > < >= <= != == ===
逻辑运算符: && || !
*/
/*
分支结构的语法结构:
和java一摸一样
if(){}
if(){} else{}
if(){} else if(){} else{}
*/
var num = 20
if(num > 20){
console.log("heheda")
} else {
console.log("hahada")
}
// ==判断数据一致
console.log(1 == '1')//比较的是内容,不看数据类型 true
console.log(1 === '1')//比较的更加严格,要看数据类型的 false
//switch
var num1 = 3;
switch(num1){
case 1:
console.log("给爸爸打电话")
break;
case 2:
console.log("给妈妈打电话")
break;
case 3:
console.log("给爷爷打电话")
break;
default:
console.log("给奶奶打电话")
break;
}
// 循环
/* js里面的循环 和Java一样,只不过多了一些东西
while{}
for(){}
do{}while()*/
var a = 10
// 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)
// }
// 打印九九乘法表
for(var i = 1; i< 10;i++){
for(var j = 1;j<= i;j++){
document.write(j +" * "+ i+" = " +i*j + "  ")
}
document.write("<br>")
}
var student = {name:"大黄",age:10};
// 也可以使用循环 类似于增强for循环
// 循环出来key值,有了key值能不能获取value的值
for(var studentkey in student){
console.log(studentkey + ":" + student[studentkey])
}
var students = [{"name": "大黄","age":25},{"name":"花花","age":12},{"name":"强强","age":35}]
for(var i = 0;i<students.length;i++){
console.log(students[i].name)
console.log(students[i].age)
}
</script>
</html>
结果如下（示例）：
六、函数
js中函数的语法格式
function 方法名字(参数1，参数2，参数3){
要执行的代码
}
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
// 声明一个函数,函数是一个功能
// function alertInfo(a){//带有一个参数的方法,不用带数据类型
// alert(a)//没有返回值,只是一个弹窗效果
// }
// 函数调用
// alertInfo("呵呵哒")
// function add(a,b){
// return a + b//有返回值的
// }
// var num = add(3,2)
// console.log(num)//NaN not a number 咱们代码出错的时候，额没有报错，但是nan错
function add(a,b,c){//没有方法的重载
return a + b + c
}
var num1 = add(3,2,1)
console.log(num1)
//开发中很少声明同名的方法
// 匿名函数,就是没有名字的函数
var func = function (a,b){
return a + b
}
// 变量名字(),就相当于调用了这个匿名函数
console.log(func(2,3))
// 讲解一下闭包
var arr = [10,5,70,50]
// js中方法的参数可以是一个匿名函数,这个匿名函数被称为闭包
//当a-b是一个整数的话 a 大于 b a 和 b 交换位置
document.write(arr.sort(function(a , b){
return a - b
}))
document.write("<br />")
var arr1 = [10,12,86,35,21]
//js中方法的参数可以是一个匿名函数,这个匿名函数被称为闭包
//当a - b 是一个正数的话 a 大于 b a 和b 就交换位置
document.write(arr1.sort(function(a,b){
return a - b
}))
</script>
</html>
结果如下（示例）：
七、DOM【重要】
我们js要修饰html里面的标签，第一步就是找到标签，然后再对标签加一些效果
document object model 文档对象模型
javascript可以把html的每一个标签看作一个对象
找到标签，然后把标签变成js中的对象
document.getElementById(id属性的值) 返回的是一个对象，通过id的属性值获得的
document.getElementsByClassName(class属性的值) 返回的是一个数组，通过class属性值获取的
document.getElementsByTagName(标签的名字); 返回的是一个数组，通过标签的名字获取的
document.getElementsByName(name属性的值) 返回的是一个数组，通过name属性的值获取的
四个方法的目的都是找到js要修饰的标签对象。css选择器
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<div>大河向东流</div>
</div>
<span class="cls1">红牛</span>
<span class="cls1">雷碧</span>
<span class="cls1">康帅傅</span>
<span class="cls1">大个核桃</span>
<p><span>越成熟越真诚</span></p>
<footer name=ft"">想吃辣条了</footer>
<br />
<!-- onclick单击事件,点一下会执行属性的值 刚好放的是一个js的函数,函数在执行 -->
<button type="button" onclick="divChange()">点一下</button>
<br />
<button onclick="clsChange()">点一下变大变红</button>
<br />
<button onclick="tagChange()">点一下内容变化</button>
<br />
<button onclick="nameChange()">点一下内容变化</button>
</body>
<script>
// 通过id属性获取标签的对象 getElementById
function divChange(){
console.log("qwer")
//1.首先找到div1,通过document把div变成一个对象
// getElementsById 得到元素对象依靠id属性
var div1 = document.getElementById("div1")
console.log(div1)
// innerHTML 获取元素对象的内部包裹的东西
console.log(div1.innerHTML)//打印的是带有标签的!!
// 替换掉div1包裹的内容
div1.innerHTML = "<span>樯橹灰飞烟灭</span>"
}
// 通过class属性获取标签对象 getElementsByClassName
function clsChange(){
// 找到上面的多个span标签对象,验证了一句话,id是唯一的,class是可以有多个的
var cls = document.getElementsByClassName("cls1")
console.log(cls)//碰到数组有什么想法?遍历
for(var i = 0;i < cls.length;i++){
console.log(cls[i])//每一个span对象
// 修饰上面标签的css
console.log(cls[i].style)//获取标签对象的所有属性
cls[i].style.color="red"//将字体的颜色改为红色
// 想要通过js设置样式的时候
// 对象调用style 再调用css样式就行了
// 只不过 css带有- 变为了小驼峰的命名规则
cls[i].style.fontSize="50px"
}
}
// 通过标签的名字获取标签对象 getElementsByTagName
function tagChange(){
// 通过标签的名字来找到要修饰的标签的对象
var tags = document.getElementsByTagName("p")
console.log(tags)
//字体的颜色变为金色的，字体的大小变为50px，内容变为说着玩的
console.log(tags[0])
console.log(tags[0].innerHTML)//带有html标签的
console.log(tags[0].innerText)//不带标签只有文本内容的
//一定要先变为对象，数组是没有这些属性的
tags[0].style.color="gold"
tags[0].style.fontSize="50px"
tags[0].style.fontFamily="楷体"
tags[0].innerText="说着玩的"
}
// 通过name属性获取标签对象 getElementsByName
function nameChange(){
// 通过name属性找到footer标签
var ft = document.getElementsByName("ft")
ft[0].style.color="tomato"
ft[0].style.fontSize="50px"
ft[0].innerHTML="大辣片"
}
</script>
</html>
结果如下（示例）：
八、动态创建div
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="b1">
<!-- 我一点击button按钮
按钮，给我在body标签再创建一个div标签
可以通过js来创建
-->
<button onclick="test()">点我啊！！</button>
</body>
<script>
function test(){
//1.首先找到body标签对象
var b1 = document.getElementById("b1")
// 2.创建一个div标签对象
var div1 = document.createElement("div")
console.log(div1)
// 3.对这个空的div加一些css属性
div1.style.width="300px"
div1.style.height="200px"
div1.style.backgroundColor="red"
div1.innerHTML="我是谁,我在哪"
console.log(div1)
// 4.将新建的div对象放到body对象中就行了
b1.appendChild(div1)
}
</script>
</html>
结果如下（示例）：
7.1DOM的第二种实现方式
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1"></div>
<button>点一下</button>
</body>
<script>
var div1 = document.getElementById("div1")
var btns = document.getElementsByTagName("button")
// 要点击button 对象.属性(事件属性) = 匿名函数
// 这个对象进行某一个操作onclick 单击事件，执行后面匿名函数
// 单击事件onclick
// btns[0].onclick = function(){
// div1.style.width = "500px"
// div1.style.height = "300px"
// div1.style.backgroundColor="red"
// }
// 双击事件ondbclick
// btns[0].ondblclick = function(){
// div1.style.width="500px"
// div1.style.height="300px"
// div1.style.backgroundColor="red"
// }
// 鼠标移入事件onmouseenter
btns[0].onmouseenter = function(){
div1.style.width = "500px"
div1.style.height="300px"
div1.style.backgroundColor="red"
}
</script>
</html>
结果如下（示例）：
九、Window对象
所有浏览器都支持window对象，它代表浏览器的窗口。所有全局JavaScript对象，函数和变量自动成为window对象的成员。全局变量是window对象的属性，全局函数是window对象的方法。我们有时候省略了window，比如alert()弹框效果，全写：window.alert()
9.1window下面的onload属性
onload是浏览器只要被启动，就会执行onload这个属性
onclick是鼠标点击之后才会运行的
首先找到标签对象，拿标签对象调用属性或则方法（匿名函数）
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window的load属性</title>
</head>
<body id="b1">
<div id="div1"></div>
</body>
<script>
// 只要浏览器加载，就会执行onload方法 onload Function(event)
// window.onload = function(){
// var div1 = document.getElementById("div1")
// div1.style.width="500px"
// div1.style.height="200px"
// div1.style.backgroundColor="green"
// }
// window.onload写不写都可以，因为script代码在咱们的页面上肯定会执行的
var div1 = document.getElementById("div1")
div1.style.width="500px"
div1.style.height="200px"
div1.style.backgroundColor="green"
</script>
</html>
结果如下（示例）：
9.2window获取电脑窗体的宽高
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
// 如果这样写的话，ie 5，6，7不行的，不兼容的
// var h = window.innerHeight
// var w = window.innerWidth
// window.document.write(h + ":" + w)
// 所有浏览器都兼容的 || 或，如果
// 兼容的写法，所以js太复杂了，用谷歌和火狐行，但是ie和360等非主流浏览器就不行
var w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth
var h = window.innerHeight||document.documentElement.clientHeight||document.boty.clientHeight
window.document.write(h + ":" + w)
</script>
</html>
结果如下（示例）：
9.3Window提示框
弹框、确认框、输入框、原装的js的这些样式比较难看，不要自己写，用别人封装好的。
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Window提示框</title>
</head>
<body>
<button type="button" id="btn1">提示框</button>
<button type="button" id="btn2">确认框</button>
<button type="button" id="btn3">输入框</button>
</body>
<script>
// 提示框 window.alert()弹框
var btn1 = document.getElementById("btn1")
btn1.onclick = function(){
window.alert("你好，java")
}
// 确认框 window.confirm("你是单身狗吗！")
var btn2 = document.getElementById("btn2")
btn2.onclick = function(){
var ret = window.confirm("你是单身狗吗？")
if(ret){
window.alert("这样我就放心了")
} else{
window.alert("祝你们百年好合")
}
}
// 输入框
var btn3 = document.getElementById("btn3")
btn3.onclick = function(){
var ret = window.prompt()
if(ret > 10){
window.alert("土豪")
} else{
window.alert("穷逼")
}
}
</script>
</html>
结果如下（示例）：
9.4window的返回和前进的效果
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="5window返回和前进的效果.html">走你</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>返回</button>
</body>
<script>
// 返回的效果window.history.back()
var btns = document.getElementsByTagName("button")
btns[0].onclick = function(){
window.history.back()
}
</script>
</html>
结果如下（示例）：
十、综合案例
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- οnsubmit="return infoConfirm()"
写这个的目的是如果你输入的是错误的东西，不让你的数据提交给另外一个页面
如果是对的让你提交
返回值是true或false
如果是true是可以跳转到另外一个页面的，如果是false不可以跳转到另外一个页面
-->
<form action="tset.html" method="get" onsubmit="return infoConfirm()">
<!-- οnfοcus="" input输入框获取焦点的时候会执行这个属性onfocus
-->
姓名：<input type="text" name="name" id="nid" onfocus="clearAttr()" /><span id="nameAttr" class="attr"></span><br />
手机：<input type="text" name="phone" id="pid" onfocus="clearAttr()" /><span id="telAttr" class="attr"></span><br />
<input type="reset" value="重置" />
<input type="submit" value="提交" />
</form>
</body>
<script>
function infoConfirm(){//这个方法的返回值是true或false
var nameInput = document.getElementById("nid")
// 验证用户名是否为空？input输入框对象有一个属性叫value值
// 获取input输入框中的值使用value属性
var name = nameInput.value
console.log(name)
// 姓名的合法性判断
if(name == null || name == ""){
// 用户名不合法不能跳转
// 在输出框旁边弹出提示信息
var sp1 = document.getElementById("nameAttr")
sp1.innerText="用户名不能为空"
sp1.style.color = "red"
// 不能跳转
return false
}
// 手机号码的合法性判断
// 1.判断手机号码是否为空
var telInput = document.getElementById("pid")
var tel = telInput.value
if(tel == null || tel == ""){
var sp2 = document.getElementById("telAttr")
sp2.innerText="手机号码不能为空"
sp2.style.color = "red"
// 不能跳转
return false
}
// 2.手机号输入不规范，例如：1111111111111
// 验证手机号码的格式，正则表达式
// 正则表达式上百搜
var reg = /^1[3456789]\d{9}$/
// reg.test(tel) input输入框中的数和reg进行模糊匹配，如果匹配不上就返回false
if(!reg.test(tel)){
// tel格式有问题
var sp2 = document.getElementById("telAttr")
sp2.innerText="手机号码的格式不正确"
sp2.style.color = "red"
// 不合法不能跳转
return false
}
}
// 获取焦点之后才执行此方法
function clearAttr(){
var attrs = document.getElementsByClassName("attr")
for (var i = 0; i < attrs.length; i++) {
attrs[i].innerText = ""
}
}
</script>
</html>
结果如下（示例）：
总结
提示：这里对文章进行总结：还没想好总结
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
