current position:Home>Introduction to JavaScript

Introduction to JavaScript

2022-04-29 13:34:27Dada front end

Get to know JavaScript be familiar with JavaScript Basic grammar Window interaction method adopt DOM Carry out the operation of web page elements Learn how to write JS Code Application JavaScript To operate HTML Elements and CSS style

<!DOCTYPE HTML>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Warm up </title>
</head>
<body>
  <p id="p1"> I'm the first paragraph </p>
  <p id="p2"> I'm the second paragraph </p>
  
  <script type="text/javascript">
	document.write("hello");
	document.getElementById("p1").style.color="blue"; 
  </script>
</body>
</html>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb18030">
        <title> Insert js Code </title>
        <script type="text/javascript">
        document.write(" Turn on JS The journey !");
    </script>
    </head>
    <body>
    </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> quote JS file </title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS Code location </title>
<script type="text/javascript">
  document.write("I love");
</script>
</head>
<body>
<script type="text/javascript">
 document.write("javascript");
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Cognitive statement </title>
<script type="text/javascript">
document.write("Hello");
 document.write("world");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Hidden comments </title>
 <script type="text/javascript">
    document.write(" magical JS, Hide us !"); //   Quickly turn me into a single line comment 
    /* Do you know? 
    JS Many dynamic effects can be achieved 
     Come and learn !*/
 </script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Variable </title>
<script type="text/javascript">
 var mynum = 8;
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Judgment statement </title>
  <script type="text/javascript">
	var score =80; //score Variable storage , The initial value is 80
	  if(score>80)
	{
     document.write(" great , Passed the grade .");
	}
  else
	{
	 document.write(" come on. , Failing in grades .");
	}
  </script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Function call </title>
   <script type="text/javascript">
      function contxt() // Defined function 
      {
         alert(" ha-ha , Call the function !");
      }
   </script>
</head>
<body>
   <form>
      <input type="button"  value=" Click on the I " onclick="contxt()" />  
   </form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.write</title>
  <script type="text/javascript">
    var mystr=" I am a ";
    var mychar="JavaScript";
document.write(mychar+"<br>");
document.write(mystr+mychar+" Fans of !")
  </script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alert</title>
  <script type="text/javascript">
  function rec(){
    var mychar="I love JavaScript";
    alert(mychar)
  }
  </script>
</head>
<body>
    <input name="button" type="button" onClick="rec()" value=" Click on the I , Pop-up dialog box " />
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alert</title>
  <script type="text/javascript">
  function rec(){
    var mychar="I love JavaScript";
    alert(mychar)
  }
  </script>
</head>
<body>
    <input name="button" type="button" onClick="rec()" value=" Click on the I , Pop-up dialog box " />
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>confirm</title>
  <script type="text/javascript">
  function rec(){
    var mymessage= confirm(" Are you a lady ?");
    if(mymessage==true)
    {
    	document.write(" Are you a lady !");
    }
    else
    {
        document.write(" Are you a man !");
    }
  }    
  </script>
</head>
<body>
    <input name="button" type="button" onClick="rec()" value=" Click on the I , The confirmation dialog box will pop up " />
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prompt</title>
  <script type="text/javascript">
  function rec(){
	var score; //score Variable , Used to store the score value entered by the user .
	score =  prompt(" What's your score ?");
	if(score>=90)
	{
	   document.write(" You're great !");
	}
	else if(score>=75)
    {
	   document.write(" Good call !");
	}
	else if(score>=60)
    {
	   document.write(" Come on !");
    }
    else
	{
       document.write(" We have to work hard !");
	}
  }
  </script>
</head>
<body>
    <input name="button" type="button" onClick="rec()" value=" Click on the I , Evaluate your grades !" />
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
  function Wopen(){
      window.open('http://www.123.com','_blank','height=600,width=400,top=100,left=0');

  } 
</script>
</head>
<body>
    <input name="button" type="button" onClick="Wopen()" value=" Click on the I , Open a new window !" / >
</body>
</html>

grammar :

window.open([URL], [ Window name ], [ Parameter string ])

_blank: Show target page in new window _self: Display the target page in the current window _top: Frame page displays the target page in the upper window

window.close(); // Close this window < Window object >.close(); // Close the specified window

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>close()</title>
  <script type="text/javascript">
     var mywin=window.open("http://www.123.com");
 mywin.close();
  </script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript">  
    
    //  A confirmation box will pop up when a new window is opened , Whether to open 
