web front end technology notes JavaScript introduction, variables, operation elements and attributes

JavaScript introduction

JavaScript is a footstep language running on the browser side. JavaScript mainly solves the problem of front-end interaction with users, including use interaction and data interaction. JavaScript is interpreted and executed by the browser, and the front-end scripting language includes JScript (unique to Microsoft and IE), ActionScript (adobe, requiring plug-ins), etc.

Front end three blocks
1. HTML: page structure
2. CSS: page presentation: element size, color, position, hide or display, partial animation effect
3. JavaScript: page behavior: partial animation effect, interaction between page and user, page function
#How JavaScript embeds pages

1. Inter line events (mainly used for events)

<input type="button" name="" onclick="alert('ok!');">

2. Page script tag embedding

<script type="text/javascript">        
    alert('ok!');
</script>

3. External introduction

<script type="text/javascript" src="js/index.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<!-- Third embedding js Method: external chain js   -->
	<script type="text/javascript" src="js/hello.js"></script>
	
	<!-- Second embedding js How to: inline js   -->
	<script type="text/javascript">		
		alert("hello world too!");
	</script>

</head>
<body>

	<!-- First embedding js Method of: interline event   -->
	<input type="button" name="" value="click" onclick="alert('hello world!')">
</body>
</html>

variable

javascript is a weakly typed language. The variable type of javascript is determined by its value. The keyword 'var' is required to define variables

 var iNum = 123;
 var sTr = 'asd';

//Multiple variables defined at the same time can be separated by "," and share a 'var' keyword

 var iNum = 45,sTr='qwe',sCount='68';

Variable type

5 basic data types:
1. Number number type
2. String string type
3. Boolean boolean type true or false
4. Undefined type. The variable declaration is uninitialized, and its value is undefined
5. Null type indicates an empty object. If the defined variable is ready to save the object in the future, the variable can be initialized to null. If the object cannot be obtained on the page, the returned value is null

1 compound type:
object

javascript statements and comments

1. A javascript statement should begin with ';' ending

<script type="text/javascript">    
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
    alert(sTr);
};
fnAlert();
</script>

2. javascript comments

<script type="text/javascript">    

// Single-Line Comments 
var iNum = 123;
/*  
    multiline comment 
    1,...
    2,...
*/
var sTr = 'abc123';
</script>

Naming conventions for variables, functions, attributes and function parameters

1. Case sensitive
2. The first character must be a letter, an underscore () or a dollar sign ($)
3. Other characters can be letters, underscores, dollar characters, or numbers

Hungarian naming style:

Object, such as oDiv
Array a Array, such as aItems
String s String, for example: sUserName
Integer i Integer, such as iItemCount
Boolean value B, such as bIsComplete
Floating point number f Float, such as fPrice
Function fn Function, such as fnHandler
Regular expression re RegExp, such as reEmailCheck

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">

		// Single-Line Comments 

		/*
			multiline comment 
			The following two variable declarations are combined into one sentence
		*/
		
		//var iNum = 12;
		//var sTr = 'abc';


		var iNum = 12,sTr='abc';

		var iNum02;


		//alert(iNum);

		//alert(sTr);

		alert(iNum02);




	</script>
</head>
<body>
	
</body>
</html>

Get element method 1

You can use the getElementById method on the built-in object document to get the element with the id attribute set on the page. What you get is an html object, and then assign it to a variable, such as:

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">This is a div element</div>

In the above statement, if javascript is written on the element, there will be an error, because it is loaded and executed from top to bottom on the page. When javascript gets the element div1 on the page, the element div1 has not been loaded. There are two solutions:

The first method: put javascript at the bottom of the page

....
<div id="div1">This is a div element</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

The second method: put javascript statements in window In the function triggered by onload, the statement to obtain elements will be executed after the page is loaded, so there will be no error.

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">This is a div element</div>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<script type="text/javascript">
		// Load the code in curly brackets after the whole page is loaded
		window.onload = function(){

			/*
			document.getElementById('div1').style.color = 'red';
			document.getElementById('div1').style.fontSize = '30px'
			
			Simplify code with variables:

			*/
			// Get the element by id and assign it to oDiv
			var oDiv = document.getElementById('div1');
			// Change element attributes
			oDiv.style.color = 'red';
			oDiv.style.fontSize = '30px';

		}		


	</script>


</head>
<body>
	<div id="div1">This is a div element</div>



</body>
</html>

Action element properties

Get the page element, you can operate on the attributes of the page element. The operation of attributes includes reading and writing attributes.

Methods of manipulating attributes
1,“.” operation
2. [] operation

Attribute writing

1. The attributes of html are written in the same way as those in js
2. The "class" attribute is written as "className"
3. In the "style" attribute, the attributes with horizontal bars are changed to hump type, such as "font size" and "style" fontSize”

By "." Action properties:

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // Read attribute value
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        // Write (set) properties
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">1122</a>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		window.onload = function(){
			var oDiv = document.getElementById('div1');
			var oA = document.getElementById('link');
			var oDiv2 = document.getElementById('div2');

			// read attribute
			var sId = oDiv.id
			alert(sId);

			
			// Write properties
			oDiv.style.color = "red";
			oA.href = "http://www.baidu.com";
			oA.title = "This is the link to Baidu";


			// The operation class attribute needs to be written as className
			oDiv2.className = "box2";
		}

	</script>

	<style type="text/css">
		
		.box{
			font-size:20px;
			color:gold;
		}

		.box2{
			font-size:30px;
			color:pink;
		}

	</style>
</head>
<body>
	<div id="div1">This is a div element</div>
	<a href="#"Id =" link "> this is a link</a>

	<div class="box" id="div2">This is the second div</div>
</body>
</html>

Operation properties via '[]':

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // read attribute
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        // Write (set) properties
        // oA.style.val1 = val2;  No response
        oA.style[sVal1] = sVal2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast. Cn "id =" link1 "> wisdom Podcast</a>
<div id="div1">This is a div element</div>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById('div1');
			var sMystyle = 'fontSize';
			var sValue = '30px';
			/*	
				This sentence has no effect: the variable sMystyle is considered an attribute
				oDiv.style.sMystyle = sValue;
			*/

			/* 
				If the attribute is replaced by a variable, it needs to be operated with []

			 */
			oDiv.style[sMystyle] = sValue;
		}

	</script>
</head>
<body>
	<div id="div1">This is a div element</div>
</body>
</html>

innerHTML

innerHTML can read or write the contents of the tag package

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		window.onload = function(){

			var oDiv = document.getElementById('div1');

			// Read the contents of the element
			var sTr = oDiv.innerHTML;
			alert(sTr);

			// Write the contents of the element
			//oDiv.innerHTML = "modified text";
			oDiv.innerHTML = "<a href='http://www.itcast. Cn '> intelligence podcast < / a >“

		}


	</script>
</head>
<body>
	<div id="div1">This is a div element</div>
</body>
</html>

Keywords: Javascript Front-end html5 html

Added by tasistro on Fri, 17 Dec 2021 18:49:03 +0200

Programming VIP