WEB前端 | JS基础——(1)JS初识

最新推荐文章于 2024-07-17 09:44:02 发布

Erosvan

最新推荐文章于 2024-07-17 09:44:02 发布

阅读量763

点赞数

文章标签： javascript Web前端 JS基础

本文链接：https://blog.csdn.net/Erosvan/article/details/52690002

版权

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>JS初识</title>
		<style type="text/css">
			.reddiv {
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script>
		// window.onload 
		// 你知道window.onload的含义吗？它是指：代码中的DOM已经加载就绪了，也就是文档流已经关闭。此时，你再用document.write()是启用了新的文档流来render浏览器窗口内容，从而把前面的全部内容通通覆盖掉
		window.onload = function() {
		// alert(); 是一个弹框，小括号里面是弹框出现时显示的内容
		alert('hello');
		// console.log(); 控制台输出，小括号的内容就是输出的内容，一般用于调试程序
		console.log('你好呀');
		// document.write(); 在网页里面写入，小括号内就是写入的东西
		// document.write('写一些东西');
		// 定义变量， a就是变量名
		// 告诉计算机分配一块空间，名字叫a，在a这块空间，存储一个数值 10;
		var a = 10;
		// 改变变量的值
		// 把a这块空间的值修改为123;
		a = 123;
		console.log(a);
		a = 456;
		// js 是弱类型语言，变量部分具体的数据类型，全部都是用var这个关键字来定义
		var name = 'Erosvan';
		console.log(name);

		var test;
		console.log(test);
		// typeof(); 是取某个变量/直接量的类型
		console.log(typeof(a));

		// 交换两个变量的值
		var numA = 3;
		var numB = 4;
		console.log(numA);
		console.log(numB);
		// 需要用到第三个容器作为中介
		// var numC = numA;
		// numA = numB;
		// numB = numC;
		numA = numA + numB;
		numB = numA - numB;
		numA = numA - numB;
		console.log(numA);
		console.log(numB);

		var string1 = '1234';
		console.log(typeof(Number(string1)));
		// 与上式表达意义一样 只是写法不一样
		var string1 = '1234';
		var number1 = Number(string1);
		console.log(typeof(number1));

		var number2 = 123;
		console.log(String(number2));

		var string2 = '250abc';
		var value = parseInt(string2);
		console.log(value);

		var num1 = 47;
		var num2 = 15;
		// 求模/取余;
		var num3 = num1 % num2;
		console.log(num3);
		// 运算符的重载  运算符在他两边的值类型不同的时候，会有不同的作用
		// + 两边为数值 则相加
		// + 两边为字符 则拼接两个字符串
		// + 前面无值，后面跟字符串 则是取正操作
		var text2 = '4' + 'js';
		console.log(+ '12');

		// document.getElementById('first').onmouseout = function(){
			// alert('点我干嘛');};
		document.getElementsByTagName('div')[0].onclick = function(){
			console.log('12345');
		}
		// document.querySelectorAll('.li')[0].onclick
		}
	</script>
	</head>
	<body>
		<div id="first" class="reddiv"></div>
	</body>
</html>

Erosvan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端 | JS基础——(1)JS初识

JS初识 .reddiv { width: 200px; height: 200px; background-color: red; } // window.onload // 你知道window.onload的含义吗？它是指：代码中的DOM已经加载就绪了，也就是文档流已经关闭。此时，你再用document.write()是启用了新的
复制链接

扫一扫