function openWindow(){
var wep;
var op;
wep = confirm(" Whether to open a new web page ?");
if(wep==true)
{
op = prompt(" The default URL is :","http://www.123.com/");
if(op!=null)
window.open(op,'_blank','width=400,height=500,menubar=no,toolbar=no');
}
else
alert(" End of operation !!");

}
    //  Through the input dialog box , Determine the open web address , The default is  http://www.imooc.com/

    // Open window requirements , wide 400 Pixels , high 500 Pixels , No menu bar 、 No toolbar .
    
    
  </script> 
 </head> 
 <body> 
	  <input type="button" value=" New window to open website " onclick="openWindow()" /> 
 </body>
</html>

HTML The code is decomposed into DOM Node hierarchy :

adopt ID Get elements document.getElementById(“id”)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar=           ;
  document.write(" result :"+mychar); // Output the obtained P label . 
  document.getElementById("con")
</script>
</body>
</html>

innerHTML attribute innerHTML Property is used to get or replace HTML Content of element .

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript Is an object-based 、 Simple event driven scripting language , Embedded in the HTML In the document , The browser is responsible for interpreting and executing , Produce dynamic display effect on the web page and realize the function of interaction with users .</p>
<script type="text/javascript">
  var mychar=           ;
  document.write(" The original title :"+mychar.innerHTML+"<br>"); // Output original h2 Label content 
  document.getElementById("con")
  document.write(" Modified title :"+mychar.innerHTML); // After modifying the output h2 Label content 
  mychar.innerHTML="Hello world";
</script>
</body>
</html>

change HTML style

grammar : Object.style.property=new style;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style style </title>
</head>
<body>
  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript Make the web page display dynamic effects and realize the function of interaction with users .</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
 mychar.style.color="red";
 mychar.style.backgroundColor ="#ccc";
mychar.style.width="300px";
  </script>
</body>
</html>

Show and hide (display attribute )

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
		{  
		var mychar = document.getElementById("con");
        mychar.style.display="none";
		}  
		function showtext()  
		{  
		var mychar = document.getElementById("con");
        mychar.style.display="block";
		}
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con"> As a Web For developers , If you want to provide beautiful web pages 、 Make users satisfied with the Internet experience ,JavaScript It's an essential tool .</p> 
    <form>
       <input type="button" onclick="hidetext()" value=" Hide content " /> 
       <input type="button" onclick="showtext()" value=" According to the content " /> 
    </form>
</body> 
</html>

className Property to set or return the class attribute .

Fetch element class attribute

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className attribute </title>
<style>
    body{ font-size:16px;}
    .one{
		border:1px solid #eee;
		width:230px;
		height:50px;
		background:#ccc;
		color:red;
    }
	.two{
		border:1px solid #ccc;
		width:230px;
		height:50px;
		background:#9CF;
		color:blue;
	}
	</style>
</head>
<body>
    <p id="p1" > JavaScript Make the web page display dynamic effects and realize the function of interaction with users .</p>
    <input type="button" value=" Add the style " onclick="add()"/>
	<p id="p2" class="one">JavaScript Make the web page display dynamic effects and realize the function of interaction with users .</p>
    <input type="button" value=" Change the look " onclick="modify()"/>

	<script type="text/javascript">
	   function add(){
	      var p1 = document.getElementById("p1");
	      p1.className = "one";
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	      p2.className = "two";
	   }
	</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
	border:#333 solid 1px;
	padding:5px;}
p{
	line-height:18px;
	text-indent:2em;}
</style>
</head>
<body>
  <h2 id="con">JavaScript Course </H2>
  <div id="txt"> 
     <h5>JavaScript Add dynamic effects to web pages and realize the function of interaction with users .</h5>
        <p>1. JavaScript Introduction , Don't understand JS you , Quickly understand JS.</p>
        <p>2. JavaScript Advanced , Let you know JS Basic grammar of 、 function 、 Array 、 event 、 Built-in objects 、BOM browser 、DOM operation .</p>
        <p>3.  After learning the above two basic courses , In-depth learning JavaScript The variable scope of 、 event 、 object 、 motion 、cookie、 Regular expressions 、ajax Courses .</p>
  </div>
  <form>
  <!-- When you click the corresponding button , Carry out the corresponding operation , Add an event to the button -->
    <input type="button" value=" Color change " >  
    <input type="button" value=" Change the width and height " >
    <input type="button" value=" Hide content " >
    <input type="button" value=" According to the content " >
    <input type="button" value=" Cancel settings " >
  </form>
  <script type="text/javascript">
// Definition " Color change " Function of 
obj.style.color
obj.style.backgroundColor 

// Definition " Change the width and height " Function of 
obj.style.width
obj.style.height 

// Definition " Hide content " Function of 
obj.style.display="none";

// Definition " According to the content " Function of 
obj.style.display="block";

// Definition " Cancel settings " Function of 
confirm()


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

If there is something wrong with this number ( such as : Involving copyright or other issues ), Please contact us in time for rectification , It will be dealt with at the first time .

copyright notice
author[Dada front end],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291041433079.html

Random recommended