三篇文章快速全面了解主流脚本语言——JavaScript（1）---基础

半离岛

于 2023-06-18 17:00:00 发布

阅读量293

点赞数

分类专栏：全栈开发学习记录文章标签： javascript 开发语言 ecmascript css html5 python 前端

本文链接：https://blog.csdn.net/m0_52336378/article/details/131264004

版权

全栈开发学习记录专栏收录该内容

10 篇文章 5 订阅

订阅专栏

前言

对JavaScript的一些说明与了解

解释型语言

JavaScript是一门解释型语言，所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。

动态语言

JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们以后再谈。不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术，所以JavaScript可能是运行速度最快的动态语言了。

类似于 C 和 Java 的语法结构

JavaScript的语法结构与C和Java很像，向for、if、while等语句和Java的基本上是一模一样的。所以有过C和Java基础的同学学习起来会轻松很多。不过JavaScript和与Java的关系也仅仅是看起来像而已。

基于原型的面向对象

JavaScript是一门面向对象的语言。
Java也是一门面向对象的语言，但是与Java不同JavaScript是基于原型的面向对象。

严格区分大小写

JavaScript是严格区分大小写的，也就是abc和Abc会被解析器认为是两个不同的东西。

一. JavaScript基本使用

1. JS代码位置

1.1 写在 script 标签里面

<body>
<script>
    alert(123);
</script>
</body>

alert是JS内置弹窗函数

1.2 写在外部的 js 文件内，然后引入

alert(456)

<body>
<script src="xuyuan.js"></script>
</body>

新建一个js文件：（不需要添加script标签）

2. JS修改元素内容

1.首先获取id为XXX的元素
document.getElementById(“xxx”);
2.var 是 js 定义变量的关键字
3.使用innerHTML 和 innerText 可以修改/获取

代码

<body>
<p id="txt">这是段落</p>
<script>
    var txtDom = document.getElementById('txt');
    txtDom.innerText = '我是我';
</script>
</body>

innerHTML和innerText二者的区别

innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText指的是从起始位置到终止位置的内容,但它去除Html标签。
同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。

两种使用情况

方法一（直接进行修改元素内容）

<body>
<p id="txt">这是段落</p>
<script>
    var txtDom = document.getElementById('txt');
    txtDom.innerText = '我是我';
</script>
</body>

方法二（函数绑定调用修改）

<body>
<p id="p1">这是段落</p>
<button type="button" onclick="xuyuan()">点一下</button>
<script>
    function xuyuan() {
        document.getElementById("p1").innerHTML = "段落已被更改。";
    }
</script>
</body>

补充解释
onclick鼠标单击，
function功能，
document文件，
getElementById取元素名字，
innerHTML内容

3. JS获取元素

1. id元素获取（getElementById）

<body>
	<p id="p1">这是段落</p>
	<script>
	    var ppt = document.getElementById('p1');
	    ppt.innerText = '我是我';
	</script>
</body>
innerText修改文本内容

1. 给p标签加div，加一个var对象

<body>
<div id="div1">
    <p id="p1">这是段落</p>
</div>
<script>
    var box = document.getElementById('div1')
    var ppt = document.getElementById('p1');
//     ppt.innerText = '我是我';
    ppt.innerHTML = '我是他';

	console.log(box.innerText);
	// console.log(box.innerHTML);
</script>
</body>

补充解释
console.log—在控制台进行打印
box.innerText—返回文本内容
box.innerHTML—返回标签+文本内容

1. class元素获取（getElementsByClassName）

<body>
<div id="div1">
    <p id="p1" class="p2">这是段落，举头望明月</p>
    <p class="p2">这是第二段段落，疑是地上霜</p>
</div>
<script>
    var box = document.getElementById('div1')
    var p11 = document.getElementsByClassName("p2");
    p11[1].innerHTML = "我是小可爱"
</script>
</body>

补充解释
id选择器值唯一
类选择器值不唯一，所以遵循索引下标选择所获取的元素为哪个

1. tagName标签名（getElementsByTagName）

<body>
<div id="div1">
    <p id="p1" class="p2">这是段落，举头望明月</p>
    <p class="p2">这是第二段段落，疑是地上霜</p>
</div>

<script>
    var box = document.getElementById('div1')
    var p11 = document.getElementsByTagName("p");
    p11[0].innerHTML = "我是小可爱"
</script>
</body>

补充解释
同类选择器，选择标签不唯一，遵循索引下标选择所获取的元素为哪个

1. name属性（getElementsByName）

<body>
<div id="div1">
    <p id="p1" class="p2" name="p3">这是段落，举头望明月</p>
    <p class="p2">这是第二段段落，疑是地上霜</p>
</div>

<script>
    var box = document.getElementById('div1')
    var p11 = document.getElementsByName("p3");
    p11[0].innerHTML = "我是小可爱"
</script>
</body>

补充解释
getElementsByName有s
name属性不唯一，可以选择下标

1. selector通过CSS选择器（querySelector与querySelectorAll）

