current position：Home>Introduction to JavaScript
Introduction to JavaScript
2022-04-29 13:34:27【Dada 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
The sidebar is recommended
- How to create JavaScript custom events
- Is there any recommendation for wireless signal and wired signal power amplification circuit?
- Introduction to basic methods of math built-in objects in JavaScript
- 1000km pure electric endurance is meaningless? Then why does the car factory still try its best to extend the endurance?
- [let's implement a simple vite!] Chapter 4 - compiling single file components
- 3-11xss htmlspecialchars bypass demo
- How to conduct architecture design 𞓜 deeply reveal Alibaba cloud serverless kubernetes (2)
- Heapdump performance community special series 7: front door opener of large factory -- Application Practice of fluent
- 1、 HTML base tag
- Don't leave the crane unless necessary! A case of novel coronavirus nucleic acid positive was found in Heshan, Guangdong
guess what you like
[Architect (Part 20)] self defined template of scaffold and summary of phase I
How does JavaScript understand this algorithm
[live review] openharmony knowledge empowerment lesson 2, phase 5 - becoming a community talent
Understand the basic history and knowledge of HTTP
Influence of lazy loading of Web front-end training on Web Performance
Guangxi 2021 Guangxi landscape - blessing Lake Changshou Island
Responsive gulp Chinese network of web front end
Twaver-html5 basic learning (26) background
CSS learning notes [3] floating, not separated from document flow, inheritance and stacking
Webengine loading local html is invalid, and html is the dynamic address generated by JS, which can be solved
Random recommended
- Event handling of react
- Character coding knowledge that needs to be understood in front-end development
- 05. JavaScript operator
- 06. JavaScript statement
- Vue basics and some components
- Introduction to front-end Er excellent resources
- Node. Summary of methods of outputting console to command line in JS
- The beginning of passion, the ending of carelessness, python anti climbing, Jiageng, friends asked for MIHA's API and arranged y24 for him
- Technology sharing | test platform development - Vue router routing design for front-end development
- Node under windows JS installation detailed steps tutorial
- Layui built-in module (element common element operation)
- Excuse me, my eclipse Exe software has clearly opened to display the number of lines. Why is it useless
- It was revealed that Meila of Sea King 2 had less than ten minutes to appear, which was affected by negative news
- Vue element admin how to modify the height of component El tabs
- Bootstrap navigation bar drop-down menu does not take effect
- Vue Preview PDF file
- Geely joined the hybrid sedan market, and Toyota seemed even more hopeless
- Mustache template engine for exploring Vue source code
- Referer and referer policy and picture anti-theft chain
- Explain the "three handshakes" and "four waves" of TCP connection in detail
- Introduction to basic methods of math built-in objects in JavaScript
- JavaWeb Tomcat (III) httpservlet
- Vue Za wiper technical scheme
- Differences, advantages and disadvantages between HTTP negotiation cache Etag and last modified
- After taking tens of millions less, the management of Lenovo holdings took the initiative to reduce the salary by 70%
- What if Vue introduces this file and reports an error?
- Use Hikvision Web3 in vue3 2. Live broadcast without plug-in version (II)
- How to learn high-order function "zero basis must see"
- Detailed explanation of JS promise
- Cesium drawcommand [1] draw a triangle without talking about the earth
- The role of webpack cli in webpack packaging
- Action system of coco2d-x-html5
- Vxe table check box paging data memory selection problem
- [hand tear series] hand tear promise -- this article takes you to realize promise perfectly according to promise a + specification!
- QT use qdialog to realize interface mask (mask)
- Differences between JSP comments and HTML comments
- Bankless: Ethereum's data report and ecological highlights in the first quarter of 22 years
- Spring mvc07: Ajax research
- Understand the basic history and knowledge of HTTP
- Technology sharing | learning to do test platform development vuetify framework