JavaScript
JavaScript基础
1. JavaScript的发展历史(了解)
1995年 网景公司研发了第一个商用浏览器 js最开始出现的目的是为了解决表单提交
是布兰登艾奇 利用10天时间解决了表单提交问题 借鉴liveScript---JavaScript
JavaScript和Java有什么区别
微软也研发浏览器 1995年 发布了IE3.0----自己研发了一个类似于js的东西
研发了一套标准：ECMAScript1.0 es1
现在用的最广泛的标准是ECMASCript5.0简称es5 ECMASCript6.0---简称es6
2. JavaScript介绍
2.1.网站组成
HTML--超文本标记语言---结构
CSS---层叠样式表-----样式
js---js脚本语言---网站交互
2.2.什么是JavaScript
基于对象和事件驱动的解释性脚本语言
- 基于对象：JavaScript 是一种基于对象的语言，这意味着它能运用自己已经创建的对象，因此，许多功能可以来自脚本环境中对象的方法与脚本的相互作用。
- 事件驱动：JavaScript 可以直接对用户或者客户输入做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行。
- 解释性
- 解释性：可以直接识别，读一行执行一行
- 编译性：高级语言，c c++ ,先编译计算机能识别的，再执行（速度快）
2.3.JavaScript的特性
基于对象
事件驱动
解释性
跨平台
2.4.JS的组成
ECMASscipt：js的标准 这个标准里面有js的语法和常用对象
DOM Document Object Modal 文档对象模型
BOM Browser object Modal 浏览器对象模型
3.代码初识
JS引入方式
3.1 行间引入
<!-- 第一种 行间引入 将js的语法直接写在开始标签上
注意：双引号不能嵌套双引号 单引号也不能嵌套单引号 但是双引号和单引号可以相互嵌套
onclick 鼠标点击事件
alert("提示信息") 浏览器弹窗
缺点:结构行为不分离 不方便后期维护
-->
<button onclick="alert('今天周一')">提交</button>
3.2 内部引入
<!--
第二种 内部引入
js代码放在script标签中 script标签可以放在任意位置 代码的执行顺序是从上往下执行
建议：一般放在head和body的末尾 是因为js一般都是操作标签 我们要确保标签先加载出来
缺点:结构行为不分离
-->
<script>
//浏览器弹窗
alert("弹走弹走6")
//操作div标签 操作p标签
</script>
3.3 外部引入
<!-- 第三种 外部引入
在外部创建js文件 通过script标签的src属性引入文件 src="js文件路径"
注意:引入外部文件的script标签 里面不能再写其他的js脚本
-->
<script src="./1.js">
// alert("没有弹走") 不要在这里面再写其他的js代码
</script>
<script>
alert("没有弹走")
</script>
3.4 语法规则与注释
<body>
<!-- 注释
单行注释 // 一行js代码 快捷键是ctrl+/
多行注释 /* 多行js代码 */ 快捷键是ctrl+shift+/
-->
<!-- js的语法
1-每行语句后面要加;
2-js中严格区分大小写，有时候会使用驼峰命名 fontSize
-->
<script>
/* */
//
alerT("123");
</script>
</body>
4. JavaScript的调试语句
js调试:在实际开发过程中用于检测代码的功能的一种方式
4.1alert()
- 语法: alert(提示信息)
- 作用: 在页面中弹出警告框，用于提示
- 缺点: 阻塞性的弹窗 一次只能输出一个
<script>
alert("提示信息");
alert("你在说什么");
console.log("123")
</script>
4.2 console.log()
- 语法：console.log(输出信息)
- 作用：在控制台打印信息 多个输出之间用逗号隔开
<script>
//2.console.log()
console.log("中午吃啥");
console.log("米饭","泡面","西北风");
</script>
4.3 打断点
- 在sources找到当前运行的文件—在打断点的代码行号上点击
5. 变量
- 概念:存储数据的容器 称作变量(标识符) 给存储数据的区域起个名字
- 语法: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 只是声明了变量 但是没有赋值
- 变量的命名规则
- 以数字 字母 下划线 $组成,但是不能以数字开头
- 不能使用关键字和保留字
- 见名知意 使用驼峰命名（大驼峰和小驼峰都可以）
- 变量不要重名 重名会覆盖
6.JS基础交互
获取标签
6.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>
6.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>
5.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)
注意：通过类名和标签名获取拿到的都是一个集合，都需要通过集合名[下标]来获取具体某一个标签
6.3 鼠标事件
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>
7. 操作标签
操作标签内容分为两种
- 操作闭合标签内容
- 操作表单标签内容
7.1操作表单标签内容
- 获取：标签.value
- 设置 ：标签.value = 值
<script>
var oInput = document.getElementsByTagName("input")[0]
//1.获取表单元素的value值 标签.value
console.log(oInput);
console.log(oInput.value)
//2.设置表单元素的value值 标签.value = 值
// oInput.value = "456"
// 2.点击设置按钮 给表单元素设置value为456
// 给button添加点击事件 标签.onclick = fucntion(){ 要做的事}
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
oInput.value = "456"
}
</script>
7.2操作闭合标签内容
- 获取： 标签.innerText 标签.innerHTML
// 1.获取闭合标签的内容 标签.innerHTML 标签.innerText
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv);
console.log(oDiv.innerHTML);//今天周二了
console.log(oDiv.innerText);//今天周二了
- 设置：标签.innerText = 值 标签.innerHTML = 值
// 2.设置闭合标签的内容 标签.innerHTML = 值 标签.innerText = 值
//先将原先的内容拿出来(标签.innerHTML) 和 赵四链接在一起
oDiv.innerHTML = oDiv.innerHTML + "赵四"
oDiv.innerText = "123"
//3.给p标签设置内容 innerHTML和innerText的区别
var oP = document.getElementsByTagName("p")[0];
console.log(oP)
// oP.innerHTML = "<b>主人下马客在船</b>"
oP.innerText = "<b>蒋前进</b>"
- innerText和innerHTML的区别
相同点:都可以获取标签内容 都可以设置标签内容，设置的时候 两者都会重写
不同点：innerText不识别标签 innerHTML识别标签
7.3 操作标签属性
属性:属性是在开始标签上 属性名=“属性值”
-
获取：标签.属性名
-
设置：标签.属性名 = 值
-
特殊：class需要写成className设置
<script>
var oDiv = document.getElementById("wrap");
// 1.获取属性 标签.属性名 特殊：class需要用className获取
console.log(oDiv.id);//wrap
console.log(oDiv.className);//box
var oA = document.getElementsByTagName("a")[0];
console.log(oA.href);//https://www.baidu.com
// 2.设置属性 标签.属性名 = 值 特殊：class需要className设置
oDiv.id = "wrap1";
oDiv.className = "box1";
oA.href = "https://wwww.jd.com";
</script>
7.4操作标签样式
注意：操作的都是行间样式
- 获取：标签.style.样式名
- 设置：标签.style.样式名 = 值
- 特殊：如果样式带连字符- 需要改写成驼峰名 例如background-color改为backgroundColor
<script>
// 以下操作的都是行间样式
var oDiv = document.getElementsByTagName("div")[0];
// 1.获取样式 标签.style.样式名 注意：如果是-链接的样式 需要改成小驼峰命名 例如background-color改为backgroundColor
console.log(oDiv.style.width);//200px
console.log(oDiv.style.height);//200px
console.log(oDiv.style.color);//
console.log(oDiv.style.backgroundColor);//red
var btn = document.getElementsByTagName("button")[0];
// 2.设置样式 标签.style.样式名 = 值 注意：如果是-链接的样式 需要改成小驼峰命名 例如background-color改为backgroundColor
btn.onmouseover = function () {
oDiv.style.width = "500px";
oDiv.style.backgroundColor = "teal";
}
</script>
- cssText语法
// 1.获取元素
var oDiv = document.getElementsByTagName("div")[0];
var btn = document.getElementsByTagName("button")[0];
// 2.添加点击事件
btn.onclick = function(){
// 添加宽高背景色
oDiv.style.width = "200px";
oDiv.style.height = "200px";
oDiv.style.backgroundColor = "teal";
//cssText会重写style行间样式
// oDiv.style.cssText = "width:200px;height:200px;background-color:pink" ;
}
8.数据类型
数据类型:根据数据的特征，功能分为不同的数据类型 不同的数据类型有不同的操作
8.1 数据类型的分类
六大数据类型：五种基本数据类型和一个特殊类型
五种基本数据类型
number 数值类型 10 40 60
string 字符串类型 "123" "1000" '123'
boolean 布尔类型 true|false
undefined 未定义
null 空对象
一种特殊类型(复合类型 对象类型 引用类型)
object 对象类型 {'name':'李四',age:20}
array 数组 [10,20,30,40]
function 函数 function(){}
8.2 typeof
- 作用：检测数据类型
- 语法：typeof(检测的数据) typeof 检测的数据
<script>
// 检测number类型
var a = 10;
// 1.typeof(检测的数据) 返回检测结果
console.log( typeof(a) );//number
// 2.typeof 检测数据
console.log( typeof a );//number
var s1 = "ertyuiopdfghjkl";
console.log( typeof s1 );//string
console.log(typeof(123),1);//number 1
console.log(typeof("123"),"检测数据");//string "检测数据"
</script>
8.3 number数值
- number数值类型 整数 小数 负数 8进制 16进制 NaN
<script>
// number数值类型:整数 小数 负数 8进制 16进制 NaN
// 1.整数
var a = 10;
console.log(a, typeof (a));//10 'number'
// 2.小数
var n1 = 3.1415926;
console.log(n1, typeof (n1));//3.1415926 'number'
var n2 = .5;
console.log(n2, typeof (n2));//0.5 'number'
var n3 = 5;
console.log(n3, typeof (n3));// 'number'
// 3.NaN not a number 不是一个数 运算得不到正确的结果的时候
var n7 = 10 / "你好";
console.log(n7, typeof (n7));//NaN 'number'
// 在js中 == 意思是左边的是否和右边的相等 如果相等返回true 否则返回false
console.log(1 == 2);//false
// 任意两个NaN都不相等
console.log(NaN == NaN);//false
/*------------------------------了解-----------------------------*/
// 浏览器是显示10进制的数
//4. 8进制:以0开头 范围在0-7之间
var n4 = 070;
console.log(n4, typeof (n4));//56
var n5 = 0771;
console.log(n5, typeof (n5));//505
// 5. 16进制 以0x开头 范围0-9 a-10 b-11 c-12 d-13 e-14 f-15
var n6 = 0xff;
console.log(n6, typeof (n6))
// 6.小数在运算的时候会精度缺失
//是因为计算机在计算的时候 是先将数转换为二进制进行计算，在转换过程中出现精度缺失
var n8 = 0.1 + 0.2
console.log(n8);//0.30000000000000004
console.log(n8 == 0.3);//false 不要把小数运算作为判断条件 是不会影响代码的执行的
</script>
- NaN not a number 不是一个数
// 3.NaN not a number 不是一个数 运算得不到正确的结果的时候
var n7 = 10 / "你好"; // / 除 *乘
console.log(n7, typeof (n7));//NaN 'number'
8.4 string字符串
string字符串:引号引起来的都是字符串 (“” ‘’)，所有从页面中获取的聂荣都是字符串类型
- 字符串.length ：获取字符串的长度
- 字符串[下标] ：获取对应下标的字符 下标都是从0开始
- 字符串.charAt(下标) 获取对应下标的字符
- 字符串遇到+ 会拼接
<script>
// 1.string类型 用引号引起来的都是string类型
var s1 = "123";
console.log(s1,typeof(s1));// "123" "string"
var s2 = "0711web";
console.log(s2,typeof(s2));// "0711web" "string"
var s3 = "中公教育软件学员2022年0711web";
// 2.字符串.length 获取字符串的长度
console.log( s1.length );//3
console.log( s2.length);//7
//3.字符串[下标] 获取对应下标的字符 下标都是从0开始
var res = s1[1];
console.log(res);//2
var res1 = s2[4];
console.log(res1)//w
console.log( s3[3]);//育
//4.字符串.charAt(下标) 获取对应下标的字符
var res2 = s3.charAt(0);
console.log(res2);//中
console.log(s3.charAt(7));//员
//5.字符串遇到+ 会拼接
console.log(1 + 1);//2
console.log(1 + '1');//"11" 是字符串的类型11
console.log(10 + 5 + '30');//"1530"
console.log( "30"+ 10 + 5);// "3010" + 5 = "30105"
console.log(10 + "30" + 5);// "10305"
</script>
8.5 boolean布尔类型
<script>
// boolean类型 true和false
var b1 = true;
console.log(b1,typeof(b1));// true "boolean"
var b2 = false;
console.log(b2,typeof(b2));// false "boolean"
</script>
8.6 null与undefined
8.6.1 undefined
undefined未定义 去拿快递 但是没有你的快递包裹
var b = undefined;
console.log(b,typeof(b));// undefined "undefined"
8.6.2 null
null 空对象 快递员给了你一份空包裹
var a = null;
console.log(a,typeof(a));// null "object"
扫一扫
857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
