javascript intro : Lesson01 Easy To Learn

JavaScript

It is JavaScript or JS, which is a language used to create web pages to help strengthen the interactive page activity with users, and it is developed by Mozilla Company. In saving the idea of ​​web pages by dealing directly with ajax, which allows quick access to databases from the server side.

 

 

Script is the most powerful language indisputably in managing processing operations in web pages, and front-end programmers love this language because it gives them elements that support highly successful websites, so what is the benefit of a website without the presence of this ancient language.

 

Definition

Script is similar to its counterparts from other low-level languages, as it contains the same programming semantics, but in a slightly different format. Script is distinguished by many advantages, which are:

  • Embedded into any HTML page.
  • Its capabilities are high while it is running in your web page.
  • A powerful language programmatically and did not lose any of the advantages of programming, it supports functions, loops, and variable definition like other languages.
  • Its invaluable ability to access html tags and CSS segments is the manager of all web technologies.
  • An irreplaceable intermediary between the server page and the user page.
  • Programmatic event management with direct access identifiers

Example

Please, to understand JavaScript and how it works, copy the following HTML template codes and run it in your browser.

<html>

    <head>
        <title>Our first page</title>
        <style>
            div{
                 background-color: #5CE1E6; 
                 border: none;
                 color: white;
                 padding: 15px 32px;  /* x  y padding*/
                 text-align: center;
                 cursor: pointer;
                 display: inline-block;
                 font-size: 18px;
            }
        </style>
    </head>
    
    <body>
        <h2> javascript</h2>
        <div onclick="alert('Hello World!')">Click me </div>
        
    </body>

</html>

 

This was a quick example of how the JavaScript language works by direct access from the onclick event, which is characterized by this language, as these events serve the language in a strong manner that makes its use indispensable in all cases.

 

Link file

The first method in the previous example is to access a script quickly, but what if we want to access a script via a single page? Yes, that is possible, and the reason is the need for a single script page and we call it in the head tag of the html language.

 

The general definition in the head tag for our script call is : 

<head>
  <script src="script.js"></script>
</head>

You can do this by making a txt file and giving it the extension txt.js and putting it in your project files, then you will call it in the head tag in the html language, try it yourself.

Well, after we created the txt.js file, we will now do the previous example, but like this, please try the following code:

JS

alert("Hello World!");

 

CSS

div{
         background-color: #5CE1E6; 
         border: none;
         color: white;
         padding: 15px 32px;  /* x  y padding*/
         text-align: center;
         cursor: pointer;
         display: inline-block;
         font-size: 18px;
    }

 

HTML

<html>

    <head>
        <title>Our first page</title>
        
        <link rel="stylesheet" href="style.css">
        <script src = "txt.js"></script>
    </head>
    
    <body>
        <h2> javascript</h2>
        <div onclick="alert('Hello World');" >Click Me</div>
        
    </body>

</html>

 

Other method

There is only one way to implement script code and that is access on the same page but with the inclusion of the <script></script> tags allowed by HTML, where everything inside will be read as script code exactly as follows:

<html>

    <head>
        <title>Our first page</title>
        
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <h2> javascript</h2>
        <div onclick="alert('Hello World from onclick');" >Click Me</div>
        
    </body>
    
    <script>
        alert("Hello World from html");
    </script>

</html>

 

Example

Please, to understand JavaScript and how it works, copy the following template codes and run it in your browser.

JS

alert("Hello World! from script");

 

CSS

div{
         background-color: #5CE1E6; 
         border: none;
         color: white;
         padding: 15px 32px;  /* x  y padding*/
         text-align: center;
         cursor: pointer;
         display: inline-block;
         font-size: 18px;
    }

 

HTML

<html>

    <head>
        <title>Our first page</title>
        
        <link rel="stylesheet" href="style.css">
        <script src = "txt.js"></script>
    </head>
    
    <body>
        <h2> javascript</h2>
        <div onclick="alert('Hello World from onclick');" >Click Me</div>
        
    </body>
    
    <script>
        alert("Hello World from html");
    </script>

</html>