<body>
<div id="div1">
    <p id="p1" class="p2" name="p3">这是段落，举头望明月</p>
    <p class="p2">这是第二段段落，疑是地上霜</p>
</div>

<script>
    var box = document.getElementById('div1');
    var p11 = document.querySelector("#p1")
    p11.innerHTML = "我是小可爱"
</script>
</body>
## 去掉下标，找#选择器（id选择器）



通过class：改class名字，只能获取一个，找下标也不行：
<body>
<div id="div1">
    <p id="p1" class="p2" name="p3">这是段落，举头望明月</p>
    <p class="p33">这是第二段段落，疑是地上霜</p>
    <p class="p33">这是第二段段落，疑是地上霜</p>
</div>

<script>
    var box = document.getElementById('div1');
    var p11 = document.querySelector(".p33")
    p11.innerHTML = "我是小可爱"
</script>
</body>

通过css获取所有：改下标，加下标，只能一次作用一个：
<body>
<div id="div1">
    <p id="p1" class="p2" name="p3">这是段落，举头望明月</p>
    <p class="p2">这是第二段段落，疑是地上霜</p>
    <p class="p2">这是第二段段落，窗前明月光</p>
</div>

<script>
    var box = document.getElementById('div1');
    var p11 = document.querySelectorAll(".p2")
    p11[2].innerHTML = "我是小可爱"
</script>
</body>

补充解释
querySelector仅选择一个
querySelectorAll选择所有
JS获取元素支持复杂的CSS选择器（id选择器/类选择器/元素选择器等等），但是不能用伪类选择器，伪元素

二. JavaScript简单事件

1. 点击事件-onclick和ondblclick

onclick

代码

<body>
<div onclick="xu();">点击事件</div>
<script>
    function xu() {
        console.log("点击事件");
    }
</script>
</body>

补充解释
onclick：鼠标单击
xu()：函数名，
function：功能
console：控制台
log：日志
运行后，打开网页，检查，点开Console控制台，然后点击：出现点击事件

ondblclick

代码

<body>
<div>点击事件</div>
<script>
    var box = document.querySelector('div');
    box.onclick = function () {
        console.log("单击");
    }
    box.ondblclick = function () {
        console.log("双击");
    }
</script>
</body>

补充解释
ondblclick：双击
var：语句用于声明变量
document：文档
querySelector：选择器
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。# querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

总结
1.onclick 事件会在元素被点击时发生。
2.ondblclick 事件会在对象被双击时发生。

2. 鼠标事件（鼠标滑动效果设置）

mouseenter：当鼠标移入某元素时触发。
mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。
mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。
mousemove：鼠标在某元素上移动时触发，即使在其子元素上也会触发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
		// 添加盒子样式方便观察鼠标滑动之后效果
			div {
				width: 100px;
				height: 100px;
				background: #2196F3;
			}
		</style>
	</head>
	<body>
		<div id="p1"></div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById('p1');
		// 鼠标划入事件
		box.onmouseover = function () {
			box.style.backgroundColor = 'pink';
		}
		
		// 鼠标移出事件
		box.onmouseout = function () {
			box.style.backgroundColor = 'blue';
		}
	</script>
</html>

3. 窗口变化（onresize）

script中添加事件，监控窗口的变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
		window.onresize = function () {
			console.log('窗口发生改变');
		}
	</script>
</html>

补充解释
将窗口进行改变，控制台会输出"窗口发生改变"

4. 改变下拉框（onchange）

首先添加一个下拉框
运行后打开网页检查控制台，选择下拉框，更新下拉框内容后会响应事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<select>
			<option>北京</option>
			<option>上海</option>
			<option>广州</option>
			<option>深圳</option>
		</select>
	</body>
	<script type="text/javascript">
		var sel = document.querySelector('select');
		sel.onchange = function() {
			console.log('下拉框内容改变')
		}
	</script>
</html>

补充解释
下拉框初始显示值默认为第一个值
onchange 事件会在域的内容改变时发生。

三. Javascript修改样式

修改

单个样式进行修改
变量.style.需要修改的样式 = ‘属性’

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div class="box">
			课堂
		</div>
	</body>
	<script type="text/javascript">
		var obj = document.querySelector('.box');
		obj.style.color = 'red';
	</script>
</html>

多个样式修改：直接进行多个添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div class="box">
			课堂
		</div>
	</body>
	<script type="text/javascript">
		var obj = document.querySelector('.box');
		obj.style.cssText = "width:200px;height:200px;background:skyblue";
	</script>
</html>

补充解释

cssText的本质就是设置 HTML 元素的 style 属性值。
cssText的返回值：在某些浏览器中（比如 Chrome），给赋什么值，就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号。

标签属性（CSS样式修改）

