JavaScript_基础新手篇

最新推荐文章于 2023-08-06 08:23:15 发布

Perhaps#

最新推荐文章于 2023-08-06 08:23:15 发布

阅读量235

点赞数 1

本文链接：https://blog.csdn.net/weixin_45920625/article/details/107823114

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript基础

一、变量
二、运算符
三、数据类型
四、分支语句
五、Math方法
六、for循环
七、while循环
八、函数
九、对象
十、日期
十一、Dom文档
十二、project
十三、事件

一、变量

1.1
声明变量用var关键字后接变量名等于值

var number = 'perhaps';

1.2
变量名命名规范
只能使用数字、字母、下划线、美元符$
不能使用关键字、保留字
不能以数字开头
大小写敏感

1.3
同时赋值多个变量

var name = 'perhaps' , age = 18 , addr = 'shanghai'

二、运算符

2.1
算数运算符
加：+
减：-
乘：*
除：/
余数：%

2.2
赋值运算符
值等于：==
横等(值和类型都相等)：===
不等：!=
横不等：!==

2.3
关系运算符
大于：>
大于等于：>=
小于：<
小于等于：<=

2.4
逻辑运算符
与：&&
或：||
非：!

2.5
加强运算符
自身加1：++
自身减1：--
自身加等于：+=
自身减等于：-=
自身余等于：%=
自身除等于：/=

三、数据类型

1、数字类型

3.1.1
整数

int()

转换成整数：parseInt()

3.1.2
浮点数

float()

转换成浮点数：paserFloat()

2、字符串类型

3.2.1
字符串：一对单引号或者一对双引号括起来的的数据
字符串是不可变数据类型

var number = 'perhaps'；

3.2.2
字符串常用的方法
获取字符串的长度：str.length()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var s = 'PerHaps'；
			console.log(s.length)；
		</script>

	</body>
</html>

以下省略标签

3.2.3
获取字符串下标为n的字符：str.charAt(n)

		<script type="text/javascript">
			var s = 'PerHaps'；
			console.log(s.charAt(3))；
		</script>

3.2.4
获取下标为n的字符编码：str.charCodeAt(n)

		<script type="text/javascript">
			var s = 'PerHaps'；
			console.log(s.charCodeAt(3))；
		</script>

3.2.5
字符串拼接：str.concat(字符串)

		<script type="text/javascript">
			var s = 'PerHaps'；
			console.log(s.concat(' hello world'))；
		</script>

3.2.6
查找字符第一个第一次出现的位置，如果没找到返回-1：str.lastIndexOf(字符串)

		<script type="text/javascript">
			var s = 'PerHaps'；
			console.log(s.lastIndexOf('Haps'))；
		</script>

3.2.7
替换字符串(注意字符串是不可变数据类型，不会改变原字符串)：str.replace(old_str,nwe_str)

		<script type="text/javascript">
			var s = 'PerHaps'；
			console.log(s.replace('PerHaps','LanAn'))；
		</script>

3.2.8
截取字符串：str.substr(start,end)

		<script type="text/javascript">
			var s = 'PerHaps'；
			console.log(s.substr(3,5))；
		</script>

3.2.9
切割字符串：str.split(‘按字符切割返回数组类型’)

		<script type="text/javascript">
			var s = 'PerHaps'；
			console.log(s.split('r'))；
		</script>

3.2.10
将字符串转换为小写：str.toLocaleLowerCase()

		<script type="text/javascript">
			var s = 'PerHaps'；
			// 将字符串转换为大写toLocaleUpperCase()
			console.log(s.toLocaleLowerCase())；
		</script>

3、数组类型

3.3.1
可变数据类型
一对中括号括起来的数据
var arr = [1, 2, 3, 6, 5, 4]
数组的方法

3.3.2
索引数组
索引数组中第i个元素：arr[i]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 索引下标为2的元素
			console.log(arr[2]);
		</script>
	</body>
</html>

3.3.3
获取数组的长度：arr.length

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr = [1, 2, 5, 3, 6, 5, 7, 8];		
			// 获取数组的长度
			console.log(arr.length);
		</script>
	</body>
</html>

3.3.4
以下将省略标签
在数组中添加元素：splice()

			// 增
			/*
			在第0个位置
			替换0个，也就是不替换
			增加两个元素
			*/
			arr.splice(0,0,8,9);
			console.log(arr);

