JavaScript基础知识总结

最新推荐文章于 2024-07-11 20:55:36 发布

Alicization~Iris

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量126

点赞数

分类专栏：前端学习文章标签： js javascript html

本文链接：https://blog.csdn.net/qq_44296442/article/details/119577083

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS中的简单输出语句

使用console.log() 语句可以实现在控制台上的输出，并且也有字符串的拼接这样的操作。

<script type="text/javascript">
			var num = 3;
			var str = '10';
			console.log(num + str);// 310
			// 有一些全局的函数
			console.log(num + parseInt(str));// 13
			console.log(parseInt(3.99));// 3 向下取整
			// alert('Hello js'); 警示框
</script>

JS中变量的定义

JS是一种弱类型的语言。在JS中，所有的变量声明都用关键字var，这也就使得它只有在赋值的时候才能确定类型。并且对于同一个变量，可以多次赋给它不同类型的值。但是它的变量名也跟Java中一样，区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号。我们同样也要和其他语言中变量的定义一样，做到“见名知意”。

<script type="text/javascript">
			// 只是声明变量，没有赋值的话，现在的值就是undefined
			var num;
			console.log(num);// undedined
			console.log(typeof(num));// undefined
			num = 3.14;
			console.log(num);// 3.14
			console.log(typeof(num));// number
			num = 'js';
			console.log(num);// js
			console.log(typeof(num));// string
			num = true;
			console.log(num);// true
			console.log(typeof(num));// boolean
			num = null;
			console.log(num);// null
			console.log(typeof(num));// object（比较特殊）
</script>

dom技术介绍

dom技术相当于JS语言和html/xml标签之间沟通的一个桥梁。我们可以把整个页面看作一个已经new好的对象，叫做document，我们可以通过这个对象中的方法来获取标签对象并对标签进行一些操作。可以把html标签的内容划分为各种节点：
文档节点（document）
元素节点（标签）
文本节点
属性节点（type=“text” name=“username”…）
注释节点
元素节点的获取：
document.getElementById(id属性值);
document.getElementsByTagName(“标签名”);

JS中的相等判断

由于JS中变量类型的不确定性，就有了两种判断相等的关系运算符：双等号与三等号判断

		<script type="text/javascript">
			var v1 = 10;
			var v2 = '10';
			// 双等号只是判断里面的值相不相等
			if (v1 == v2) {
				console.log('v1==v2');
			}
			// 三等号既判断值是不是相等，又判断类型是不是相等
			if (v1 === v2) {
				console.log('v1 === v2');
			}
		</script>

结果：
在这里插入图片描述

JS中表达式对应的布尔值

JS中表达式可以是任意表达式。一切表示空的值都是false，非空的值都是true。

		<script type="text/javascript">
			if(true) {
				console.log('true');
			}
			if(0) {// false
				console.log('0');
			}
			if(!0) {// true
				console.log('!0');
			}
			if(1) {// true
				console.log('1');
			}
			if('') {// false
				console.log('空字符串');
			}
			if('abc') {// true
				console.log('abc');
			}
		</script>

给按钮添加方法

给按钮设置onclick属性，值为方法名（记得括号），然后在JS代码中编写对应的方法即可。

	<body>
		<!-- value设置默认值 -->
		<input id="inputId" type="text" value="Hello JS"/><br>
		<button onclick="clickMe()">点我</button>
		
		<script type="text/javascript">
			function clickMe() {
				console.log('clickMe');
				// 在编程里面id唯一标识一个事物
				var inputObj = document.getElementById('inputId');
				console.log(inputObj.value);
				alert(inputObj.value);
			}
		</script>
	</body>

JS中的数组

JS中的数组有多种定义方式，长度可以改变，类似于Java中的ArrayList，可以使用下标访问其中的元素，也可以使用入栈和出栈的操作来访问，并且其中可以同时存放多种类型的数据。基本使用和Java类似。

		<script type="text/javascript">
			var array1 = new Array(7);
			console.log(array1.length);
			var array2 = new Array(100, 'a', true);
			console.log(array2.length);
			// 创建了一个空数组，数组的长度是可变的，类似于ArrayList
			var array = new Array();
			array[0] = '123';
			console.log(array);// ["123"]
			console.log(array.length);// 1
			array[1] = true;
			console.log(array);// ["123", true]
			console.log(array.length);// 2
			
			// 使用push和pop分别对应栈的入栈和出栈操作
			var arr = new Array();
			arr.push('zhangsan');
			console.log(arr);// ["zhangsan"]
			arr.push(true);
			console.log(arr);// ["zhangsan", true]
			arr.push(45);
			console.log(arr);// ["zhangsan", true, 45]
			console.log(arr[2]);
			console.log(arr.pop());
			console.log(arr.pop());
			console.log(arr.pop());
			console.log(arr);
		</script>

字符串类型数据

JS中创建String对象有两种方式：
1、var str1 = “hello js!”;
2、var str2 = new String(“hello js!”);
关于JS中字符串的使用，与Java中有很多类似的地方，例如：大小写转换（str.toLowerCase() str.toUpperCase）、获取指定索引处的字符（str.chaAt(index)）等等，不再详细介绍。

其他一些知识

数学相关操作

Math.PI = 3.1415926…
Math.round() 四舍五入
Math.floor() 向下取整
Math.ceil() 向上取整

eval方法

可以简单理解为把双引号中的语句执行了一遍

console.log(eval("2+3")); //5
eval("var x=10;var y=20;console.log(x*y);"); //200

innerHTML与innerText

	<body>
		<!-- <input type="text" id="inputId" value="Hello JS"/> -->
		<div></div>
		<div></div>
		
		<script type="text/javascript">
			// 返回的是一个数组
			var divs = document.getElementsByTagName('div');
			// 拿到对应的div标签
			var divObj1 = document.getElementsByTagName('div')[0];
			// 按照Html解析显示
			divObj1.innerHTML = '<span style="color: red;">innerHtml</span>';
			var divObj2 = document.getElementsByTagName('div')[1];
			// 直接当作文本显示
			divObj2.innerText = '<span style="color: red;">innerText</span>';
		</script>
	</body>

效果：
在这里插入图片描述

Alicization~Iris

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识总结

JS中的简单输出语句使用console.log() 语句可以实现在控制台上的输出，并且也有字符串的拼接这样的操作。<script type="text/javascript"> var num = 3; var str = '10'; console.log(num + str);// 310 // 有一些全局的函数 console.log(num + parseInt(str));// 13 console.log(parseInt(3.99));//
复制链接

扫一扫