Web front-end knowledge combing -- Javascript common syntax

Keywords: Javascript Java JSON Vue

JavaScript, like HTML and CSS, is the three necessary modules for Web front-end development. In addition, JavaScript is also the basic language of Vue, Ext, jQuery and other frameworks, so the learning of JavaScript is crucial. In fact, after learning the C + + language and Java, I feel that the basic syntax of JavaScript is similar to that of Java, so I don't remember the basic syntax of the input-output loop statement. After all, the code is written every day, and I won't forget it.

As I summarized HTML and CSS before, I also stood in the perspective of undergraduate application layer, focusing on more commonly used syntax collocations, followed by those with fancy functional syntax, omitting those old methods that can be replaced by new functions.

HTML section: click here

Part CSS: click here



Part one: the most commonly used grammar

Common debugging methods,Eight methods of getting HTML components,data type,Button method binding,Array / loop,Common methods of array,Common methods of string,With HTML components

Part II: other small functions

Timed execution function,Dynamic update time component,regular expression ,Input bar prompt text,exception handling,Rolling title,JSON,Simulate Java classes,Using JS to add HTML components,Table data adding

Part one: the most commonly used grammar

Common debugging methods

alert('hello zwz');//Elastic frame
console.log('hello zwz!');//Debug window
document.getElementById('c').innerHTML = 'hello zwz';//Overwrite output to HTML element
//You can change = to + = without overwrite

Eight methods of getting HTML components

<input id="did" class="dclass" name='dname' value="aaa"/>
//HTML above
var did = document.getElementById('did');//Find unique by ID
var dclass = document.getElementsByClassName('dclass')[0]; //Find not unique by class
var ddiv = document.getElementsByTagName('input')[0]; //Find not unique by tag name
var dclass2 = document.getElementsByName('dname')[0]; //Find not unique by name
var b = document.querySelector('#did').value; //id
var c = document.querySelector('.dclass').value;//class
var d = document.querySelector('input').value; // Label
var e = document.querySelectorAll('input')[0].value; //All label sets

data type

JavaScript is a weakly typed language. In C + +, if an int type variable is output in% f format, it will make mistakes, and vice versa; this is because there is an insurmountable gap (personal understanding) between integer and floating-point number. It's different in JavaScript. var is a versatile type. Integers, floating-point numbers, strings, even objects and arrays can be defined in general. Of course, you can use the typeof function to get the current data type, like this:

var a = 1;
var b = 3.14; // num.toFixed(4); four bits reserved
var c = 'hello zwz!';
var d = ['zwz01','zwz02','zwz03'];
var e = {
var leixing = typeof(a);
var num = parseFloat(string);//String to Num

If var is the only variable not initialized, the type is undefined; if it is empty, it is Null; if the number calculation result is not a number, it is NaN.

Button method binding

<input type="button" value="Button" οnclick="run()"/>

function run(){
	//Running code

Array / loop

//One-dimensional array
var arr = ['a1','a2','a3','a4','a5','a6'];

//Two-dimensional array
var arr = [

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

Common methods of array

Common methods of string

With HTML components

//<! -- drop down menu -- >
var se = document.getElementById('se').value;
//<! -- single / mu lt iple box -- >
var form = document.getElementById('fo').lag;//lag is the name attribute
for(var i = 0 ; i < form.length; i ++){
    form[i].checked = 1; // All election
    if(form[i].checked) //Counter election 1
        form[i].checked = 0;
    else //Counter election 2
        form[i].checked = 1;

Part II: other small functions

Timed execution function

var temp;
function run(){
	console.log('zwz One second has passed<br>');
function start(){
	temp = window.setInterval('run()',1000);
function stop(){

Dynamic update time component

<!DOCTYPE html>
		<meta charset="utf-8" />
	<body οnlοad="retime()">
		<div id="d"></div>

	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 + 'year' + mouth + 'month' + date + 'day ' + hour + ': ' + min + ': ' + sec;
		var thread = setTimeout('retime()',1000);

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

regular expression

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

Input bar prompt text

<input type="text" id="in" value="Please input" />

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

exception handling

For example, I write an extra t on the alert function in the code. If there is no exception, I will directly report an error on the browser debugging page. If there is a catch statement, I will print the error information in the HTML element with id 'd'.

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

Rolling title

The principle of implementation is to put the last letter at the front every other short period of time to simulate the rolling effect.

	var str = 'hello zwz!';
	function run(){
		document.title = str;
		str = str.substring(1,str.length) + str.substring(0,1);


In addition, there is a JSON pattern that needs to be studied. This is the format that the front end must convert to the back end.

If it is defined in the Java class of the backend as follows: (use var to simulate the backend Java class)

var a = {

Then, the JSON mode is as follows:

var b = '{ "people" : [' +'{ "name":"zwz01" , "age":"18" },' +'{ "name":"zwz02" , "url":"19" }'+']}';
var result1 = typeof(b);//Result is of type string

To put it bluntly, it is to enclose the brace {}. At this time, the data type of b is string string type.

Then we use the JSON.parse function to transform

var c = JSON.parse(b);
var result2 = typeof(c);//Result is object type

This shows that c is an object type, which converts strings into an object model. You can also use the elements directly

As for the conversion of object type to string, I will check it later.

Simulate Java classes

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);

Using JS to add HTML components

//Suppose there is a ul with id 'u' in < body >
	var LiArray = document.getElementById('u').getElementsByTagName('li');
	var aNew = document.createElement('a');
	var aNewText = document.createTextNode('Baidu');
	var aNewHref = document.createAttribute('href');
	aNewHref.value = 'http://www.baidu.com';
	var Body = document.body;
	var HrNew = document.createElement('hr');
	var HrColor = document.createAttribute('color');
	HrColor.value = 'red';

Table data adding

	<table id="msg" align="center">
		<caption>XXXX surface</caption>
			<td>Student ID</td><td>Full name</td><td>Gender</td>
		<input type="button" οnclick="addRow()" value="Add data"/>

	function addRow(){
		var form = document.getElementById('msg');
		var newRow = form.insertRow();//Return the newly inserted row (deleteRow(index) delete)
		newRow.insertCell(0).innerHTML = '0413170337';
		newRow.insertCell(1).innerHTML = 'zwz';
		newRow.insertCell(2).innerHTML = 'nan';

Last edited January 30, 2020

43 original articles published, 30 praised, 10000 visitors+
Private letter follow

Posted by smiley_kool on Wed, 29 Jan 2020 21:06:05 -0800