Быстрый старт с Javascript
1. Цель статьи
Javascript vs ECMAScriptJavascript и ECMAScript это 2 разных названия, но они имеют тесное отношение между собой. На самом деле Javascript является языком разработанным по стандартам определенные с помощью ECMAScript. Именно поэтому темы Javascript и ECMAScript сопоставленны нами в поочередном порядке.-Если вы начинающий с Javascript я советую вам прочитать данную статью, чтобы больше понять про дранное отношение:
Javascript это язык программирования, сниппеты кода Javascript встроены в HTML помогают веб странице взаимодействовать с пользователем.
Следующий пример это страница HTML с тегом <img src="light-off.gif">, которая отображает лампочку в отключенном состоянии (off), Javascript может поменять значение атрибута src (<img src="light-on.gif">) для замены старого изображения, изображение лампочки в включенном состоянии (on).
Цель данной статьи помочь вам понять как встроить Javascript в HTML и выполнить практику с некоторыми простыми примерами, все эти примеры только для того, чтобы помочь вам ознакомиться с Javascript перед тем как перейти к более подробным темам.
2. Написать Javascript в HTML
Код Javascript может быть написать внутри HTML, точнее он может быть написан в теге <script></script>:
Теги <script> могут быть расположены в теге <head> или в теге <body>, для начала рассмотрим простой пример ниже:
Создайте файл helloworld.html с содержанием:
helloworld.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Javascript</title>
<script type = "text/javascript">
function sayHello() {
alert("Hello Everyone!");
}
</script>
</head>
<body>
<button onclick="sayHello()">Click me!</button>
</body>
</html>
Запустите файл helloworld.html на браузере и посмотрите результат:
В примере выше, в теге <script></script> я создал функцию sayHello(). Когда пользователь нажимает на Button, вызывается функция sayHello() и она отображает dialog (диалог) с содержанием "Hello Everyone!". Не волнуйтесь, если вы еще не знаете что делать, пока пропустите это.
3. Написать Javascript в отдельном файле
Напишите код Javascript в отдельном файле, потом HTML импортирует данный файл для использования. Это способ, помогающий вам лучше управлять вашим кодом Javascript, и файл Javascript может быть использовано совместно многими файлами HTML.
Код Javascript написан в файле с расширением (extension) как js, Файлы HTML будут импортировать файл Javascript выше для использования.
Далее это пример с лампочкой (Light), в данном примере нам понадобятся 4 файла:
- light.js
- light.html
light.js
function turnLightOn() {
var img = document.getElementById("myImage");
img.src = "light-on.gif";
}
function turnLightOff() {
var img = document.getElementById("myImage");
img.src = "light-off.gif";
}
light.html
<!DOCTYPE html>
<html>
<head>
<title>Light</title>
<script type="text/javascript" src="light.js"></script>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="turnLightOn()">Turn on the light</button>
<img id="myImage" src="light-off.gif" style="width:100px">
<button onclick="turnLightOff()">Turn off the light</button>
</body>
</html>
Pуководства ECMAScript, Javascript
- Введение в Javascript и ECMAScript
- Быстрый старт с Javascript
- Диалоговое окно Alert, Confirm, Prompt в Javascript
- Быстрый запуск с JavaScript
- Переменные (Variable) в JavaScript
- Битовые операции
- Массивы (Array) в JavaScript
- Циклы в JavaScript
- Руководство JavaScript Function
- Руководство JavaScript Number
- Руководство JavaScript Boolean
- Руководство JavaScript String
- Заявление if/else в JavaScript
- Заявление Switch в JavaScript
- Обработка ошибок в JavaScript
- Руководство JavaScript Date
- Руководство JavaScript Module
- Функция setTimeout и setInterval в JavaScript
- Руководство Javascript Form Validation
- Руководство JavaScript Web Cookie
- Ключевое слово void в JavaScript
- Классы и объекты в JavaScript
- Техника симулирования класса и наследственности в JavaScript
- Наследование и полиморфизм в JavaScript
- Понимание Duck Typing в JavaScript
- Руководство JavaScript Symbol
- Руководство JavaScript Set Collection
- Руководство JavaScript Map Collection
- Понимание JavaScript Iterable и Iterator
- Руководство Регулярное выражение JavaScript
- Руководство JavaScript Promise, Async Await
- Руководство Javascript Window
- Руководство Javascript Console
- Руководство Javascript Screen
- Руководство Javascript Navigator
- Руководство Javascript Geolocation API
- Руководство Javascript Location
- Руководство Javascript History API
- Руководство Javascript Statusbar
- Руководство Javascript Locationbar
- Руководство Javascript Scrollbars
- Руководство Javascript Menubar
- Руководство JavaScript JSON
- Обработка событий в Javascript
- Руководство Javascript MouseEvent
- Руководство Javascript WheelEvent
- Руководство Javascript KeyboardEvent
- Руководство Javascript FocusEvent
- Руководство Javascript InputEvent
- Руководство Javascript ChangeEvent
- Руководство Javascript DragEvent
- Руководство Javascript HashChangeEvent
- Руководство Javascript URL Encoding
- Руководство Javascript FileReader
- Руководство Javascript XMLHttpRequest
- Руководство Javascript Fetch API
- Разбор XML в Javascript с помощью DOMParser
- Введение в Javascript HTML5 Canvas API
- Выделение кода с помощью библиотеки Javascript SyntaxHighlighter
Show More