Introduction to JavaScript

What is JavaScript?

JavaScript is a scripting language widely used in client web page (browser) development. It is used to add dynamic functions to HTML web pages, such as responding to various user requests. Operation etc.

JavaScript is a scripting language based on Object and Event Driven with security properties. In most cases, it is executed by a web browser.

JavaScript is a registered trademark of Sun Corporation of the United States. The latest version of Javascript is currently version 1.9, which follows the ECMA-262 standard (ECMAScript) of Ecma International (formerly the European Computer Manufacturers Association). This version is still Continuously developing.

JavaScript Features

Scripting Language

JavaScript is a scripting language that uses small program segments to implement programming. Like other scripting languages, JavaScript is an interpreted language that is translated line by line when executed by the browser.

Object-based language

JavaScript is an object-based language and can also be regarded as object-oriented. This means that it can use objects it has already created. Therefore, much functionality can come from the interaction of methods of objects in a scripting environment with scripts.

Simplicity

Writing JavaScript is very simple, you don’t need to install a specific development environment, you only need one JavaScript scripts can be written using simple Notepad. It has basic program syntax and language structures as well as weak data types, which are easy to learn and use.

Security

JavaScript is a security language. It does not allow access to the local hard disk and cannot save data. After entering the server, modification and deletion of network documents are not allowed. Information browsing or dynamic interaction can only be achieved through the browser, thus effectively preventing data loss.

Dynamics

JavaScript is dynamic, it can respond directly to user input without going through the Web service program . It responds to users in an event-driven manner. The so-called event-driven refers to the action generated by performing a certain operation on the web page, which is called an "event": for example, pressing the mouse, moving the window, selecting the menu, etc. can be regarded as events. When an event occurs, it may cause a corresponding JavaScript event response.

Cross-platform

JavaScript is executed by the web browser and has nothing to do with the operating system environment, as long as the browser can run Computers and browsers that support JavaScript will execute correctly.

Write directly to HTML output

<html>
<head>
  <script>
    alert('Hello, world');
  </script>
</head>
<body>
  <p>...</p>
</body>
</html>

Reaction to events
##

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
  <button type="button" onclick="alert('你好!')">点我!</button>
</body>
</html>

Change HTML content

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
    <p id="demo">
    内容。
    </p>
    <script>
    function myFunction()
    {
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变内容
    }
    </script>
    <button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

Change HTML image

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
    <script>
    function changeImage()
    {
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
     {
      element.src="/images/pic_bulboff.gif";
      }
    else
       {
      element.src="/images/pic_bulbon.gif";
       }
    }
    </script>
    <img id="myimage" onclick="changeImage()"
    src="/images/pic_bulboff.gif" width="100" height="180">
    <p>点击灯泡查看效果</p>
</body>
</html>

Change HTML style

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">
改变 HTML 的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="blue";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

Verify input

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <script type="text/javascript">
    function validate_email(field,alerttxt)
    {
    with (field)
    {
    apos=value.indexOf("@")
    dotpos=value.lastIndexOf(".")
    if (apos<1||dotpos-apos<2) 
     {alert(alerttxt);return false}
    else {return true}
    }
    }
    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_email(email,"Not a valid e-mail address!")==false)
     {email.focus();return false}
    }
    }
    </script>
</head>
<body>
    <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit"> 
    </form>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>

submit Reset Code

Automatic operation

Introduction to JavaScript

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]