3.3.5
修改元素：splice()

			// 改
			/*
			将数组中的第0个元素，替换一次，替换后的元素
			*/
			arr.splice(0,1,8);
			console.log(arr);

3.3.6
删除数组中的元素：splice()

			// 删
			/*
			将数组的第0个元素
			不替换
			删除一次
			*/
			arr.splice(0,1);
			console.log(arr);

3.3.7
向数组末尾追加元素：push()

			// 在数组末尾追加一个元素4
			arr.push(4);
			console.log(arr);

3.3.8
将两个数组合成一个数组：concat()

			/* concat不改变原数组，
			合并两个数组生成一个新的数组*/
			new_arr = arr.concat([99, 88, 77]);
			console.log(new_arr);

3.3.9
向数组最前面加入一个元素：shift()

			// 向数组最前面添加一个元素
			arr.shift(99);
			console.log(arr);

3.3.10
向数组最前面加入多个元素：unshift()

			// 向数组最前面添加多个元素
			arr.unshift(33,44,55);
			console.log(arr);

3.3.11
删除数组末端的元素：pop()

			// 删除数组末端的一个元素
			arr.pop();
			console.log(arr);

3.3.12
遍历数组

			var arr = [1, 4, 2, 3 ,55]
			for (var i = 0; i<arr.length;i++){
				console.log(arr[i])
			}

4、其他类型

3.4.1
null：空类
Nna：非数字
boolean：布尔类型
undefind：没定义

四、分支语句

4.1
三种输出方式：
弹框：alert(‘hello world’)
文档界面：document.write(‘helloworld’)
控制台：console.log(‘hello’)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 弹框
			alert('hello world');
			// 文档界面
			document.write('helloworld');
			// 控制台
			console.log('hello');
		</script>
	</head>
	<body>
		<!-- 企业开发者，建议写在body后面 -->
		<script type="text/javascript">
			/*
			这就是多行注释
			*/
		</script>
		<script src="jsss" type="text/javascript" charset="UTF-8">
			
		</script>
	</body>
</html>

4.2
公式：

if (条件){
	语句
}

4.3
公式：

if (条件){
	语句
}
else{
	语句
}

4.4
公式：

if (条件){
	语句
}
else if(条件){
	语句
}
else{
	语句
}

4.5
公式:
常用于已知的，不需要范围。

swith(变量){
	case 变量值:
		语句
		break
	case 变量值:
		语句
		break
	case 变量值:
		语句
		break
	default:
		语句
}

实例：

<script type="text/javascript">
			var grade='D';
			switch(grade){
				case 'A':
					console.log('80-100');
					break
				case 'B':
					console.log('70-79');
					break
				case 'C':
					console.log('60-69');
					break
				case 'D':
					console.log('<60');
					break
				default:
					console.log('erro');
			}
		</script>

4.6
三目运算符：？

			// 三目运算符
			var res=10<5?'真的':'假的';
			console.log(res);

五、Math方法

5.1
返回0-1之间的随机数：Math.random()
四舍五入：Math.round()
返回最大值：Math.max()
返回最小值：Math.min()
向上取整：Math.ceil()
向下取整：Math.floor()
x的y次方：Math.pow(x,y)
开平方：Math.sqrt()

六、for循环

6.1

for (表达式1；表达式2；表达式三){
		语句
	}
表达式1，表示初始值
表达式2，表示条件
表达式3，表示出口

实例

<script type="text/javascript">
		for(var a=1;a<5;a++){
			console.log('hellow world')；
		}
</script>

6.2
for循环嵌套
打印三角形到文档界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			for (var i = 1;i<10;i++){
				for (var j = 1;j<i;j++){
					document.write('o');
				}
			document.write('<br />')；
			}
		</script>
	</body>
</html>

6.3
打印九九乘法表到文档界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			for (var i = 1;i<10;i++){
				for (var j = 1;j<i+1;j++){
					document.write(j+'*'+i+'='+i*j+' ' );
				}
			document.write('<br />')；
			}
		</script>
	</body>
</html>

6.4
打印三角形


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
						for(var i=0;i<6;i++){
				for(var j=0;j<i;j++){
					document.write('a');
				}
				document.write('<br />');
			}
		</script>
	</body>
</html>

