• 周二. 9月 27th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

Javascript 常用语法 Web前端基础

admin

11月 28, 2021

Javascript 和 HTML、CSS一样,是Web前端开发所必须的三个模块。另外,JavaScript也是Vue、Ext、jQuery等框架的基础语言,所以JavaScript的学习是至关重要的。其实,学了C++语言,学了Java,感觉JavaScript的基础语法整理上比较类似于Java,所以那些输入输出选择循环语句的基础语法,就不记下来了,毕竟代码天天在写,也不会忘。

我跟之前总结HTML、CSS一样,同样是站在本科应用层的角度,重点是比较常用的语法搭配,其次是那些有花里胡哨的功能语法,省略那些可以被新功能所替代的旧方法。

HTML部分:点击这里

CSS部分:点击这里


本文目录:

目录

第一部分:最常用的语法

常用调试方法常用获取HTML组件的八种方法数据类型按钮方法绑定数组/循环数组的常用方法字符串常用方法配合HTML组件

第二部分:其他小功能

定时执行函数 动态更新时间组件正则表达式输入栏提示文本异常处理滚动标题JSON模拟Java类使用JS添加HTML组件表格数据添加


第一部分:最常用的语法

常用调试方法

alert('hello zwz');//弹框
console.log('hello zwz!');//调试窗口
document.getElementById('c').innerHTML = 'hello zwz';//覆盖输出到HTML元素
//不覆盖可以把= 改成 += 即可

常用获取HTML组件的八种方法

<input id="did" class="dclass" name='dname' value="aaa"/>
//以上为HTML
var did = document.getElementById('did');//根据ID查找 唯一
var dclass = document.getElementsByClassName('dclass')[0]; //根据class查找 不唯一
var ddiv = document.getElementsByTagName('input')[0]; //根据标签名查找 不唯一
var dclass2 = document.getElementsByName('dname')[0]; //根据name查找 不唯一
var b = document.querySelector('#did').value; //id
var c = document.querySelector('.dclass').value;//class
var d = document.querySelector('input').value; // 标签
var e = document.querySelectorAll('input')[0].value; //所有的标签集合

数据类型

JavaScript是一种弱类型的语言,在C++中,一个int类型的变量,用%f格式输出,就会出错,反之亦然;这是因为整数和浮点数之间有一条不可逾越的鸿沟(个人理解)。在JavaScript中就不一样了,var就是一个百搭类型,那些整数、浮点数、字符串,甚至对象、数组,通通可以定义。当然可以使用typeof函数来获取当前的数据类型,就像这样:

var a = 1;
var b = 3.14; // num.toFixed(4);保留四位
var c = 'hello zwz!';
var d = ['zwz01','zwz02','zwz03'];
var e = {
	'name':'zwz',
	'age':18
};
var leixing = typeof(a);
var num = parseFloat(string);//String转Num

如果只是var一个变量没有初始化,类型就是undefined;如果为空,就是Null;如果数字计算结果不为数字,那么就是NaN

按钮方法绑定

<input type="button" value="按钮" onclick="run()"/>

function run(){
	//运行的代码
}

数组/循环

//一维数组
var arr = ['a1','a2','a3','a4','a5','a6'];

//二维数组
var arr = [
	['zwz01','zwz02','zwz03'],
	['zwz11','zwz12']
];
alert(arr[0][1]);//调用

//for-in循环
var a = [3,4,5,6,7];
for(var i in a){
	document.getElementById('d').innerHTML += i+'<br>';
}

数组的常用方法

字符串常用方法

配合HTML组件

//<!-- 下拉菜单 -->
var se = document.getElementById('se').value;
//<!-- 单选/多选框 -->
var form = document.getElementById('fo').lag;//lag是name属性
for(var i = 0 ; i < form.length; i ++){
	if(form[i].checked){
		console.log(form[i].id);break;//操作
    }
    form[i].checked = 1; // 全选
    if(form[i].checked) //反选1
        form[i].checked = 0;
    else //反选2
        form[i].checked = 1;
}

第二部分:其他小功能

定时执行函数

var temp;
function run(){
	console.log('zwz的1秒过去了<br>');
}
function start(){
	temp = window.setInterval('run()',1000);
}
function stop(){
	window.clearInterval(temp);
}

 动态更新时间组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body onload="retime()">
		<div id="d"></div>
	</body>
