Учимся программировать с нуля, ракетный старт с javascript, часть II

О, подождите, вы действительно хотите прочитать часть II? (часть I)

Ну, я изначально не планировал оставаться так долго, но вот поехали.

Файлы Javascript

Итак, javascript очень хорошо сочетается с другим языком, называемым HTML. HTML — это язык разметки, который фактически составляет веб-сайт, говоря, какие элементы будут присутствовать на веб-странице. Мы не будем углубляться в HTML, потому что это не совсем то, что нас сейчас интересует. Но если мы хотим пойти дальше, нам понадобится базовый файл HTML.

Создайте новую папку для вашего проекта.

И создайте файл, который мы назовем index.html (убедитесь, что вы видите расширение файлов в проводнике вашей файловой системы)

Откройте этот файл с помощью блокнота или любого другого простого текстового редактора, который вы установили (лично я использую код Visual Studio, не стесняйтесь устанавливать его). Мы будем стремиться к действительно минимальному файлу, даже не соблюдая никаких соглашений браузера.

<script src=”mycode.js”></script>
<input id=”myinput”/>
<button onclick=”myaction()”>Click</button>

Этот html-файл определяет элементы на нашей веб-странице и загружает наш код javascript, содержащийся в mycode.js.

Он отобразит нажимаемую кнопку, которую мы сможем использовать позже.

После копирования и вставки сохраните файл.

Теперь вы можете открыть этот html-файл не в текстовом редакторе, а в браузере, чтобы увидеть результат. Тада, вы создали веб-страницу. Но пока нет программы на javascript.

Создайте новый файл рядом с index.html с именем mycode.js.

Теперь программа, содержащаяся в mycode.js, будет выполняться один раз при каждой перезагрузке страницы index.html.

Здесь все будет серьезно.

Основы программирования часть II

Встроенные функции

Встроенные функции — это функции, встроенные в javascript. Они понимаются в контексте веб-браузера. С функцией вы можете делать широкий спектр вещей.

Простейшим для начала является функция под названием alert.

Чтобы выполнить функцию, просто напишите ее имя в новой строке и добавьте круглые скобки после.

тревога()

Сохраните файл mycode.js с функцией оповещения и перезагрузите страницу. Теперь вы должны увидеть всплывающее окно, которое вы можете закрыть

Функция может принимать параметры, эти параметры обычно влияют на то, что делает функция.

Для оповещения первый параметр — это то, что будет отображаться во всплывающем окне оповещения.

alert( 12 )
alert( stock )
alert( ‘hello world’ )

Условия

Условие является основным строительным блоком в программировании. Это позволяет вам тестировать вещи и делать другие вещи, если достигается определенное условие.

Сначала давайте напишем, что мы видели в Часть I

var stock
stock = 15

Теперь, чтобы написать условие, мы используем ключевое слово if, за которым следует скобка () внутри скобки — это наш тест.

Мы можем использовать превосходный оператор ›, чтобы проверить, больше ли наша переменная запаса 15

if (stock > 15){
  alert(‘we have enough stock’)
}

Фигурные скобки, следующие за условием, служат для разделения блока кода, который будет выполняться только в том случае, если условие истинно.

Попробуйте изменить переменную запаса перед условием и посмотрите, появится ли всплывающее окно или нет.

Функции

Функции похожи на переменные, за исключением того, что они содержат код, который может быть выполнен при их вызове.

Предупреждение — это встроенная функция, которую понимает браузер, но вы также можете создавать свои собственные функции.

Нам понадобится:

• Ключевое слово функция
• Название вашей функции
• Скобка, содержащая полученные параметры (может быть пустой, если вы не планируете иметь параметры)
• Код, который фактически составляет функцию. Этот код не будет выполнен, пока не будет вызвана функция

function myaction(){
  alert(‘hello’)
}

Теперь, поскольку наша функция называется myaction и это именно то имя, которое мы использовали в HTML, вы увидите, что при нажатии кнопки на веб-странице будет отображаться предупреждение. Щелчок по кнопке выполнит код, составляющий функцию.

Мы также можем создать функцию, которая принимает параметры и выводит результат. Для вывода результата мы используем ключевое слово return. Это ключевое слово завершает блок функционального кода и заменяет функцию, в которой она вызывается, значением, следующим за этим оператором возврата.

Параметры подобны блокам переменных, ожидающим ввода значения при вызове функции. Затем параметр можно использовать в коде, содержащемся в функции. Это позволило нам манипулировать значениями, которые мы имели при вызове функции, фактически не зная этих значений при написании кода функции.

Здесь параметр baz заполняется значением foo, когда мы вызываем mycalc(foo), мы также можем вызвать mycalc(5) для получения того же результата.

function mycalc( number ) {
  number = number + 1
  return number
}
stock = mycalc(10)

После выполнения функция заменяется возвращаемым значением.

Вышеупомянутое утверждение можно было бы увидеть так, как только компьютер выполнит функцию:

запас = 11

Поток выполнения

Чтобы понять, как выполняется ваш код, важно знать, как его читает компьютер.

Компьютер будет читать вашу программу строка за строкой, как человек, оператор за оператором. Но также блок за блоком, сначала внутренний блок. Вот пример порядка чтения блока:

Компьютер начнет с самого внутреннего блока, выполнит расчет и использует результат для расчета следующего блока, точно так же, как мы, как люди:

Эпилог

Хорошо, вторая часть была довольно насыщенной, увиденные концепции могут быть не такими простыми для понимания.

Со всеми этими основами мы уже можем создавать очень сложные программы.

Наша окончательная программа здесь может выглядеть примерно так:

var myaction
var stock = 0
function myaction(){
  stock = stock + 7
  var is_stock_engouh = ‘stock is NOT enough to feed all bears’           
  if(stock > 15) {
    is_stock_engouh = ‘we have enough stock’
  }
  alert(is_stock_engouh)
}

Довольно просто, хех. Однако программа никогда не бывает полностью завершена,

Шаги эволюции могут быть:

1. Читать из поля ввода на веб-странице, когда мы нажимаем и выполняем myaction
2. Добавьте визуальное представление для отображения текущего запаса на веб-странице каждый раз, когда мы нажимаем

После ряда эволюций мы можем получить чрезвычайно полезного управляющего запасами меда.

Оповещение — это хорошо, но есть много других полезных функций, которые мы можем использовать.

Чтобы увидеть список встроенных функций, найденных в javascript:

И за очень подробное введение в каждую концепцию javascript и программирования

Теперь, если вы извините меня