JavaScript - character codes: description, features and examples

HTML allows people to read text, view photos, watch videos and click links to go to other web pages with lots of text, images and videos. When you need to add "intelligence" to pages so that they can interact with site visitors, use JavaScript codes.

They allow the webpage to respond intelligently. With their help, they create intelligent web forms that help visitors find out when and where they need to see important information. You can create elements, navigate a web page, update the contents of a web page, without having to download a new one. That is, it allows you to make sites more attractive, effective and useful.

JavaScript basics

For many users, the term "computer programming" is associated with super-smart characters hunched over keyboards, typing for hours indiscriminate gibberish. And the creation of some programs really looks like this. But Java is the first language for a new level of programming.

However, Java codes are still complex, although less so than HTML or CSS. Each programming language has a unique set of keywords and symbols and its own set of rules for combining all elements - this is the syntax of the language. You need to remember the words and rules of JavaScript codes in order to be fully equipped or at least keep the necessary Java tutorial and also a reference for jQuery - the most popular JS library in the world. It simplifies complex programming. Even with a little JS knowledge with jQuery, you can create complex interactive websites in no time.

Presentation of a computer program

When a user adds JavaScript codes to pages on the Internet, he writes a computer program. Of course, most JS programs are much simpler than programs that are used to read email, retouch photos, and create web pages. Despite the fact that JS programs, also called scripts, are simpler and shorter, they sometimes functionally do not differ from complex ones.

Any computer program is a sequence of steps that are performed in a specific order. Suppose you want to display a welcome message using the name of the visitor to the web page: “Welcome Bob!” To complete this task, you need to perform several actions:

1. Ask the name of the visitor.
2. Get visitor response.
3. Print, or more correctly, show the message on a web page.

This example demonstrates the fundamental programming process — determining what needs to be done and then dividing this task into separate steps. Each time you want to create a program, go through the process of determining steps. JavaScript is programming code that makes the web browser behave as the developer needs.

Convert languages ​​in a web browser

Web browsers are designed to understand HTML and CSS and translate these languages ​​on a monitor screen. The part of the web browser that understands HTML and CSS is called the layout or rendering mechanism. Most browsers have JS interpreters. This is the part of the browser that understands JavaScript and can perform its programming steps. The browser usually expects HTML, so in the JS program you need to specifically specify the browser using tags. Then he will understand that he has reached the end of the program and will be able to return to his normal duties.

Many experts are happy to share their experience with beginners in programming about where and how to place JavaScript code, here are some of them for placing external files:

1. External Script files are used if you need to use the same script on many pages so as not to rewrite the code on each.
2. They are used for inclusion in two cases: at the beginning of the function and JavaScript scripts that need to be run when the page loads.
3. Make sure the files (.js) do not contain the tag. They should contain only HTML comments and JS code, and nothing more.

Root paths for files

A document-oriented path indicates the direction from the web page to the JS file. If the site has several levels of folders, you will need to use different paths to indicate the same file. For example, suppose there is a file called site.js located in a folder called scripts in the main directory of the site. The document-oriented path to this file will look like this for the home page: scripts / site.js,. But for a page located inside a folder with the name about, the path to the same file will be different: ../scripts/site.js -The ../, which means to go to the folder in the script and get the file site.js.

Here are some tips on what type of URL to use when writing programs:

1. If you need to point to a file that is not on the same server as the web page, you must use the absolute path.
2. Root paths are good for JS files stored on your own site. Since they always start from the root folder, the URL for the file will be the same for every page of the site, even if the web pages are in folders and subfolders.
3. Root paths do not work if you do not browse the web through a server on the Internet or a web server that is configured on your own computer for testing purposes. In other words, if the user simply opens the web page from the computer using the "File" → "Open" command of the browser, he will not be able to find, download or run files attached using the root path.
4. You can create an external JS file, attach it to a web page, and then check it in your browser by simply opening the page from your hard drive. Relationships with documents work fine when moving to a real website on the Internet, but you will have to rewrite the URL into a JS file if the web page moves to another location on the server.

Writing the first program

For CSS users, JavaScript is a lot easier to learn. Here are three important steps that developers should always follow when creating or using JavaScript code:

1. Apply a script tag to tell the browser that JS is being used.
2. Write or download JS.
3. Check the script.
4. Before using it, they test the script on a variety of systems and, most importantly, on different web browsers before showing JavaScript codes to the operator on the site.

The first should be simple, and, following the classic example of many programming textbooks, we will use "Hello world!" in browser:

<html>

<body>

<script type = "text / JavaScript">

<! -

document.write ("Hello world!")

// ->

</script>

</body>

</html>

This example of Java scripts is the most common, given in almost all programming books for different languages.

Using the <script> tag

If everything is done correctly, the phrase “Hello world!” Appears on the display.

The first step is to tell the browser that a script with a <script> tag is being used. Then the script type is set to text / JavaScript and an additional HTML comment is added that surrounds the code. If the browser does not support JS, it does not display the code in plain text for the user. The comment ends with // -> because // means the comment in the statement, and add it so that the browser does not read the end of the HTML comment as a piece of code.

The final step in the script was to use the document.write function, which writes a string to an HTML document. It can be used to write text, HTML, or both. In this case, a line of function text has been transmitted to describe “Hello world!” Which he displayed on the screen.

Note that there is no semicolon at the end of the document.write ("Hello world!") Statement. JavaScript does not require them to be used to mark the end of a statement.

Experienced programmers still prefer to use semicolons and do not hesitate to do this, remembering that JS does not work with a semicolon at the end.

Adding External Code to an HTML Page