</html>

<script>
	function retime(){
		var time = new Date();
		var year = time.getFullYear();
		var mouth = time.getMonth() + 1;
		var date = time.getDate();
		var hour = time.getHours();
		var min = time.getMinutes();
		var sec = time.getSeconds();
		
		document.getElementById('d').innerHTML = year + '年' + mouth + '月' + date + '日 ' + hour + ':' + min + ':' + sec;
		var thread = setTimeout('retime()',1000);
	}
</script>

<style type="text/css">
	div{
		height: 200px;
		 1200px;
		background-color: gainsboro;
	}
</style>

正则表达式

function run(){
	var input = document.getElementById('in').value;
	// console.log(typeof(input));
	if(!( /^[a-zA-Z]w{3,15}$/.test(input))){
		console.log('输入有误');
	}
}

输入栏提示文本

<input type="text" id="in" value="请输入" />

var input = document.getElementById('in');
input.onmouseup = function(){this.focus();}
input.onfocus = function(){this.select();};

异常处理

比如我在代码中的alert函数上多写一个t,如果没有异常,就会直接在浏览器调试页面报错,如果有catch语句,则会在id为’d’的HTML元素中打印错误信息。

function run(){
	try{
		alertt('hello zwz');
	}catch(e){
		document.getElementById('d').innerHTML = e.message;
	}
}

滚动标题

实现的原理是每隔一小段时间,把最后一个字母放在最前面,来模拟滚动的效果。

<script>
	var str = 'hello zwz!';
	function run(){
		document.title = str;
		str = str.substring(1,str.length) + str.substring(0,1);
	}
	setInterval('run()',200);
</script>

JSON

另外有一种JSON模式需要着重学一下,这个是前端提交到后端必须要转换的格式

如果在后端的Java类中定义如下:(用var模拟后端Java类)

var a = {
	'people':[
		{'name':'zwz01','age':'18'},
		{'name':'zwz02','age':'19'}
	]
};

那么,JSON模式是这样的:

var b = '{ "people" : [' +'{ "name":"zwz01" , "age":"18" },' +'{ "name":"zwz02" , "url":"19" }'+']}';
var result1 = typeof(b);//结果为string类型

说白了,就是拿大括号  {   } 括了一下。这个时候b的数据类型是string字符串类型。

然后我们使用JSON.parse函数转化

var c = JSON.parse(b);
var result2 = typeof(c);//结果为object类型
alert(c.people[0].name);//引用

这就说明c是对象类型,是将字符串转化成了对象模型。 也可以直接使用里面的元素

至于对象型转化为字符串,以后有机会再去查一下。

模拟Java类

function People(name,age){
	this.name = name;
	this.age = age;
	this.say = function(){
		console.log(this.name + ' is ' +this.age + ' years old!');
	}
}
var p1 = new People('zwz01',18);
p1.say();

使用JS添加HTML组件

//假设<body>中有一个id为'u'的ul
<script>
	var LiArray = document.getElementById('u').getElementsByTagName('li');
	var aNew = document.createElement('a');
	var aNewText = document.createTextNode('百度');
	var aNewHref = document.createAttribute('href');
	aNewHref.value = 'http://www.baidu.com';
	aNew.setAttributeNode(aNewHref);
	aNew.appendChild(aNewText);
	LiArray[0].appendChild(aNew);
	
	var Body = document.body;
	var HrNew = document.createElement('hr');
	var HrColor = document.createAttribute('color');
	HrColor.value = 'red';
	HrNew.setAttributeNode(HrColor);
	Body.appendChild(HrNew);
	
</script>

表格数据添加

<body>
	<table id="msg" align="center">
		<caption>XXXX表</caption>
		<tr>
			<td>学号</td><td>姓名</td><td>性别</td>
		</tr>
		<input type="button" onclick="addRow()" value="添加数据"/>
	</table>
</body>

<script>
	function addRow(){
		var form = document.getElementById('msg');
		var newRow = form.insertRow();//返回新插入的行 (deleteRow(index)删除)
		newRow.insertCell(0).innerHTML = '0413170337';
		newRow.insertCell(1).innerHTML = 'zwz';
		newRow.insertCell(2).innerHTML = 'nan';
	}
</script>

最后编辑日期 2020 年 1 月 30 日

发表回复

您的电子邮箱地址不会被公开。