Введение в программирование

Содержание

Слайд 2

Сегодня Введение в введение О программировании в целом и web в

Сегодня

Введение в введение
О программировании в целом и web в частности
Как сделать

сайт? И что для этого надо?
Первая программа
Основные конструкции языка
Слайд 3

О чем этот курс? О Javascript? - нет О программировании? -

О чем этот курс?

О Javascript? - нет
О программировании? - да!
О любви

к тому, что делаешь? - да!
Слайд 4

Слайд 5

Как создается программное обеспечение?

Как создается программное обеспечение?

Слайд 6

Слайд 7

Слайд 8

Программистов в команде много. Что с того? Особые методологии организации рабочего

Программистов в команде много.
Что с того?

Особые методологии организации рабочего процесса
требования постоянно

меняются
куча творческих людей
высокая конкурентность на рынке труда
Соглашения о стиле кодирования
Слайд 9

Пример кода /** @param {number} foo */ method(foo) { if (condition(foo))

Пример кода

/** @param {number} foo */ method(foo) { if (condition(foo)) {

try { // Note: this might fail. something(); } catch (err) { recover(); } } }

Google Style Guide

Слайд 10

Вернемся в программирование

Вернемся в программирование

Слайд 11

Дадим слово Википедии В программирование входят анализ и постановка задачи, проектирование

Дадим слово Википедии

В программирование входят
анализ и постановка задачи,
проектирование программы,
построение

алгоритмов,
разработка структур данных,
написание текстов программ,
отладка и тестирование программы (испытания программы),
документирование,
настройка (конфигурирование),
доработка и сопровождение.
Слайд 12

Слайд 13

Особенности веб-программирования Разделение на frontend и backend Большая нагрузка Много данных Сложная инфраструктура

Особенности веб-программирования

Разделение на frontend и backend
Большая нагрузка
Много данных
Сложная инфраструктура

Слайд 14

Слайд 15

Программист ставит себе на тумбочку перед сном два стакана. Один с

Программист ставит себе на тумбочку перед сном два стакана. Один с

водой - на случай, если захочет ночью пить. А второй пустой - на случай, если не захочет.
Слайд 16

Что нужно чтобы сделать сайт?

Что нужно чтобы сделать сайт?

Слайд 17

Блокнот

Блокнот

Слайд 18

Слайд 19

Мой Первый Сайт




Мой Первый Сайт




Слайд 20

Hello World! alert("Hello, World!");




Hello World!





Слайд 21

Комментарии //Однострочный комментарий /* Многострочный комментарий */

Комментарии


Слайд 22

Переменные var name = "Строка"; //строковая переменная var digit = 42;

Переменные

var name = "Строка"; //строковая переменная
var digit = 42; //числовая переменная
var

isProgrammer = true; //логическая переменная
Слайд 23

Особенности выбора имени переменной Должно соответствовать данным, содержащимися внутри Нельзя начинать

Особенности выбора имени переменной

Должно соответствовать данным, содержащимися внутри
Нельзя начинать с цифры
Соглашение:

именуем в camelCase
Регистр символов имеет значение
В JS типов переменных в разы больше, но пока нам нужны только эти 3.
Слайд 24

Условные операторы var isPasswordCorrect = true; if (isPasswordCorrect) { alert("Hello!") } else { alert("Error!"); }

Условные операторы

var isPasswordCorrect = true;
if (isPasswordCorrect) {
alert("Hello!")
} else {
alert("Error!");
}

Слайд 25

Сравнения var a = 5; var b = 7; alert(a alert(a

Сравнения

var a = 5;
var b = 7;
alert(a < b);
alert(a > b);
alert(a

>= b);
alert(a <= b);
alert(a == b);
alert(a != b);
Слайд 26

Взаимодействуем с пользователем alert("Hello!"); //Выводим сообщение prompt("Enter your name: ", "");

Взаимодействуем с пользователем

alert("Hello!"); //Выводим сообщение
prompt("Enter your name: ", ""); //Получаем данные

пользователя
confirm("Вам больше 18?"); //Получаем данные пользователя (y/n)
var food = prompt("Введите название еды", "");
if (food == "Конфета") {
alert("Я не ем сладкое");
} else {
alert("Ом-ном-ном!");
}
Слайд 27

Консоль console.log("Hello, world!");

Консоль

console.log("Hello, world!");

Слайд 28

Цикл While while (true) { confirm("Уже приехали?"); }

Цикл While

while (true) { confirm("Уже приехали?"); }

Слайд 29

Перебираем символы в строке

Перебираем символы в строке

Слайд 30

Версия 1. Создадим счетчик var templateString = "HelloWorld#"; var counter =

Версия 1. Создадим счетчик

var templateString = "HelloWorld#"; var counter = 0; while (templateString[counter]

!= "#") { console.log(templateString[counter]); counter = counter + 1; }
Слайд 31

Вариант 2. Длина строки var templateString = "HelloWorld"; var counter = 0; while (counter

Вариант 2. Длина строки

var templateString = "HelloWorld"; var counter = 0; while (counter

< templateString.length - 1) { console.log(templateString[counter]); counter = counter + 1; }
Слайд 32

Вариант 3. Цикл for var str = "HelloWorld"; for (var i = 0; i

Вариант 3. Цикл for

var str = "HelloWorld"; for (var i = 0;

i < str.length; i++) { console.log(str[i]); }
Слайд 33

Функции function showMessage() { alert("Привет, Мир!"); } showMessage();

Функции

function showMessage() { alert("Привет, Мир!"); }
showMessage();

Слайд 34

Параметры функции function printHello(userName, greetingText){ var message = greetingText + userName; console.log(message); } printHello("Alex", "Hello ");

Параметры функции

function printHello(userName, greetingText){ var message = greetingText + userName; console.log(message); }
printHello("Alex",

"Hello ");
Слайд 35

Возвращаемые значения function getAlexNameByAge(age){ var name = ""; if (age >

Возвращаемые значения

function getAlexNameByAge(age){ var name = ""; if (age > 18)

{ name = "Алексей"; } else { name = "Алёша"; } return name; }
var alexName = getAlexNameByAge(18); printHello(alexName, "Hello, ");