6.5
冒泡排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr = [1, 2, 4, 6, 5, 3, 7, 8];
			/*循环趟数，长度减一是因为两两比较，
			 所以比较的次数只有length-1次*/
			for (var i = 0; i<arr.length-1; i++){
				for (var j=0; j<arr.length-1-i; j++){
					/*相邻的两个元素作比较
					如果前一个元素大于后一个元素就交换位置
					这是升序排序
					如果要降序排序则将>改成<*/	
					if(arr[j]>arr[j+1]){
						var t = arr[j];
						arr[j] = arr[j+1];
						arr[j+1] = t;			
					}
				}
			}
			document.write(arr)
		</script>
	</body>
</html>

七、while循环

7.1
公式

while (条件){
	语句
}

实例

<script type="text/javascript">
		var a=7;
		while(a<100)
		{
			console.log(a);
			a+=7;
		}
</script>

<script type="text/javascript">
var b = 0;
		while(b<100){
			if(b%7===0){
				console.log(b);
			}
			b++;
		}
</script>

八、函数

8.1
函数公式：
function声明函数函数名(){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function  fun(){
				console.log('hello world')
			}
			fun()
		</script>
	</body>
</html>

九、对象

9.1
对象：object，引用类型，引用对象的实例，也就是实例化
创建对象的方式有多种方法
这里选择选择两种中的其中一种
创建对象：
第一种使用new运算符创建
var object = new Object();
object.‘name’ = ‘zhangsan’;
object.‘age’ = 18;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var obj = new Object();
			obj.name = 'zhangsan';
			obj.age = 18;
			console.log(obj);
		</script>
	</body>
</html>

第二种
var object = {
‘name’ = ‘zhangsan’，
‘age’ = 18，
};
其他方式略；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<script type="text/javascript">	
				var obj2 = {
				'name':'zhangsan',
				'age':19,
				//这是对象的方法
				'run':function(){
					console.log('pao?');
					}
				}
			console.log(obj2);
			//调用对象的方法
			obj2.run()	
		</script>
	</body>
</html>

十、日期

10.1
Date
调用对象的方法，创建实例。
var d = new Date()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var d = new Date();
			// Thu Aug 06 2020 20:05:46 GMT+0800 (中国标准时间)
			console.log(d);
			// Thu Aug 06 2020
			console.log(d.toDateString());
			// 20:06:16 GMT+0800 (中国标准时间)
			console.log(d.toTimeString());
			// 2020/8/6
			console.log(d.toLocaleDateString());
			// 下午8:07:25
			console.log(d.toLocaleTimeString());
			// Thu, 06 Aug 2020 12:07:51 GMT
			console.log(d.toUTCString());		
		</script>
	</body>
</html>

10.2
定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script type="text/javascript">
		// var start = 10
		// var tmid = setInterval(function(){
		// 	if (start>0){
		// 		console.log(start)
		// 		start--
		// 	}else{
		// 		clearTimeout(tmid)
		// 	}
		// },1000)
		
		
		// var start = 10
		// var tmid = setInterval(function(){
		// 	start--
		// 	console.log(start)
		// },1000)
		
		var c=10
		// 设置变量保存定时器函数返回的id，用于终止定时器
		var tmid = setInterval(function(){
			// 自减
			c--
			// 当定时器到0时终止定时器
			if ( c === 0){
				clearInterval(tmid)
			}
			// 选择33个随机数，自上而下随机选择，
			// 将选到的值给到select
			var select = Math.ceil(Math.random()*33)
			console.log(select)
		},500)
	</script>
	</body>
</html>

十一、Dom文档

11.1
dom文档对象模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container">
			<h2 id="title">hha</h2>
			<h3 id="aa">嘻嘻</h3>
			<h4 class="cc">我们挨打游戏</h4>
			<h4 class="cc">我们都是渣渣</h4>
		</div>
		
		<script type="text/javascript">
			// 获取标签id
			var h2 = document.getElementById('title')
			// 修改内容
			h2.innerText = '我会dom操作'
			// 获取标签id
			var h3 = document.getElementById('aa')
			// 修改内容
			h3.innerText = '不爱'
			// 获取标签id
			var h4s = document.getElementsByTagName('h4')
			// 修改内容
			for (var i = 0 ;i<h4s.length;i++){
				h4s[i].innerText = '爱'
			}
		</script>
	</body>
</html>

节点获取的三种方式
document.getElementById()：获取节点id
document.getElementsByTagName()：获取节点标签，返回元组
document.getElementsByClassName()：获取相同值的class的节点，返回列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="a">
			<p class="m"></p>
			<div id="b"></div>
			<p class="m"></p>
		</div>
		<script type="text/javascript">
			var a = document.getElementsByClassName('m')
			console.log(a)
			var b = document.getElementsByTagName('p')
			console.log(b)
			var c = document.getElementById('a')
			console.log(c)
		</script>
	</body>
</html>

增删改
创建一个元素节点：createElement()
添加一个新子节点到节点的末尾：appendChild()
在当前节点前插入一个新的节点：insertBefore()
将新节点替换成旧节点：repalceChild()
移除节点：removeChild()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="a">
			<p id="start"></p>
			<div id="b"></div>
			<p id="end"></p>
		</div>
		<script type="text/javascript">
			var b = document.getElementById('b')
			// 创建标签
			var p = document.createElement('p')
			// 给元素设置内容
			p.innerHTML = '今晚加班'
			// 在b中住家p
			b.appendChild(p)
			
			// 创建h2标签
			var h2 = document.createElement('h2')
			h2.innerHTML = '好好复习'
			// 通过操作父节点，将h2插入到b之前
			b.parentNode.insertBefore(h2,b)
			// 替换
			// b.parentNode.replaceChild(h2,b)
			// 删除
			b.parentNode.removeChild(b)
		</script>
	</body>
</html>

十二、project

12.1
进度条
首先给一个标签创建文本框，在创建一个包含的标签属性
然后获取相应的id，用计时器实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#a{
				width: 400px;
				height: 50px;
				border: 1px solid #00BFFF;
			}
			#b{
				height: 50px;
				background-color: #FF1493;
			}
		</style>
	</head>
	<body>
		<div id="a">
			<div id="b">	
			</div>
		</div>
		<script type="text/javascript">
			// 获取标签id
			var b = document.getElementById('b')；
			// 设置起点
			var start = 0；
			// 计时器
			var  timeid = setInterval(function(){
				// 宽度增加
				b.style.width = start + 'px'；
				
				// 停止的条件
				if (start===400){
					clearInterval(timeid)；
				}
				/*每次加10，放在这里控制与外边框宽度相等
				如果放在前面判停止的条件要加10个像素的宽度*/
				start+=10
			},1000)
		</script>
	</body>