The HTML <script> tag is used to declare a script in an HTML document. This allows you to define client code. If you need to add an external script inside HTML, you can easily do this using the src attribute of the <script> tag.

The attributes of the <script> tag are listed below.

To add an external file, use the src attribute. The HTML file is located with src in the myscript.js js file.

JavaScript example and code are given below:

<! DOCTYPE html>

<html>

<body>

<h2> Alert Button </h2>

<p>

<External JavaScript file is myscript.js / p>

<button type = "button" onclick = "sayHello ()"> Click </button>

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

</body>

</html>

To use JS from an external file source, they write all the source code into a simple text file with the extension “.js”, and then include this file as in the above structure, that is, <script src = "myscript.js"> </ script >. Save the following file in myscript.js file:

function sayHello () {

alert ("Hello World")

}

Writing text on a web page

The script in the previous section displayed a dialog box on the monitor screen. If you need to print a message directly on a web page using JavaScript, there are several ways to do this. However, you can achieve this simple goal with the built-in JavaScript command, for example, using the following script:

In a text editor, open the hello2.html file.

Although tags usually appear on a web page, you can place them directly in the body of the page:

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/

html4 / strict.dtd ">

<html>

<head>

<title> My Web Page </title>

<script type = "text / javascript">

</script>

</head>

<! doctype html>

<html>

<head>

<meta charset = "UTF-8">

<title> My Web Page </title>

<script>

alert ('hello world!');

</script>

</head>

This command, which literally records everything that is placed between the opening and closing parentheses. In this case: Hello world!

Further:

1. Add a paragraph tag and two words to the page.
2. Save the page and open it in a web browser.
3. The page will open and the words Hello world! Will appear under the heading.

Attaching an external file

The developer usually puts the code in a separate file if he wants to use the same scripts on several web pages, and instructs the pages to download the file and use JS inside it. External files are needed when using someone else's code. In particular, there are collections called the JavaScript code library. Usually these libraries make it easy to do something complicated.

The procedure for attaching an external file:

1. In a text editor, open the fadeIn.html file. This page contains only some simple HTML - a few tags, a headline and a couple of paragraphs. In this example, a simple visual effect will be added to the page, which will lead to the gradual disappearance of all content.
2. Click a blank line between the closing tags at the top of the page and type: <script src = "../_ js / jquery.min.js"> </script>
3. To simplify reading when programming, it is recommended to backtrack in the code to show which tags are nested inside other tags, and you can also backtrack in lines of code that are inside another block of it.
4. Save the HTML file and open it in a web browser.

<link href = "../_ css / site.css" rel = "stylesheet">

<script src = "../_ js / jquery.min.js"> </script>

<script>

$ (document) .ready (function () {

$ ('header'). hide (). slideDown (3000);

});

</script>

</head>

Chrome browser for web developers

The most unpleasant moment in programming occurs when a user tries to view a created page with JS support in a web browser and nothing happens. This is one of the most common crashes for programmers. Even experienced ones often do not understand how this happens.

Most browsers are configured to ignore JS errors by default, so the error warning dialog usually does not open.

The Chrome browser "loves" developers. Its DevTools function provides many ways to troubleshoot HTML, CSS, and JS issues. Additionally, its JScript console is a great place to start tracking bugs in your code. It not only describes the errors found, but also identifies the line in the code where the error occurred.

To open the console, click the Configure button and select Tools → JavaScript Console, or use the keyboard shortcut Ctrl + Shift + J (Windows) or -Option-J (Mac).

Common developer mistakes

Here are a few common mistakes novice developers may encounter:

1. Missing punctuation. JavaScript programming often involves many pairs of characters, such as opening and closing parentheses. The message “Unexpected token”, meaning that in this case it encountered a semicolon and not a closing bracket.
2. Missing quotes. A string is a sequence of characters enclosed in quotation marks, for example, hello is a string in code. It is easy to forget the sign of opening or closing. It is also easy to mix up these quotes. In any case, the user will see an error message: Uncaught SyntaxError.
3. Teams with errors. If a command is missed, the user will receive an error message - a command with a spelling error is not defined, for example, Uncaught ReferenceError.
4. JavaScript syntax error . Sometimes Chrome does not know what the developer is trying to do, and provides this as a general error message. A syntax error is some error in the code. In this case, you need to carefully look at the line where the error was found, and try to find out what error was made. Unfortunately, these types of errors often require experience and an understanding of the JS language to fix.
5. As you can see, many mistakes that are made due to carelessness. Fortunately, they are easy to fix. As a developer gains more programming experience, he will stop making them almost completely, although not a single programmer is perfect.

Using the scripting language

Nowadays, JavaScript finds many features outside of a web browser. Node.js is a server-side version of JavaScript that can connect to databases, access the web server file system, and perform many other tasks.

In addition, some relatively new databases use JS as a language for creating, retrieving, and updating records. MongoDB and CouchDB are two popular examples. There is the term full-stack JavaScript, which means using JS as the language for the client browser, web server, and database control. JScript is a client-side scripting language. This means the web surfer browser is executing JavaScript code.

Here are a few applications that users have seen in web surfing:

1. Clock.
2. Mouse animation.
3. Drop down menus.
4. Warning messages.
5. Popup windows.
6. Validating HTML form data.

In fact, it is very difficult to prepare a complete list of what can be done with JS if the user can write code like Paul Allen and Bill Gates. But ordinary users are also not offended, given that there are many incredible tools for script lovers on the Internet, for example:

• JavaFile
• Java Scripts.
• JavaScript dropdown menus.

As you can see, web pages don't need a lot of JavaScript to do some awesome things. Thanks to jQuery, they create complex interactive websites, even if their developer is not a programming wizard.