table of Contents
1. Introduction
1.1 What is JavaScript
JavaScript is a dynamic computer programming language. It is lightweight and is most commonly used as part of a web page. Its implementation allows client-side scripts to interact with users and create dynamic pages. It is an interpreted programming language with object-oriented functions.
1.2 The difference between JavaScript and Java language
Javascript has nothing to do with Java, they are two different languages (java is a programming language, javascript is the scripting language of the client), but there is a Java in the name.
1.3Html、Css和Javascript
These three elements together form the basis of Web development.
HTML : The structure of the page-heading, body, any images to be included
CSS : Control the appearance of the page (this will be used to customize fonts, background colors, etc.)
JavaScript : The incredible third element. After creating the structure (HTML) and aesthetic atmosphere (CSS), JavaScript makes your website or project vibrant.
1.4 Javascript function
- Form data validation: Form data validation is the most basic and efficient function of JavaScript.
- Dynamic HTML (DHTML): Dynamic HTML refers to webpage effects that change dynamically without server intervention, including dynamic content, dynamic styles, and dynamic layouts. Such as changing the size of the box, background color, picture, etc.
- User interaction: User interaction refers to response processing based on different operations of the user. For example: linkage menu, etc.
- Data binding: HTML forms and tables can be defined as data sources in .txt files. By accessing the data source files located on the server side, the data in the data source can be transmitted to the client, and the data can be saved in the client end.
- Search for a small amount of data: It can search and replace character strings in the current web page.
- AJAX core technology: AJAX is asynchronous JavaScript+XML. This object provides a technology that supports asynchronous requests, so that the client can use JavaScript to make a request to the server and process the response, but it does not affect the user's browsing on the client.
- Nodejs uses javascript as the backend. It is the only language that can be used as both frontend and backend.
(The above function is to directly use my teacher’s courseware. I don’t know so much. He is a senior programmer with more than 10 years of development experience. Hahahahahaha, I want to help promote his online class, but think about it Forget it, I feel that advertising is a bit bad)
*********************************************一条华丽的分割线***************************************************
2. Practical code
2.1 Javascript is written in this html
1. The js program must be written in the script tag.
2. Script: can be written anywhere in the web page.
3. Type="text/javascript": indicates that the current language is javascript language. This attribute can be omitted .
Example: above code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
alert("出错啦")
</script>
</body>
</html>
Just run the code and you will know
2.2 Javascript can be written in a separate file (external link)
Create a js file and write js code in the js file. (Just write the js code in the external file, just write the code directly, no need to add script tags)
For example, create a test.js file under the js directory and the code in it is alert ("An error has occurred!")
Example code
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/test.js" type="text/javascript" charset="UTF-8">
</script>
</body>
</html>
Just run the code and you will know
2.3 Actual combat: Click on a box to change the color of another box
For example, the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
}
#box2{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
<script type="text/javascript">
//目标：点击box1时，让box2变颜色
var b1 = document.getElementById("box1")
b1.onclick=function(){
// 当点击b1的时候，执行此处的代码
document.getElementById("box2").style.backgroundColor="pink"
}
</script>
</body>
</html>
You’ll know the effect of running, just click on the first small box
2.4 Actual combat: a button bound to an event
- In js, a function can be defined using the keyword function. The code in the function will not be executed automatically. The code in the function will only be executed after the function is called.
- You can bind click events to any html container tag in the web page. οnclick="add();" onclick means to execute when clicked.
- There are two functions parseInt in js to convert a string to a number. parseFloat(): Specialize the string as a floating point type.
Example code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" name="tb1" id="tb1" value="" />+<input type="text" name="tb2" id="tb2" value="" /> =<input type="text" name="tb3" id="tb3" value="" />
<input type="button" id="btnjisuan" value="计算" onclick="add();" />
<a href="javascript:void(0);" onclick="bb();">腾讯</a>
<script type="text/javascript">
function add()
{
var v1=document.getElementById("tb1").value;
var v2=document.getElementById("tb2").value;
var v3=parseInt(v1) + parseInt(v2);
document.getElementById("tb3").value=v3;
}
function bb()
{
location.href="http://www.qq.com"; //通过js代码实现页面的跳转
}
</script>
</body>
</html>
Just run one and you will know hahahaha, after learning this, the next one will be much easier!
*********************************************一条华丽的哈哈哈哈哈哈哈哈***************************************************
2.4 Actual combat: changing skins
Realization effect: Click on the small frame represented by what color, and the fairy of what clothes to wear will pop up
(hahahaha I love to see these beautiful things hahahaha)
You can download some pictures or color gradient pictures for background, put them in img, and name them yourself. The basic format is as follows: the
above code:
Web page skinning.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css2.css" id="btnlink"/>
</head>
<body>
<div id="box1">
<span id="s1" onclick="a1();">志玲</span><span id="s2" onclick="a2();">依林</span><span id="s3" onclick="a3();">昆凌</span>
</div>
<script type="text/javascript">
function a1()
{
document.getElementById("btnlink").href="css/css1.css";
}
function a2()
{
document.getElementById("btnlink").href="css/css2.css";
}
function a3()
{
document.getElementById("btnlink").href="css/css3.css";
}
</script>
</body>
</html>
css1.css
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height: 100%;
}
body{
background-image: url(../img/blue.jpg);
background-repeat: repeat-x; /* 设置不重复平铺 */
}
#box1{
width: 186px;
height: 60px;
background-color: white;
margin: 0 auto;
position: relative;
}
#s1{
width: 60px;
height: 60px;
background-color: blue;
display: inline-block;
margin: 1px;
cursor: pointer;
position: absolute; /* 子绝父相 */
left: 0;
top: 0;
}
#s2{
width: 60px;
height: 60px;
background-color:green;
display: inline-block;
margin: 1px;
cursor: pointer;
position: absolute;
left: 62px;
top: 0;
}
#s3{
width: 60px;
height: 60px;
background-color: pink;
display: inline-block;
margin: 1px;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
css2.css
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height: 100%;
}
body{
background-image: url(../img/green.jpg)
}
#box1{
width: 186px;
height: 60px;
background-color: white;
margin: 0 auto;
position: relative;
}
#s1{
width: 60px;
height: 60px;
background-color: blue;
display: inline-block;
margin: 1px;
cursor: pointer;
position: absolute; /* 子绝父相 */
left: 0;
top: 0;
}
#s2{
width: 60px;
height: 60px;
background-color:green;
display: inline-block;
margin: 1px;
cursor: pointer;
position: absolute;
left: 62px;
top: 0;
}
#s3{
width: 60px;
height: 60px;
background-color: pink;
display: inline-block;
margin: 1px;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
css3.css
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height: 100%;
}
body{
background-image: url(../img/pink.jpg)
}
#box1{
width: 186px;
height: 60px;
background-color: white;
margin: 0 auto;
position: relative;
}
#s1{
width: 60px;
height: 60px;
background-color: blue;
display: inline-block;
margin: 1px;
cursor: pointer;
position: absolute; /* 子绝父相 */
left: 0;
top: 0;
}
#s2{
width: 60px;
height: 60px;
background-color:green;
display: inline-block;
margin: 1px;
cursor: pointer;
position: absolute;
left: 62px;
top: 0;
}
#s3{
width: 60px;
height: 60px;
background-color: pink;
display: inline-block;
margin: 1px;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
Some very basic things are too much to write, and many are not commonly used. When we need it, Google and Baidu will do.
Due to time constraints, I am here for the time being (I knocked on the essence of the teacher’s lecture). If there are any supplements later, I will update it in time.
Welcome to
https://blog.csdn.net/hanhanwanghaha,
a super invincible cute The people duck
look forward to learning together.