Lesson 1-JavaScript Ներածություն

Հեղինակ՝
G-Starting
-
0
192
Courses - Development - Front-End - JavaScript - JavaScript Basics - Lesson-1

Ի՞նչ է JavaScript-ը

  • JavaScript-ը աշխարհի ամենատարածված ծրագրավորման լեզուն է:
  • JavaScript-ը ծրագրավորման լեզուն է՝ նախատեսված web-ի համար:
  • JavaScript-ը հեշտ է սովորել:

Ինչու՞ սովորել JavaScript

JavaScript– ը այն 3 լեզուներից մեկն է, որը պետք է բոլոր վեբ ծրագրավորողներին.

  1. HTML՝ վեբ էջերի կառուցվածքը սահմանելու համար
  2. CSS՝ վեբ էջերի style-ը նկարագրելու համար
  3. JavaScript՝ վեբ էջերի դինամիկան ապահովելու համար

JavaScript-ը աշխատում է browser-ում, համակարգչում, պլանշետում և հեռախոսում:
JavaScript-ը անվճար է օգտագործման համար:
Լավ ծրագրավորող դառնալու միակ ձևը հետևյալն է. Պրակտիկա: Պրակտիկա: Պրակտիկա:

JavaScript-ը կարող է փոխել HTML էջի բովանդակությունը

JavaScript-ի HTML-ի հետ աշխատելու բազմաթիվ մեթոդներից մեկն է getElementById():
Գտնենք HTML id=”demo”-ով էլեմենտը և փոխենք էլեմենտի content-ը (innerHTML), դարձնելով այն “Hello JavaScript”

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Էջի վերնագիր</title>
    </head>
    <body>
        <h2>Ի՞նչ է կարողանում անել JavaScript-ը</h2>
        <p id="demo">JavaScript-ը կարող է փոխել HTML էջի բովանդակությունը</p>
        <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me</button>
    </body>
</html>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Էջի վերնագիր&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h2&gt;Ի՞նչ է կարողանում անել JavaScript-ը&lt;/h2&gt;
        &lt;p id="demo"&gt;JavaScript-ը կարող է փոխել HTML էջի բովանդակությունը&lt;/p&gt;
        &lt;button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'&gt;Click Me&lt;/button&gt;
    &lt;/body&gt;
&lt;/html&gt;

JavaScript-ը կարող է փոխել HTML էլէմենտի attribute-ի value-ն

Փոխենք img էլէեմէնտի src attribute-ի value-ն

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Էջի վերնագիր</title>
    </head>
<body>
    <h2>Ի՞նչ է կարողանում անել JavaScript-ը</h2>
    <p>JavaScript-ը կարող է փոխել HTML էլէմենտի attribute-ի value-ն</p>
    <button onclick="document.getElementById('myImage').src='img/pic_bulbon.gif'">Միացնել լույսը</button>
    <img alt="My Image" id="myImage" src="img/pic_bulboff.gif" style="width:100px">
    <button onclick="document.getElementById('myImage').src='img/pic_bulboff.gif'">Անջատել լույսը</button>
</body>
</html>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Էջի վերնագիր&lt;/title&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Ի՞նչ է կարողանում անել JavaScript-ը&lt;/h2&gt;
    &lt;p&gt;JavaScript-ը կարող է փոխել HTML էլէմենտի attribute-ի value-ն&lt;/p&gt;
    &lt;button onclick="document.getElementById('myImage').src='img/pic_bulbon.gif'"&gt;Միացնել լույսը&lt;/button&gt;
    &lt;img alt="My Image" id="myImage" src="img/pic_bulboff.gif" style="width:100px"&gt;
    &lt;button onclick="document.getElementById('myImage').src='img/pic_bulboff.gif'"&gt;Անջատել լույսը&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

JavaScript-ը կարող է փոխել HTML էլէեմէնտի style-ը

Գտնենք HTML id=”demo”-ով էլեմենտը և փոխենք տեքստի տառաչափը

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Էջի վերնագիր</title>
</head>
<body>
    <h2>Ի՞նչ է կարողանում անել JavaScript-ը</h2>
    <p id="demo">JavaScript-ը կարող է փոխել HTML էլէեմէնտի style-ը</p>
    <button type="button" onclick="document.getElementById('demo').style.fontSize='40px'">Click Me</button>
</body>
</html>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Էջի վերնագիր&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Ի՞նչ է կարողանում անել JavaScript-ը&lt;/h2&gt;
    &lt;p id="demo"&gt;JavaScript-ը կարող է փոխել HTML էլէեմէնտի style-ը&lt;/p&gt;
    &lt;button type="button" onclick="document.getElementById('demo').style.fontSize='40px'"&gt;Click Me&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

JavaScript-ը կարող է թաքցնել HTML էլէմէենտները 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Էջի վերնագիր</title>
    </head>
<body>
    <h2>Ի՞նչ է կարողանում անել JavaScript-ը</h2>
    <p id="demo">JavaScript-ը կարող է թաքցնել HTML էլէմէենտները</p>
    <button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me</button>
</body>
</html>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Էջի վերնագիր&lt;/title&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Ի՞նչ է կարողանում անել JavaScript-ը&lt;/h2&gt;
    &lt;p id="demo"&gt;JavaScript-ը կարող է թաքցնել HTML էլէմէենտները&lt;/p&gt;
    &lt;button type="button" onclick="document.getElementById('demo').style.display='none'"&gt;Click Me&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

HTML էլէմէենտները թաքցնելը կարող է կատարվել`փոխելով display style-ը

JavaScript-ը կարող է ցուցադրել HTML էլէմէենտները

HTML էլէմէենտները ցուցադրելը կարող է կատարվել`փոխելով display style-ը

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Էջի վերնագիր</title>
</head>
<body>
    <h2>Ի՞նչ է կարողանում անել JavaScript-ը</h2>
    <p>JavaScript-ը կարող է ցուցադրել HTML էլէմէենտները</p>
    <p id="demo" style="display:none">Hello JavaScript</p>
    <button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me</button>
</body>
</html>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Էջի վերնագիր&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Ի՞նչ է կարողանում անել JavaScript-ը&lt;/h2&gt;
    &lt;p&gt;JavaScript-ը կարող է ցուցադրել HTML էլէմէենտները&lt;/p&gt;
    &lt;p id="demo" style="display:none"&gt;Hello JavaScript&lt;/p&gt;
    &lt;button type="button" onclick="document.getElementById('demo').style.display='block'"&gt;Click Me&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

JavaScript-ը հորինել է Բրենդան Այխը 1995թ, Իսկ ECMA ստանդարտը դարձել է 1997թ-ին:
ECMA-262-ը ստանդարտի պաշտոնական անվանումն է: ECMAScript-ը լեզվի պաշտոնական անունն է: