第一部分,JavaScript的基本使用:
(1)JavaScript是什么?
JavaScript原名livescript,是一门动态类型,弱类型基于原型的脚本语言。
它是结合HTMl使用的一种脚本语言。(不能单独运行JS文件哦!!!)
注意:别多想了!和Java没一毛钱关系,最多语法看起来有点把像而已,别多想了!!
(2)JavaScript的作用:
第一个:页面特效
第二个:前后交互
第三个:后台开发(node)
(3)JavaScript写在哪里?
第一种:Script标签里
第二个:外部的js文件内
小知识点:
解释型语言:不需要编译,只有在运行你代码的时候才会编译然后运行,也就是每运行一次都要编译一次。(JavaScript是解释型语言)
编译型语言:一次性编译成机器语言,运行一次直接就编译好了,可以直接用了。
(1)JS写在哪?
1.写在script标签里面;
2.写在外部的js文件内,然后引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的基本使用</title>
</head>
<body>
<!--建议将JS写在body的底部(就像下面这样,靠近body结束标签就称body的底部),因为在这里的在页面加载的同时就会执行这些js事件!-->
<!--第一种使用方法:写在Script标签里面-->
<script>
// 让页面弹出一个123
alert("123");
</script>
<!--第二种使用方法:写在外部的js文件内,然后引入。-->
<script src="js1.js"></script>
</body>
</html>
3.直接写在标签内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的基本使用</title>
</head>
<body>
<!--第三种使用方法:直接写在标签内-->
<button onclick="add()">我是按钮</button>
<script>
//add为函数名,注意这样写和常规写事件的不同!
function add() {
alert(123);
}
</script>
</body>
</html>
js文件内容为:
(2)JS一些注意事项:
1.严格区分大小写
2.每一行完整语句后面加分号
3.变量名不能使用关键字和保留字(如:char,byte)以及数字
4.代码要缩进,保持可读性
(3)JS获取和修改元素的方法:
小知识点:元素就是页面里的标签,元素即标签,标签即元素,二者为一物。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS获取元素</title>
</head>
<body id="by1">
<p id="p1" class="p2" name="p3">我是一个段落</p>
<script>
// 注意:JS里面一次只能赋予一个元素事件,不能同时给多个!!!
// 所以:在下面头四种获取元素的方法中,只有id不用加下标,因为id是唯一的,可以保证一次只给一个赋予事件
// 但是,另外三种,通过class,标签名还有name属性获取元素的方法都要加下标,因为这几个都不是唯一的!!
// 第一种获取元素的方法:通过id获取元素
var p11 = document.getElementById("p1"); //var:定义变量名的关键字; p11:变量名
// console.log(p11); 在浏览器页面的控制台打印p11,可以发现p11就是p这个元素(包括里面的文本内容)。
// innerText:JS里修改内容的方法 innerHTML也是修改内容的方法
p11.innerText = "我不是段落";
var by11 = document.getElementById("by1");
console.log(by11.innerHTML); //会发现innerHTML和innerText方法都是获取内容,从而可以修改获取的内容。
console.log(by11.innerText); //但是innerHTML会获取所有内容(包括文本和相应的标签);但innerText只会获取文本内容。
//所以innerHTML可以改文本同时改标签;但是innerText就只能改文本了!!!
// 第二种获取元素的方法:通过class获取元素 [0]称为下标 ,有两种加下标的方法:
var p11 = document.getElementsByClassName("p2")[0]; //第一种加下标的方法:注意:必须加下标,哪怕要修改的元素只有一个也要加,下标从0开始
p11.innerText("我不是段落啊 Class"); //第二种加下标的方法。 p11[0].innerText()
// 第三种获取元素的方法:通过标签名获取元素
var p11 = document.getElementsByTagName("p")[0];
p11.innerText = "我不是段落啊啊";
//第四种获取元素的方法:通过name的属性值获取元素 一般用于input。
var p11 = document.getElementsByName("p3")[0];
p11.innerText = "我不是一个段落呀呀呀";
// 第五种获取元素的方法:通过CSS选择器(selector)获取元素 分为两种:
// 第一个:通过CSS选择器document.querySelector()这个方法只能获取一个,选择器是可以有多个一样的(比如用类选择器,有多个标签的类属性值一样)
// 但是这个方法只会获取最先获取的一个(代码从上往下执行),所以不会报错。
// 加下标想指定下面的具有一样类属性值的标签这种方法是没用的,反而会使这个方法都没效果了。
var p11 = document.querySelector(".p2"); //注意:不支持伪类选择器,不支持伪元素
p11.innerText = "我不是一个段落咩咩";
// 第二个:通过CSS选择器document.querySelectorAll()获取所有。 但是JS一次只能赋予一个元素事件,所以又要加下标了哦!
var p11 = document.querySelectorAll(".p2")[0];
p11.innerText = "我不是一个段落哦哦 哦"
</script>
</body>
</html>
第二部分,简单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单事件</title>
</head>
<body>
<button id="btn1">我是按钮</button>
<select name="address" id="address"></select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<script>
// 获取元素
var btn = document.getElementById("btn1");
// 第一个:鼠标的单击事件 重点!
btn.onclick = function(){
alert(123);
}
// 第二个:鼠标的双击事件
btn.ondblclick = function () {
alert(321);
}
// 如果对一个元素同时设置单击事件和双击事件,不管这俩谁在上面谁在下面,单击事件都是优先执行,而双击事件不再执行
// 第三个:鼠标滑入事件 重点!
btn.onmouseenter = function (ev) {
btn.innerText = "按钮"
}
// 第四个:鼠标滑出事件 重点!
btn.onmouseleave = function (ev) {
btn.innerText = "我是按钮啊"
}
// 第五个:窗口变换 可以用来判断窗口是否变化,并确定变化的比例值大小。
window.onresize = function (ev) {
console.log("窗口变化"); //在浏览器的控制台,你放大缩小浏览器窗口,会发现改变的次数会变大
}
// 第六个:改变下拉框 可以用来做省级联动(当你选中第一级省份下拉框中的一个值时,第二级市级下拉框变为相应的省的市的下拉框)
var add = document.getElementById("address");
add.onchange = function (ev) {
console.log("下拉框改变了"); //在浏览器控制台,当你点击一个下拉框的的选项时,会发现改变的次数随你点击的次数变大。
//但是次数最多是你下拉框选项的个数,当超出后再点击次数不会增大。
}
</script>
</body>
</html>
拓展:监听事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听事件</title>
</head>
<body>
<button id="btn1">点击按钮</button>
<script>
var btn = document.getElementById("btn1");
// 如果像下面这样,想要通过单击事件实现点击按钮两次。 但是不行,结果只会执行下面那个单击事件
// btn.onlick = function () {
// console.log(1);
// };
// btn.onclick = function () {
// console.log(2);
// };
// 上面不行,引入新方法,使用监听事件!!!
// 通过监听事件可以同一时间给一个元素赋予多个事件,并且都会执行
// 设置一个监听事件 给元素添加一个监听的事件(单击事件)。
btn.addEventListener("click",function () {
console.log(1)
});
btn.addEventListener("click",function () {
console.log(1)
})
</script>
</body>
</html>
第三部分,修改样式:
(1)JS修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改样式</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
var box = document.getElementsByTagName("div")[0];
box.onclick = function () {
// 格式为:Obj.style[变量] = 变量名 注意这个是针对变量的,在题中有应用!
//格式为:Obj.style.样式 = “样式内容” 这个是针对常量的,就像下面
box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "blue"
}
</script>
</body>
</html>
(2)JS操作标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS操作标签属性</title>
</head>
<body>
<div id="div1"></div>
<script>
// 注意:标签属性分为两种:合法属性(如:class,id)和自定义属性(包括合法属性和自定义的属性)
var box = document.getElementById("div1");
//第一种:合法属性:class 下面是JS操作标签合法属性的增删改查!!!
box.className = "div2"; //当标签中不存在class属性时,增加
box.className = "div3"; //当标签中存在class属性时,改
console.log(box.className); //查询 在浏览器控制台可以查看到想要查看的属性值
box.removeAttribute("class"); //删除 在浏览器控制台可以发现class这个属性已经没了
// 第二种:自定义属性 下面是JS操作标签自定义属性的增删改查!!!
box.setAttribute('name',"div2"); //增
box.setAttribute("name","div3"); //改
console.log(box.hasAttribute("name")); //查
box.removeAttribute("name"); //删
</script>
</body>
</html>
第四部分,数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型</title>
</head>
<body>
<!--小知识点:JS是弱类型!-->
<!--弱类型:申明变量的时候,不需要对数据类型进行定义;-->
<!--强类型:申明变量的时候,需要对数据类型进行定义。-->
<script>
// 基础数据类型:
// 1.数字
var a = 123;
console.log(typeof a); //在控制台查看变量a是很么数字(number)类型。
// 2.字符串
var b = '123';
console.log(typeof b); //string
// 3.布尔
var c = true;
console.log(typeof c); //boolean
// 4.未定义
var d;
console.log(typeof d); //undefined
// 5.空
var e = null; //null 空属于一个对象,叫空对象。
console.log(typeof e); //注意:null类型进行typeof操作符后,结果是object。原因:null类型被当做一个空对象引用。
// 6.对象数据类型:
// 对象
var f = [1,23,4];
console.log(typeof f); //object
var g = {name : "china",age : 5000};
console.log(typeof g); //object
</script>
</body>
</html>