</html>

在这里插入图片描述
12.2
换皮肤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#a{
				height: 500px;
				border: 1px solid #FF1493;
				/* background-repeat: no-repeat; */
			}
			#b{
				height: 300px;
				width: 300px;
				border: 1px solid #00BFFF;
				position: relative;
				left: 300px;
				top: 100px;
				background-repeat: no-repeat;
				background-position: center;
			}
			.select1{
				background-image: url(./img/bg1.gif);
			}
			.select2{
				background-image: url(img/2.jpg);
			}
			.select3{
				background-color: #00BFFF;
			}
			.select4{
				background-color: #FF1493;
			}
		</style>
	</head>
	<body>
		<div id="a">
			<div id="b">
				<button onclick="pi1()">皮肤一</button>
				<button onclick="pi2()">皮肤二</button>
			</div>
			<script type="text/javascript">
				function pi1(){
					var a = document.getElementById('a')；
					a.className = 'select1'；
					var b = document.getElementById('b')；
					b.className = 'select2'；
					console.log('换了')；
				}
				function pi2(){
					var a = document.getElementById('a')；
					a.className = 'select3'；
					var b = document.getElementById('b')；
					b.className = 'select4'；
					console.log('换了')；
				}
			</script>
		</div>
	</body>
</html>

12.3
隔行换色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				width: 700px;
				height: 50px;
				border: 1px solid salmon;
			}
			.select1{
				background-color: #00BFFF;
			}
			.select2{
				background-color: #FF1493;
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			var list = document.getElementsByTagName('li')
			for (var i = 0 ;i<list.length;i++){
				if(i%2===0){
					list[i].className = 'select1'；
				}
				else{
					list[i].className = 'select2'；
				}
			}
		</script>
	</body>
</html>

12.4
图片切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/1.jpg" onclick="one()">；
		<img src="img/2.jpg" onclick="two()">；
		<img src="img/3.jpg" onclick="three()">；
		<hr >；
		<img src="img/bg2.jpg" id="qie">；
		<script type="text/javascript">
			function one(){
				var qie = document.getElementById('qie')；
				qie.src = "img/1.jpg"；
			}
			function two(){
				var qie = document.getElementById('qie')
				qie.src = "img/2.jpg"；
			}
			function three(){
				var qie = document.getElementById('qie')；
				qie.src = "img/3.jpg"；
			}
		</script>
	</body>
</html>

十三、事件

13.1
事件：产生然后得到处理操作。
事件的模式：内联模式、脚本模式
事件的分类：鼠标事件、键盘事件、HTML事件。

13.2
鼠标事件
onmouseover：鼠标移入到某个元素内都会触发
onmouseout：鼠标移出某个元素时都会触发
onmouseenter：鼠标只在移入本元素时调用一次
onmouseleave：鼠标只在移出本元素时触发一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="images3/big_1.jpg" >；
		<img src="images3/big_10.jpg" >；
		<img src="images3/big_2.jpg" >；
		
		<script type="text/javascript">；
			var imgs = document.getElementsByTagName('img')
			for (var i = 0 	;i<imgs.length-1;i++){
				imgs.index = i；
				onmouseover = function(){
					console.log('comein')；
				}
			}
		</script>
	</body>
</html>

13.2
键盘事件
onkeydown：按下了键盘上的某个键
keypress：按下了键盘上的字符键
keycode：按下了键盘上的ACll编码键，返回编码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="images3/big_1.jpg" >
		<img src="images3/big_10.jpg" >
		<img src="images3/big_2.jpg" >
		
		<script type="text/javascript">
			// 三者同时存在只能生效最后一个
			// onkeydown = function(event){
			// 	console.log(event.shiftKey)
			// }
			// onkeydown = function(event){
			// 	console.log(event.ctrlKey)
			// }
			// onkeydown = function(event){
			// 	console.log(event.altKey)
			// }
			onkeydown = function(event){
				console.log(event.keyCode);
				console.log(event);
				console.log(event.layerX);
				console.log(event.layerY);
			}
			
			// 返回字符
			onkeypress = function(event){
				var  letter = String.fromCharCode(event.keyCode);
				console.log(letter);
			}
		</script>
	</body>
</html>

13.3
HTML事件
windows.onload：当页面完全加载后触发
select：当用户选择文本框的中的内容时触发
scroll：当用户滚动带滚动条的元素时触发
change：当文本框(input)或(textarea)内容改变且失去焦点后触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.select{
				width: 100px;
				height: 100px;
				border: 1px solid #FF0000;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				console.log('加载完成了');
			}
		</script>
	</head>
	<body>
	</body>
</html>

13.4
事件流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#a{
				width: 300px;
				height: 300px;
				border: 1px solid #FF0000;
			}
			#b{
				width: 150px;
				height: 150px;
				border: 1px solid #FF0000;
			}
			#c{
				width: 75px;
				height: 75px;
				border: 1px solid #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="a">
			<div id="b">
				<div id="c">
				</div>
			</div>
		</div>
		<script type="text/javascript">
			// 事件流，从外向内，从内向外
			// evt.stopPropagation()停止或者切断
			
			var a = document.getElementById('a');
			var b = document.getElementById('b');
			var c = document.getElementById('c');
			
			a.onmousedown = function(evt){
				console.log('a');
				evt.stopPropagation();
			}
			b.onmousedown = function(evt){
				console.log('b');
				evt.stopPropagation();
			}
			c.onmousedown = function(evt){
				console.log('c');
				evt.stopPropagation();
			}
		</script>
	</body>
</html>

Perhaps#

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_基础新手篇

JavaScript基础一、变量二、数据类型1、数字类型2、字符串类型3、数组类型4、对象类型三、分支语句四、for循环五、while循环一、变量声明变量用var关键字后接变量名等于值var number = 'perhaps'变量名命名规范只能使用数字、字母、下划线、美元符$不能使用关键字、保留字不能以数字开头大小写敏感二、数据类型1、数字类型整数int()转换成整数：parseInt()浮点数float()转换成浮点数：paserFloat()2、字符串类型2.
复制链接

扫一扫

专栏目录