增删改查

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
		    .box{
		        width: 100px;
		        height: 100px;
		        background: deepskyblue;
		    }
		    .text{
		        dth: 400px;
		        height: 400px;
		        background: red;
		    }
		    </style>
	</head>
	<body>
		<div class="box">属性操作</div>
	</body>
	    <script>
	        // 获取元素
	        var box = document.querySelector(".box")
	        // JS操作标签属性(增删改查)
	        // 增
			box.setAttribute('hh', 'ww')
	        // 删
			box.removeAttribute("hh");
	        // 改
			box.setAttribute('hh','tt');
	        // 查
			console.log(box.hasAttribute('hh'));
	    </script>
</html>

补充解释

setAttribute() 方法：添加指定的属性，并为其赋指定的值
removeAttribute()方法：表示从指定的元素中删除一个属性

四. JavaScript数据类型

六大数据类型：

1，Number类型: 整数和小数
NaN属性： not a number（属于数字类型，但不是数字）
isNaN(): 用来检查参数是否是非数字值
2，string类型：字符串
length属性：查看长度
3，Boolean类型: 布尔
true和false 小写真假
4，Undefined类型
只有一个值：undefined，变量声明但未初始化，这个变量的值就是undefined
5，Null类型
js里null属于对象类型的，但是它不具有对象的共性，所以，单独归为一类。
6，object类型
js中对象类型是一组集合。

1. JavaScript 数字：

<body>
<script>
var x = 3.14;
var y = 314;
var z1=123e4;
var z2=123e-4;
document.write(x + "<br>")
document.write(x + y + "<br>")
document.write(z1 + "<br>")
document.write(z2 + "<br>")
</script>
<!--z=123e5极大或极小的数字可以通过科学（指数）计数法来书写：-->
</body>

2. JavaScript 字符串：

<body>
	<script>
		var a="窗前明月光，";
		var b='疑是地上霜。';
		var c='举头望\"明月\"，';
		var d='低头思"故乡"。';
		document.write(a + "<br>" + b + "<br>")
		document.write(c + "<br>")
		document.write(d + "<br>")
	</script>
</body>

3. JavaScript 布尔：

布尔（逻辑）只能有两个值：true 或 false。

<script>
	var x = 3.14;
	var y = 314;
	document.write(x == y + "<br>")
</script>

4. JavaScript数组：

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

<body>
	<script>
		var i;
		var j = new Array();
    		j[0] = "北京";
    		j[1] = "上海";
    		j[2] = "广州";
		for (i=0;i<j.length;i++) {
		document.write(j[i] + "<br>");
		}
	</script>
</body>

也可进行缩减写法

<body>
<script>
var i;
var j=new Array("北京","上海","广州");
for (i=0;i<j.length;i++) {
document.write(j[i] + "<br>");
}
</script>
</body>

或者直接进行赋值

<body>
<script>
var i;
var j=["北京","上海","广州"];
for (i=0;i<j.length;i++) {
document.write(j[i] + "<br>");
}
</script>
</body>

5. JavaScript对象：

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

<!--JavaScript 对象-->
<script>
var tt = {
	name : "栩源",
	age  : 18,
	sex  :  '男'
};
document.write(tt.age + "<br>");
document.write(tt["name"] + "<br>");
</script>
</body>

补充解释

对象属性有两种寻址方式：
第一种：document.write(tt.age + “< br>”);直接对象名字点数组中的键位，找值
第二种：document.write(tt[“name”] + “< br>”);直接对象名字点，中括号找下标，键位

6. Undefined 和 Null

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

<body>
<script>
var i;
var j="栩源";
document.write(i + "<br>");
document.write(j + "<br>");
var j=null
document.write(j + "<br>");
</script>
</body>

补充

Object 构造函数创建一个对象包装器。

<body>
    <script>
        var a = {name:'栩源',age:18};
        var b = [1,2,3];
        console.log(typeof a);
        console.log(typeof b);
    </script>
</body>

typeof，查看数据类型
从网页检查，查看控制台

总结

数据类型决定了一个数据的特征，比如：123和”123”，直观上看这两个数据都是123，但实际上前者是一个数字，而后者是一个字符串。
对于不同的数据类型我们在进行操作时会有很大的不同。
JavaScript中一共有5种基本数据类型：
字符串型（String）
数值型（Number）
布尔型（Boolean）
undefined型（Undefined）
null型（Null）
这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

- JavaScript中的变量可能包含两种不同数据类型的值：基本数据类型和引用数据类型。

JavaScript中一共有5种基本数据类型：String、Number、 Boolean、Undefined、Null。
基本数据类型的值是无法修改的，是不可变的。
基本数据类型的比较是值的比较，也就是只要两个变量的值相等，我们就认为这两个变量相等。
引用类型的值是保存在内存中的对象。
当一个变量是一个对象时，实际上变量中保存的并不是对象本身，而是对象的引用。
当从一个变量向另一个变量复制引用类型的值时，会将对象的引用复制到变量中，并不是创建一个新的对象。
这时，两个变量指向的是同一个对象。因此，改变其中一个变量会影响另一个。

半离岛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
三篇文章快速全面了解主流脚本语言——JavaScript（1）---基础

对JavaScript的一些说明与了解解释型语言JavaScript是一门解释型语言，所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。动态语言JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们以后再谈。
复制链接

扫一扫