1.什么是JavaScript
基于对象和事件驱动的解释性脚本语言
- 基于对象：JavaScript 是一种基于对象的语言，这意味着它能运用自己已经创建的对象，因此，许多功能可以来自脚本环境中对象的方法与脚本的相互作用。
- 事件驱动：JavaScript 可以直接对用户或者客户输入做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行。
- 解释性
- 解释性：可以直接识别，读一行执行一行
- 编译性：高级语言，c c++ ,先编译计算机能识别的，再执行（速度快）
1.1JavaScript的特性
基于对象
事件驱动
解释性
跨平台
1.2JS的组成
ECMASscipt：js的标准 这个标准里面有js的语法和常用对象
DOM Document Object Modal 文档对象模型
BOM Browser object Modal 浏览器对象模型
2.代码初识
2.1 JS引入方式
2.1.1 行间引入
<!-- 第一种 行间引入 将js的语法直接写在开始标签上
注意：双引号不能嵌套双引号 单引号也不能嵌套单引号 但是双引号和单引号可以相互嵌套
onclick 鼠标点击事件
alert("提示信息") 浏览器弹窗
缺点:结构行为不分离 不方便后期维护
-->
<button onclick="alert('今天周一')">提交</button>
2.1.2 内部引入
<!--
第二种 内部引入
js代码放在script标签中 script标签可以放在任意位置 代码的执行顺序是从上往下执行
建议：一般放在head和body的末尾 是因为js一般都是操作标签 我们要确保标签先加载出来
缺点:结构行为不分离
-->
<script>
//浏览器弹窗
alert("弹走弹走6")
//操作div标签 操作p标签
</script>
2.1.3 外部引入
<!-- 第三种 外部引入
在外部创建js文件 通过script标签的src属性引入文件 src="js文件路径"
注意:引入外部文件的script标签 里面不能再写其他的js脚本
-->
<script src="./1.js">
// alert("没有弹走") 不要在这里面再写其他的js代码
</script>
<script>
alert("没有弹走")
</script>
2.1.4 语法规则与注释
<body>
<!-- 注释
单行注释 // 一行js代码 快捷键是ctrl+/
多行注释 /* 多行js代码 */ 快捷键是ctrl+shift+/
-->
<!-- js的语法
1-每行语句后面要加;
2-js中严格区分大小写，有时候会使用驼峰命名 fontSize
-->
<script>
/* */
//
alerT("123");
</script>
</body>
2.2 JavaScript的调试语句
js调试:在实际开发过程中用于检测代码的功能的一种方式
2.2.1alert()
- 语法: alert(提示信息)
- 作用: 在页面中弹出警告框，用于提示
- 缺点: 阻塞性的弹窗 一次只能输出一个
<script>
alert("提示信息");
alert("你在说什么");
console.log("123")
</script>
2.2.2 console.log()
- 语法：console.log(输出信息)
- 作用：在控制台打印信息 多个输出之间用逗号隔开
<script>
//2.console.log()
console.log("中午吃啥");
console.log("米饭","泡面","西北风");
</script>
2.2.3 打断点
- 在sources找到当前运行的文件---在打断点的代码行号上点击
2.3 变量
- 概念:存储数据的容器 称作变量(标识符) 给存储数据的区域起个名字
- 语法:var 变量名 = 值
基础用法
<script>
// 1.声明变量--基础用法
var a;
console.log(a);//undefined 未定义 声明了变量但是没有赋值
//2 赋值 读法：将右侧数据123赋值给左边的变量a
a = "123";
console.log(a);//123
//3.声明变量和赋值同时进行
var b = "456";
//4.同时声明多个变量 逗号意味着这行代码没有结束
var c = "泡面", d = "赵四";
console.log(c, d)//泡面 赵四
//5.连等写法 x y的值都是”789
var x = y = "789";
console.log(x, y);// 789 789
</script>
特殊用法
//6.特殊用法 不建议使用
t = "10";//全局变量
console.log(t);//10
console.log(a1);//a1 is not defined 没有声明没有赋值
var a2;
console.log(a2);//undefined 只是声明了变量 但是没有赋值
- 变量的命名规则
- 以数字 字母 下划线 $组成,但是不能以数字开头
- 不能使用关键字和保留字
- 见名知意 使用驼峰命名（大驼峰和小驼峰都可以）
- 变量不要重名 重名会覆盖
3.JS基础交互
3.1 获取标签
3.1.1通过id获取标签(元素)
- 语法:document.getElementByid("id名")
- 作用:通过id名获取标签，可以获取到具体的某一个
<body>
<div id="box">这是一个盒子</div>
<div id="box"></div>
<ul id="wrap">
<li>泡面</li>
<li>米饭</li>
<li id="list">尼古拉斯赵四</li>
</ul>
<script>
// 1.通过id获取元素 选择到具体的某一个
// 通过id获取 document.getElementById("id名字")
var oDiv = document.getElementById("box")
console.log(oDiv)
var oList = document.getElementById("list")
console.log(oList)
var oWrap = document.getElementById("wrap")
console.log(oWrap)
</script>
</body>
3.1.2通过类名获取标签(元素)
- document.getElementsByClassName("类名")
- 作用:获取整个文档下对应的类名标签
- 获取集合中某一个具体的标签：集合[下标/序号]
<body>
<div class="box1">盒子1</div>
<div class="box1">盒子2</div>
<div class="box1">盒子3</div>
<div class="box1">盒子4</div>
<div class="box1">盒子5</div>
<ul class="wrap">
<li>这是li标签1</li>
<li>这是li标签2</li>
<li class="box1">这是li标签3</li>
<li>这是li标签4</li>
</ul>
<script>
//1.通过类名获取标签 document.getElementsByClassName("类名") 获取整个文档下的该类名的标签
//通过类名获取到的是一个集合 如果想获取到这个集合中的某一个具体元素 集合[序号/下标]
var oDivs = document.getElementsByClassName("box1");
console.log(oDivs);//HTMLCollection(6)
console.log(oDivs[0]);//获取集合中的第一个盒子
console.log(oDivs[4]);//获取集合中的第五个盒子
console.log(oDivs[6]);//undefined
</script>
</body>
- 父元素.getElementsByClassName("类名")
- 作用:获取该父元素下对应的类名标签
<body>
<div class="box1">盒子1</div>
<div class="box1">盒子2</div>
<div class="box1">盒子3</div>
<div class="box1">盒子4</div>
<div class="box1">盒子5</div>
<ul class="wrap">
<li>这是li标签1</li>
<li>这是li标签2</li>
<li class="box1">这是li标签3</li>
<li>这是li标签4</li>
</ul>
<script>
console.log(oDivs[6]);//undefined
//2.通过父元素获取 父元素.getElementsByClassName("类名") 获取该父元素下的类名标签
var father = document.getElementsByClassName("wrap")[0];
var child = father.getElementsByClassName("box1")[0];
console.log(child)
// 3.注意 通过类名获取的是一个集合 哪怕这个集合中有一个元素 也得加下标/序号
</script>
</body>
3.1.3通过标签名获取标签(元素)
- document.getElementsByTagName("标签名")
- 获取整个文档下对应的标签名 获取到的是一个集合
<body>
<div class="box1">这是div标签1</div>
<div class="box1">这是div标签2</div>
<div class="box1">这是div标签3</div>
<div class="box1">这是div标签4</div>
<div class="box1">这是div标签5</div>
<div class="box1">这是div标签6</div>
<div class="box1">这是div标签7</div>
<div class="box1">这是div标签8</div>
<div class="box1">这是div标签9</div>
<div class="box1">这是div标签10</div>
<ul id="wrap">
<li>
<div>这是li列表</div>
</li>
<li>
<div>这是li列表</div>
</li>
<li>
<div>这是li列表</div>
</li>
</ul>
<script>
// 1.通过标签名获取标签 document.getElementsByTagName 获取整个文档下的对应标签
var oDivList = document.getElementsByTagName("div");
console.log(oDivList);//HTMLCollection(10)
console.log(oDivList[9]);
</script>
</body>
- 父元素.getElementsByTagName("标签名")
- 获取该父元素下对应的标签
// 2.父元素.getElementsByTagName("标签名") 获取该父元素下对应的标签
var father = document.getElementById("wrap");
var child = father.getElementsByTagName("div");
console.log(child);//HTMLCollection(3)
注意：通过类名和标签名获取拿到的都是一个集合，都需要通过集合名[下标]来获取具体某一个标签
3.2 鼠标事件
注意:onmouseover和onmouseenter及onmouseout和onmouseleave的区别放在事件冒泡讲
onclick : 点击事件
ondblclick:鼠标双击
onmouseover/onmouseenter : 鼠标移入事件
onmouseout/onmouseleave: 鼠标移出事件
onmousemove : 鼠标移动事件
onmousedown : 鼠标按下
onmouseup : 鼠标抬起
oncontextmenu: 鼠标右键显示菜单
-
语法
标签.事件类型 = function(){ 执行某个动作之后 要执行的逻辑代码 }
<body>
<div id="box"></div>
<script>
// 需求：点击盒子之后 弹窗内容 马上吃饭 alert("马上吃饭")
// 标签.事件类型 = fucntion(){ 要执行的代码}
// 1.获取标签
var oDiv = document.getElementById("box");
//2.绑定事件----onclick 点击事件
oDiv.onclick = function () {
//3.要执行的代码
// alert("马上吃饭")
console.log("单击")
}
// //3.双击事件
oDiv.ondblclick = function(){
alert("双击");
}
// 4.鼠标移入
oDiv.onmouseover = function(){
console.log("移入");
}
// 5.鼠标移出
oDiv.onmouseout = function(){
console.log("移出")
}
// 6.鼠标移动
oDiv.onmousemove = function(){
console.log("移动")
}
// 7.鼠标按下
oDiv.onmousedown = function(){
console.log("按下")
}
// 8.鼠标抬起
oDiv.onmouseup = function(){
console.log("抬起")
}
// 9.右键显示菜单
oDiv.oncontextmenu = function(){
console.log("显示右击菜单")
}
// 10.鼠标移入
oDiv.onmouseenter = function(){
console.log("移入123")
}
// 11.鼠标移出
oDiv.onmouseleave = function(){
console.log("移出123")
}
</script>
</body>
扫一扫
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
