Перейти к содержанию

Программирование. JavaScript.


Рекомендуемые сообщения

 

JavaScript - Язык программирования.

Несомненно, Программирование - творчество, поэтому я выбрал эту тему.

Зачем я делаю этот урок? Да потому что хочу помочь (как бы странно и смешно это не звучало) и развить в себе способность делится своими знаниями.

Так вот, помощь эта заключается в том, чтоб убедится, может ли профессия программиста понравится вам, если нет, то хоть узнаете по-больше.

*Этот урок будет изменятся со временем, так что заходите по-чаще*.

 

Зачем? №0 Зачем нам нужно программирование и почему мы учим JavaScript если есть много языков программирования?

 

Несомненно, ЯП'ов (Языков Программирования) крайне много, и все нужны для чего-то определенного, поэтому сейчас я поясню все подробно.

 

Программист - востребованная и актуальная еще на десятилетия профессия, существует множество областей, групп и видов программистов.

Области:

1)Геймдев (создание игр).

2)Веб-программист (создание сайтов).

3)ПО (программное обеспечение).

И еще о-очень много. Почему я назвал эти? Потому-что они есть везде у нас в компьютере.

 

JavaScript - Очень популярный язык в 2019-2020г. Он находится в топ-3 языках по популярности. Создан этот язык на другом языке - Java. ()_()

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

Я выбрал этот язык потому-что он легкий, даже для новичков.

 

Начало #1. Определится со средой разработки.

 

Среда разработки - программа, в которой вы будете писать свой код, эта программа должна быть удобной, красивой и функциональной, поэтому, выбор среды разработки - серьезное дело. (Лично я искал программу довольно долго).

 

Идет на все операционные системы и компьютеры:

Visual Studio Code.

https://code.visualstudio.com - Официальный сайт (скачать можно там).

При открытии нажимаем на NEW FILE:

 

1945038156_2020-01-3020_02_36.png.ff1c1d3ed272ec98f325cdc45705c518.png

 

Код #2. Начнем писать свой первый код.

Конечно, придется поработать и с HTML (Язык гипер-текстовой разметки)

С помощью него мы можем добавить на сайт язык программирования JS (JavaScript).

 

Итак, в HTML все что находится в <> стрелках - называется ТЕГОМ.

Чтоб создать абсолютно пустой и белый сайт - нужно ввести все теги:

 

<html> - главный Тег, с него все начинается.

<head> - голова, в нем все что находится не на сайте, а внутри. То есть не в поле зрения.

<title>Название сайта</title> - пишем название сайта.

<meta charset="utf-8"> - кодировка (много об этом не думайте, просто пишите всегда, а то русский язык не будет поддерживаться).

<script> - Тут и начнется наш код JavaScript.

 

</script> - все теги необходимо закрывать с помощью знака дроби </тег>, а начинаем с <тег>.

</head> - закрываем тег.

<body> - тело, это то, что видит пользователь на сайте.

</body> - закрываем тег.

</html> - закрываем тег.

 

Все, мы создали чистый HTML код.

Теперь надо сделать следующее:

 

1438137300_2020-01-3020_43_40.png.337c9c4a7bc784f98eec0d9a8e888de2.png

 

Снизу:

 

1851461896_2020-01-3020_43_59.png.afba48e07f1f4864bf1fd7f9721b582f.png

 

Нажимаем на Plain Text.

И пишем в поисковик: HTML.

Текст начинает красится.

Итак, все. По идеи мы его создали, теперь попробуем что то сделать.

Выведем текст...

В теге:

<script>

 

</script>

(внутри), пишем операцию alert:

 

<script>

alert("Привет, я программист")

</script>

 

Теперь одновременно нажимаем на кнопки: command + s.

В месте "ГДЕ" выбираем Dekstop (на английском) или Рабочий стол (на русском).

И кнопку сохранить.

 

Этот сайт появится на рабочем столе, открываем его...

Вам должно вывести:

 

1900267390_2020-01-3020_51_51.png.417ac0df8c277c027abdea198103cb12.png

 

 

 

НЕ ЗАБЫВАЙТЕ ПРИ НАПИСАНИИ КОДА СОХРАНЯТЬ ЕГО С ПОМОЩЬЮ: Command + s. ПРИ НАЖАТИИ У ВАС ВСЕ СОХРАНИТСЯ, ПОТОМ ОТКРОЙТЕ ВАШ САЙТ НА РАБОЧЕМ СТОЛЕ, У ВАС ОН ОКАЖЕТСЯ ИЗМЕННЫМ, УДАЛЯТЬ ИЛИ ПЕРЕСОЗДАВАТЬ ФАЙЛ НЕ СТОИТ!!! ЗАПОМИНИТЕ!

 

Если вам вылезло такое окно, то все правильно!

Чтож, давайте научимся создавать ПЕРЕМЕННЫЕ.

 

Переменная - ячейка памяти, в которой хранится какая либо информация.

На JS (JavaScript) есть 3 способа объявлении переменной:

1) var

2) const

3) let

Принципе я не вижу особой необходимости в использовании let для вас, но знайте, она существует)

Создавая переменную необходимо дать ей имя, например:

var x.

var privet.

var hi.

Это может быть какое угодно имя, но! Не начиная с цифры и с нижнего подчеркивания, так же JS чувствителен к регистру, то есть он отличает PRIVET от privet, или PRiveT от PRivet.

Так что соблюдайте все правила.

Создавая переменную вы можете дать ей какое-то значение, допустим, присвоим переменной (var x), значение 10, получится:

var x = 10

Попробуем вывести значение этой переменной в всплывающее окно как мы делали раннее:

 

<script>

var x = 10

alert(x)

</script>

Итак, в скобки alert мы поместили имя переменной, нам должно вывести такое окошко:

 

1006004408_2020-01-3021_02_41.png.2a4dd9ddbb284d7eb5953e0dc509db51.png

 

 

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

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

вам что то интересно - пишите в личку на форуме мне, я постараюсь ответить, даже если хотите покажу свои проекты :)!

 

Так, мы научились выводить текст и выводить значение переменной. Это мало, мы потратили многовато времени для этого, поэтому думаю стоит ускорится...

 

Итак, что такое var?

var - обычное объявление переменной, ее используют всегда.

Но что же такое const?

const - неизменяемая переменная, ее значение невозможно изменить, например:

 

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

Нашему prompt'y нужна переменная, так как введенную информацию нужно где-то хранить, допустим, сделаем так:

 

var y = prompt("Сколько тебе лет?")

 

2109373971_2020-01-3021_12_14.png.b40171b58453bf69d67eb0adfe5484d1.png

 

 

Теперь в наш код введем еще операцию alert:

 

alert("Вам: " + y + " лет")

 

С помощью кавычек и переменных мы можем выводить какой-то не одинаковый текст.

ТО есть вы можете просто написать:

alert("Вам сколько-то-то лет"). и это будет глупый текст :). бессмысленный.

Но если человек ввел свой возраст, то ему выведет точно тоже самое, что он написал.

Кавычки в alert да и вообще везде " " - означают начало и конец предложения.

Так же можно написать:

alert()

И у нас появится пустое окно...

 

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

Теперь объясню про - const.

Если мы создадим переменную:

 

const hello = 10;

hello = prompt("Введи что то")

alert(hello)

 

По идеи мы создали константу, присвоили ей значение 10 и назвали ее - hello.

Мы делаем пользовательский ввод в переменную - hello, хотя это константа (const), то есть по моим словам, если я создал const, ПОТОМ прошу пользователя ввести в нее НОВОЕ значение, хотя я говорил что это невозможно, нам ДОЛЖНО вывести то значение, которое мы писали когда создавали переменную, то есть 10. И после ввода пользователя, нам должно вывести - 10.

НО, нет. Дело в том, что это ошибка. И по сути нам не будет выводить: 10 (или то что мы написали в пользовательском вводе).

Поэтому, пользовательский ввод выполняется, но по сути alert не может понять, что мы написали, и возникает ошибка, то есть это удобная штука, представьте что вы делаете игру,

вы делаете скорость персонажу (Стиву в майнкрафте), ну, спринта конечно не будет, и вы пишите:

 

const speed = 2;

 

Допустим 2 - 2 блока/сек.

Разве это не сойдет за анти-чит?)

Типо если читер захочет сделать спидхак, то ему придется изменить - speed на допустим 10 блоков/сек.

Но это выведет ошибку и будет невыполнимо, так что у читера не получится свободно изменить скорость персонажу, ведь это const ?!

 

Ну все, платите за урок анти-чита, перечисляйте на карту:

+7**********

Та ладно шучу.

 

Чтож, за 1 вечер это нормально, конечно, я стараюсь убрать всю воду (лишнюю фигню), вроде получается, мы будем учить все больше и больше, думаю за неделю я смогу выложить нормально так, конечно, в этой статье я после JavaScript буду учить вас HTML и CSS3. В этих языках НИЧЕГО сложного, и они тоже нужны для сайта.

Пишите мне в личку, пишите комменты, я тоже трачу время :). Удачи всем, скоро встретимся)

 

Новый день для меня, новые уроки для вас.

 

Условные операторы #3: if, else.

 

Чтож, условные операторы - операции, которые будут выполнятся, пока они не станут верными. Существует их всего несколько, но я подчеркну 2.

 

Итак, что же это за операторы? Давайте рассмотрим - if (с англ. - если)

Сам перевод дает знать все, то есть давайте рассмотрим пример:

 

<script>

var x = 10;

if(x < 20) {

alert("Хай всем!")

}

</script>

 

Наверняка вы не поняли, теперь объясню по русски:

<script>

Создаем переменную X, даем ей значение 10.

если(x меньше 20) то {

Выводим текст("Хай всем!")

}

</script>

 

ТО есть, оператор if проверяет значение переменных, (мы поговорим далее) - массивов и объектов.

то, как мы проверяем значение, называется Операцией, то есть наш знак " < " - Меньше - операция.

Таких операций множество:

< - меньше.

> - больше.

<= - меньше или равно.

>= - больше или равно.

== - равно.

(я могу ошибаться) = - приблизительно равно.

=== - абсолютно равно. (объясню потом).

!= - не равно.

 

Главные я объяснил.

Теперь поговорим шире насчет if.

 

Оператор if может проверять сразу несколько переменных и значений, давайте рассмотрим некоторые случаи:

 

<script>

var x = 15

var y = 7

var z = 9

if(x > y && y < z) {

alert("Привет! Я сумел освоить if!")

 

</script>

 

Ну так вот, первое что вам бросается в глаза это символы "&&", И это не странно, давайте разберем if и затем эти знаки.

Мы создали три разные переменные, и какая то больше а какая то меньше, давайте снова распишу по русски:

 

X у нас 15, Y тут 7, Z у нас 9.

Если(X(15) больше Y(7), И, если Y(7) меньше Z(9)) то {

alert("Привет! Я сумел освоить if")

}

 

Теперь поняли? в If можно проверять переменные между переменными и еще можно делать сразу несколько условий, однако скажу, если эти условия не верны, то все что находится в таких скобках { } - не выполнится, а условия были: если X больше Y, и если Y меньше Z.

Все было правильно, поэтому нам должно вывести текст который мы написали в alert.

 

Я не знаю как называют такие знаки, типо "&&"....

Но знайте, если вы хотите проверить несколько переменных и значений, то надо использовать знаки && - что значит (И), или используйте || - что значит (ИЛИ).

Если хотите проверить, совпадают ли ВСЕ что вы хотите узнать, используйте && (И).

Если хотите проверить, совпадает ли ХОТЬ ОДНО условие, то используйте ||. Например:

 

var x = 10

var y = 12

if(x == 10 || y == 13) {

alert("Хай!")

}

Смотрите, X действительно равен 10, но при этом Y не равен 13, а равен 12, но при этом 1 условие верно, так как мы использовали ||, то тогда то, что мы написали в фигурных скобках

{ } - выполнится, а если мы использовали бы && - у нас бы не сработало, так как все условия должны были быть равны, а Y не попал под условия.

 

Итак, с if разобрались, не забывайте про все скобки, если будут проблемы - мою личку никто не закрывал.

 

Поговорим с else. Это не что то новое, это просто условие, которое выполнится, если условие if - не сработает.

Все... разобрались......

И кстати, операторов if вы можете делать сколько угодно ?

if() {

}

if(){

}

.....

и в конце делаем ( по желанию ) :

else {

}

Так, else не имеет каких то условий, если он стоит - значит он уже имеет условие: ЕСЛИ НЕ СРАБОТАЕТ/ЮТ ОПЕРАТОР(Ы) if, ТО ВЫПОЛНИТСЯ УСЛОВИЕ else.

 

Извиняюсь за всю воду, я просто хотел широко объяснить чтоб ВСЕ поняли...

Давайте объясню про ===, которое упоминал выше:

 

Знаете ли вы, что существует два значения для переменных, которое отличается от цифр и текста:

1)false - ложь.

2)true - истинна.

Даже у этих типов есть значение:

False = 0;

True = 1;

ТО ЕСТЬ, Если мы в if напишем вот так:

 

<script>

var x = true

if(x == 1) {

alert("Истинна")

}

</script>

Как я написал выше, true - равен: 1 (единице), а false - 0 (нулю).

То есть моя операция (которая чуть выше), должна выполниться, и да, это так! Она выполнится, и нам выведет окно с текстом который мы написали в alert.

и если напишем:

 

var x = false

if(x == 0) {

alert("Хай!")

}

 

То все выполнится! Потому что это так!

Однако, существует операция - === - абсолютно равно (равный синтаксис).

Если мы напишем:

var x = true;

if(x === true) {

alert("Нет!")

}

 

Нет, нам не выведет окно с текстом в alert. Потому что операция (===) - проверят СИНТАКСИС. ТО есть она проверяет букву с буквой, цифру с цифрой.

То есть, операция (===) видит наше уловие так:

true и 1.

true не похоже на 1.

true это true, а 1 это 1.

Они не совпадают...

 

ВСЕ, то есть знак === может сказать что:

x === x, привет === привет, но false не === 0 и true не === 1.

(если не ошибаюсь) еще существует операция:

!=== - не абсолютно равно (кстати я эту операцию сам так называю ? ).

Ну все, помоем объяснил дословно, личка открыта...

 

Циклы #4: for, while.

 

Циклов тоже несколько, но я назову лишь 2, по сути главных.

Цикл - это типо условного оператора, который выполняет свои действия, ПОКА УСЛОВИЕ НЕ БУДЕТ ВЕРНО, А ОСТОНОВИТСЯ, КОГДА УСЛОВИЕ БУДЕТ ВЕРНО..

 

Выглядит сложно, но я как всегда начну с примера ? :

 

<script>

for(var x = 0; x <= 10; x++) {

alert("Hello")

}

</script>

Итак, что мы имеем, конечно, for переводится как (для).

Поэтому нам перевод ничего не дает...

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

Затем, в следующем шагу, мы указываем, что X меньше или равно 10, и потом указываем действие. Затем в фигурных скобках указываем что будет выполнятся.

Итак, майнкрафтеры, встаньте и покушайте, отвлекитесь, сделайте разминку ? .

Чтож, если вам это не надо или вы это действительно сделали, то продолжим:

Действие (в нашем случае мы написали "X++") - называют Икрементом, он увеличивает значение X'а на единицу.

ТО есть мы создали переменную X, и дали ей значение 0, потом дали условие, пока X меньше или равно 10, будет выполнятся то, что в скобках { } и Икремент: увеличение значение на 1.

По сути это выглядит так: X + 1... Хотя если так написать - ничего не получится. Но пример я показал.

Существует еще Декремент: уменьшение на 1:

1)x--

 

В чем смысл? Конечно, смысл есть, но он не велик, существует "легенда", что каждый файл имеет какой то вес:

1)Биты.

2)Байты.

3)Килобайты.

4)Мегабайты.

5)Гигабайты.

Ну больше вам не надо, я вас просвету (если вы не знали), то каждый символ в кодировке utf-8, имеет вес равный - 8 битам. Ну а 1 байт - 8 битов.

То есть 1 символ - 1 байт.

Смотрите, так выглядит присваивание какого-то значения к переменной:

x = x + 10;

X равно = X + 10;

Смотрите, в таком случае у нас:

x_=_x_+_10 = 10 символов (_ это пробелы, они тоже считаются), то есть 10 байт.

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

x=x+10 = 6 символов - 6 байт.

а теперь инкремент:

x++ - 3 байта.

10|6 байт - 3 байта.

Байт - это для нашего компьютера - ничего, он не почувствует ничего и просто переделает эти данные, однако представьте, что ваш код имеет более сотни тысяч строк...

Оптимизация - сокращение кода, тем самым, уменьшение его веса.

То есть если вы сделайте тупой и корявый код весом 512 мегабайт, потом, уберете все тупые пробелы и лишние строки, и, конечно, сократив код - вы (отвечаю), вместо 512, увидите около 510 мегабайт...

1 мегабайт - 1.000.000 байт...

то есть миллион символов.

Тем самым, вы уберете около двух миллион символов.

Да, 512 и 510, где разница? Конечно, мой самый большой код - 40 килобайт.... То есть 40.000 байт (40.000. символов) А представьте 512 миллионов символов...

Шок...

 

Im I'll be back.

 

Цикл While:

 

While очень хороший цикл, он зачастую помогает во всяких программах, так что знать его стоит, итак

"While - цикл, который будет выполнять какие-то функции, пока условие не будет ложным."

Прочитали - подумали - запомнили.

Итак, покажу пример:

<script>

var x = 1

while(x < 3) {

alert("Привет всем!")

x++

}

</script>

 

- Этот код выполнится столько раз, пока не станет ложным, что мы имеем, переменную со значением - 1.

While - с англ. - Пока. В смысле не bye, а именно while. ТО есть не прощание (пока), а типо (пока он не станет ложным) - что и имеет введу наш условный оператор while.

Смотрите, мы выводим всегда текст "Привет всем!", потом делаем инкремент нашей переменной, а этот инкремент стоит после вывода текста, значит сначала нам выведет текст, потом снова, То есть X будет сначало x=1;(вывод текста), потом x=2(вывод текста) а потом x=3, но у нас стоит операция < (меньше), то есть пока X меньше 3, будет выполнятся функция какая-то.

А у нас X уже равен 3, РАВЕН а не меньше, получается что все, while заканчивает работу, так как условие уже ложное и X равен 3 а не меньше.

 

О - Объяснил...

 

Тупой-тупой-тупой, должен был в самом начале объяснить, но решил сделать только щас. Переменные текстового вида.

 

До сих пор мы делали переменные с цифровыми значениями, ну еще и буловыми (true, false).

Но существуют и строчные:

<script>

var x = "Привет"

alert(x)

</script>

Выведет "Привет".

Если вы пишете строчный вид значения, то не забывайте кавычки " ", либо же '  ', пока что разницы не вижу никакой.

Ну вроде ничего объяснять не надо, но подчеркну, если вы напишите:

 

var x = "Привет"

var y = "Всем"

alert(x + y)

 

Выведет: Приветвсем.......

Так что не забывайте логичные пробелы:

var x = "Привет "

var y = "Всем"

alert(x + y)

 

Выведет: Привет всем.

 

Если вы хотите написать:

Привет

всем (на другой строке слово):

 - пишите:

var x = "Привет"

var y = "Всем"

alert(x + "\n" + y)

 

Выведет:

Привет

всем.

 

Операция: \n - все следующие строки или слова переносит на 1 строку ниже.

Операция: \n - если она не в кавычках, то не забудьте ее, если вы ее написали уже сразу в строке (типо: var x = "Привет\nВсем") то не надо писать кавычки.

 

Массивы и объекты #5. Array, Object.

 

Массивы и объекты как по мне похожи, но все такие есть между ними разница.

Разберем Массив:

Массив - переменная, которая может хранить в себе множество значений, то есть не как переменная может хранить одно значение, а множество.

Вот пример:

 

<script>

var x = ["Игорь", true, 25]

</script>

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

Как же обращаться к массиву? Легко:

 

alert(x)

 

Прикольно?), да, это неожиданно, но что если вы хотите взять что то одно? Допустим имя "Игорь".

alert(x[0])

 

Итак, по сути мы берем нулевой элемент в нашем массиве.

Элемент - каждое значение в массиве.

Почему нулевой? Потому что отсчет начинается в массиве всегда с 0,1,2...

В нашем случае у нас три элемента, и если отсчет начинается с 0, то у нас x[0] - Игорь, x[1] - true, x[2] - 25.

Не забывайте, что с массивом можно делать точно то же самое что и с переменными, например:

 

alert(x[1] + x[2]), если x[1] - true, а x[2] = 25,

Что выведет? Подумайте ?

Если ничего не пришло в голову, то почитайте снова чуть-выше мою статью об буловых типа (true, false), где true = 1, a false = 0.

Значит у нас пример точно такой же как:

alert(1 + 25)

И в том и в этом примере выведет 26 ? .

 

В массивах мы создаем сколько хотим элементов, и давайте посмотрим на интересный пример:

<script>

var n = 1

var x = ["hi", "world"]

alert(x[n])

</script>

 

- Странно? x[n] Это выглядит странно, но крайне логично. Попробуйте угадать что нам выведет alert?

Ответ я конечно писать не буду, вы можете этот кусок кода скопировать и вставить в свою программу и посмотреть ответ, поэтому, удачи).

 

Объект - Object.

 

Объект - множество переменных в 1 куче.

Объект нужен чтоб было удобнее ориентироваться в большом коде, смотрите пример:

 

var x = {

name: "Игорь",

age: 27

}

Сразу отмечу, здесь ставятся фигурные скобки - { }, а так же не забывайте о запятых!

Запятые ставятся после каждой переменной!

Если у нас 1 переменная - то не надо ставить запятую!

Как же нам обратится к этому объекту? Ну-у, если вы напишите:

 

alert(x)

 

- Вас возможно пошлют и выведут текст [Object object], а может ничего.

Но если мы напишем так:

 

alert(x.name)

- Нам выведет имя "Игорь".

Почему? Потому что сначала мы обращаемся к объекту (X), потом к его свойству (переменной внутри объекта) - (name), а значение переменной (name) - является слово "Игорь".

Если напишем:

alert(x[1])

- Нам напишет: undefined (не найдено).

Так что это не массив!

Короче, вроде разобрались, без воды и т.д.

 

Не забываем что вопросы если есть, то лучше все разъяснить, пишите в лс.

 

Document, console. #6 - document.write , console.log.

 

Мы до сих пор писали только alert чтоб выводить текст, но этот текст правильно назвать Всплывающее окно.

Но как же сделать так, чтоб мы могли написать текст прямо на странице? И чтоб он не выскакивал и чтоб его нельзя было закрыть.

- Для этого существует Объект document.

Не тот объект что мы проходили недавно, а другого вида)

document - объект.

write - вид.

Итак, попробуем написать какой то текст:

 

<script>

document.write("hello world")

</script>

 

- Легко :), мы написали текст...

МЫ так же можем написать какое то значение переменной, массива и вообще все остальное.

Пишем что хотим!

 

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

 

- Теперь про console.log, Смотрите, прямо щас находясь на этом сайте вы можете открыть консоль... (не как в майнкрафте сразу говорю), а чисто консоль для проверки чего либо.

Нажмите:

 Ctrl+Shift+K (для Windows / Linux)

Cmd+Opt+K (для Mac)

 

- Немного подождав у вас откроется консоль или Ресурсы сайта. Нажмите на вкладку "Консоль".954258114_2020-02-0315_35_49.png.bcff16528a5281d1206170b02a1ecf41.png

- выбрав вкладку консоль, убедитесь, что у вас открыта под-вкладка "Все". 

 

2145135805_2020-02-0315_36_14.png.b3b2911c4806032000d9629909454fa5.png

 

*Это консоль: *

 

665749758_2020-02-0315_37_46.png.da711dce3c2c068a73d74a51c0f9a88a.png

 

-  Вот так вот, мы открыли консоль, и можем написать ЧТО УГОДНО, это будет тот же JavaScript код.

Попробуйте написать:

 

alert("Приветики")

 

Вам все выведет, можете использовать пока чисто для дальнейшего кода... Глупо, но затея интересная...

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

Конечно, все равно можно попробовать перехватить данные с помощью вспомогательных программ или ошибок сервера, даже так если мы зайдем во вкладку "Ресурсы" вместо "Консоль", то нас перекинет в код который присутствует на этом сайте, однако, скажу так, ЭТО ВСЕ - HTML... Хотя и есть JavaScript, просто JS скрыт в Php файле (другой язык программирования который не видно на сайте), здесь только присутствуют html-разметки И ТАК ЖЕ ССЫЛКИ НА JS файлы, хотя, ссылки эти есть, мы их если откроем - нас скорее всего просто перекинет СЮДА ЖЕ. Короче, задумка не знаю хорошая или нет, но сайты еще взламывают...

Кстати насчет того что JS код скрыт в php файле, хотелось еще подметить, то что в Php файле могут хранится HTML-разметки, то есть код HTML. Подтверждение тому:

 

1193804648_2020-02-0315_45_58.png.1dc50e382afee6d390540d2d678c6748.png

 

index.php - файл, в котором хранится все. Так как php не является кодом который понимает браузер, его код не видно, но HTML разметку видно.

 

- У-уу, отошли от темы...

- Да, пора вернутся...

 

Короче, если мы напишем в нашем коде:

 

<script>

console.log("Всем привiт : ) ")

</script>

 

Нам не выведет этот текст в окне браузера, но выведет в консоли, в которой мы щас сидим...

*Кстати, через консоль можно управлять значениями разных переменных, если бы мы знали название переменной, которая отвечает за количество допустим лайков на нашем профиле (Допустим эта переменная называется likes), на этом посте щас 4 лайка, если я написал бы в консоли:

 

likes+=100000000000

- То этот пост имел бы такое количество лайков........ Сразу скажу, не пытайтесь отгадать название переменной, так как это было бы возможно на тупейших сайтах, тут все шифруется, скорее всего, логически подмечено, типа (если у вас 3 лайка, то 5 или больше резко стать не может, должно быть 4 чтоб потом стало 5), этот код вполне логичен и стандартен, как по мне, его можно использовать, так что, время не тратьте ? *

 

Так вот, можно выводить текст в консоли с помощью операции:

Console.log()

 

Можно выводить все точно то же самое что и в document.write и alert.

Если у вас в коде что то не сработало, открывайте консоль! Там видно все ошибки!

 

Confirm, комментарии #7. confirm() , //Комментарии.

 

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

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

 

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

//

Дальше пишите сам комментарий:

//Коммент.

Закрывать как то комментарий как теги в html не надо, только если вы пишите такой: //

// - используется для комментирования лишь 1 СТРОКИ. Если же у вас есть текст ОГРОМНЫЙ который надо поместить в комментарии, вы же не будете писать и тратить много времени везде вписав знаки //. Ну типа так:

//Тут alert.

//Тут prompt.

//тут console.log.

//тут for.

//Тут шо та еще......

 

- И так до бесконечности.

Для этого создан еще тип комментариев:

/*Комментарий*/

Это для большого текста, его просто легче писать, и не надо в начале каждой строки писать //.

Вы можете написать:

 

</script>

/*

Тут alert.

Тут prompt.

Тут console.log.

Тут for.

Тут шо та еще.....*/

В отличии от таких: // комментариев, тут уже надо закрывать.

 

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

 

confirm - настало время.

Познакомившись с prompt и alert мы впринципе смогли овладеть духовной силой операциями в js.

Но их 3, prompt, alert и confirm.

 

Confirm ( - с англ. - подтверждение, а это уже пол дела), то есть вы уже поняли, что нам придется что то подтверждать.

 

если короче, то вот код:

<script>

var x = confirm("Вам есть 18 лет?")

</script>

Да, мы снова делаем переменную и короче делаем такую ересь, у пользователя при входе на сайт откроется окошко как alert, но уже с 2 кнопками: "Отмена(нет)", "Ок(да)".

А если по программистски нормально, то вот:

Отмена = false, Ок = true.

Ну вот и все... Вы поняли?)

Давайте попробуем сделать так:

 

<script>

var y = confirm("Вам есть 18?")//Комментарий тута
if(y == true) {
alert("Тогда привет!")//и тута
}
if(y == false) {
alert("ТОгда пока!") //и даже тута
}

</script>

 

Итак, вот, уже код стал массивнее ? , давайте разбираться, нам при входе на сайт вылазит окно, в котором написано: Вам есть 18 лет?, и сразу идут условные операторы, которые проверяют, если мы нажмем Нет или Ок, то нам выведет то или сё.

А знаете что? Зайди в консоль и напишите все это, скопируйте этот код:

 

var y = confirm("Вам есть 18?")
if(y == true) {
alert("Тогда привет!")
}
if(y == false) {
alert("ТОгда пока!")
}

 

Вам выведет все тоже самое.

 

 

Function #8. Функции и как их вызывать.

 

Функция - блок кода, который выполняется при вызове. Этот блок кода не выполняется кучей как весь наш код в <script></script>

- Он выполняется когда мы его вызываем.

 

Покажу пример функции, конечно, этот пример мы разберем чуть дольше:

 

<script>

var x = 10

if(x == 10) {

function hello() {

alert("Привет")

}

}

</script>

 

- Как то так, разбираем:

Мы создаем переменную Х.

Потом условный оператор: если X равен 10, то...

Создаем функцию, называем как хотим, делаем скобки "()" (аргументы), потом в фигурных скобках " { } " - пишем наш блок кода.

И писать можем что угодно.

Давайте напишем:

 

function world() {

alert("Hello!")

}

 

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

Как же ее вызвать? Легко:

 

function world() {

alert("Привет всем!")

}

world() //мы вызвали функцию.

 

Ничего такого, мы просто пишем название функции, в нашем случае "world", и скобки круглые ().

 

Об аргументах говорить пока нечего, оно вам не надо, но если интересно, все таки, вот ссылка где об этом все говорится:

https://learn.javascript.ru/function-basics

- Если вам там объяснили лучше, то пожалуйста, продолжайте там)

 

Ну вот время переменной - let. Я врал когда говорил что я не вижу в ней разницы, она есть, и она весомая.

 

let - локальная переменная.

var - глобальная.

 

Что же это значит?

 

Допустим:

 

<script>

function lol() {

let msg = "Привет"

alert(msg) //Тут мы вызываем переменную msg.

}

lol() //вызываем функцию.

</script>

 

По сути, мы создали функцию, новую для вас переменную let, со значением "привет", и потом просто делаем всплывающее окно со значением переменной msg и вызываем функцию.

- И это будет правильно, нам выведет "Привет".

Но что если написать alert(msg) - вне функции?

 

<script>

 

function lol() {

let msg = "Хай"

}

alert(msg)

 

</script>

 

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

 

let - переменная, которую можно использовать ТОЛЬКО В СВОЕМ БЛОКЕ.

Блок - это начало фигурных скобок и конец: тут нет блока { тут блок кода } тут нет этого блока.

 

Если мы сделаем переменную - let, в самом начале кода не в фигурных скобках, то мы не сможем использовать ее в блоках, то есть вот пример:

 

тут есть let { тут нет let } тут есть let.

 

И если мы сделаем наоборот:

 

<script>

let msg = "Привет"

 

function lol() { //блок начался

alert(msg) //Тут мы вызываем переменную msg.

} //блок закончился

 

lol() //вызываем функцию.

</script>

 

- Выведет ошибку! Чтож, на сегодня закончим, всем удачи, скоро встретимся.

 

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

 

1) Я задаю переменной  - n  любое число, а вы делаете факториал этого числа.

(Факториал числа - это умножение от 1... до заданного числа ( n )

Например:

Факториал числа 7:

(1*7) + (2*7) + ( 3*7) + (4*7) + (5*7) + (6*7) + (7*7) = 5040.

 

2) Используя условные операторы if..else, напишите код, который получает число через prompt, а затем выводит в alert:

1,-  если значение больше нуля,

-1, - если значение меньше нуля,

0, - если значение равно нулю.

 

Interval #9 setInterval, setTimeout, clearInvterval.

 

Настала эра интервалов ? ...

 

Интервал - промежуток, через который происходит что либо.

Итак, начнем с setInterval:

 

<script>

var x = 0

function lol() {

x++

Console.log(x)

}

setInterval(lol, 1000)

</script>

 

А терь по полочкам:

setInterval - мы ставим интервал, который выполняет определенное действие, я всегда использую его для функций, как тут, как вы заметили, внутри круглых скобок "( )" - мы пишем название функции (без скобок), и через запятую какое то число, это число - миллисекунды (интервал, который выполняет что либо за ЭТО время).

То есть - за 1000 миллисекунд (1 секунду), функция делает инкремент X и выводит в консоль значение X.

 

setInterval(действие, миллесекунды)

 

- Заметим! setInterval пишется: s e t I n t e r v a l. то есть I - большая i.

 

SetTimeout:

 

итак, зачем же нужен setTimeout?

дело в том, что setInterval - выполняется бесконечно, ну только если мы его не удалим.

А setTimeout - выполняет действие 1 РАЗ, через отведенное время, пример:

 

<script>

var x = 0;

function lal() {

x++

console.log(x);

}

setTimeout(lal, 2000)

</script>

 

Итак, setTimeout выполнит эту функцию 1 РАЗ, ЧЕРЕЗ отведенное время!

В нашем случае 2000 миллисекунд ( 2 секунды ).

То есть: Через 2 секунды наша функция сработает.

 

clearInterval:

 

Не сложно догадаться что это значит... Мы будем удалять наш интервал.

 

допустим, если бы не было for, как еще можно было сделать схему, по типу:

 

for(var x = 0; x <= 20; x++) {

console.log(x)

}

 

- Эта штука выведет нам: x = 20;

 

а как сделать альтернативу? Вот так:

 

<script>

var x = 0; //Создаем переменную X со значением 0.

function helpme() { //Создаем функцию helpme ? .

if(x != 20) { //если X не равно 20, то:

x++ //Инкремент X.

console.log(x) //выводим в консоль значение X.

}

if(x == 20) { //Если x равно 20, то

clearInterval(go) // удаляет интервал с такой переменной (в нашем случае go).

}

}

var go = setInterval(helpme, 1) //Создаем переменную и присваиваем этой переменной интервал.

</script>

 

- Смотрите на комментарии.

Понятно? Отлично, если все-таки нет, лс открыто, лайки доступны всем и каждому) Чтож, скоро встретимся, и помните, не ждите время, пусть время ждет вас ? !

 

Итак, в комментариях я увидел критику, и я согласен с тем, что тут я тут выкладываю просто команды и все, я не объясняю программирование в целом, ведь это профессия довольно "трудная", потому что есть ряд минусов по типу:

1) может понизиться зрение.

2) возможен туннельный синдром.

3) проблемы со спиной.

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

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

4)Малая активность.

Возможно вы станете со временем интровертом, что отделяет вас от общества.

И это лишь список главных проблем.

Но, существуют положительные качества у этой профессии:

1) Вам постоянно нужно учиться.

2) Вы будете развивать математическое мышление.

3) Вы будете больше знать о том как работает наш мир, ведь сейчас почти весь мир - технологии.

4) Вы можете в будущем создать что то свое, будь то какой то чип, или же игры, а это очень Интересно!

 

Чтож, во всех профессиях есть всегда минусы, но надо бороться, вы можете заниматься Настоящим программированием на: курсах, Нормальных учебниках в интернете, в книгах и статьях.

Бороться с минусами легко, но может быть не интересно, или наоборот.

Если вы будете заниматься программированием и ходить на спорт/просто заниматься дома - минусов станет очень мало, но вам может не нравится спорт - поэтому вы можете перестать, и снова будет сидячий образ жизни. Или наоборот, если вам понравиться спорт - вы можете забить на программирование, конечно, если вам нравится спорт больше - то занимайтесь спортом, в этом нет ничего плохого.

 

1)Полная картина выглядит смешанно, ведь кто то будет сидеть в офисе часов 5-6, за стулом, горбясь смотреть непрерывно в экран, попивая чай, который кроме камушков ничего не даст. Будет Босс, который полностью "владеет" вами, если у него плохое настроение - может наорать, или вовсе уволить, снизить зарплату, которая на начальном уровне будет итак низкая, программистам платят хорошо если у них большой опыт, хорошие знания и т.д.

 

2)Кто-то будет сидеть на фрилансе, работать так же за стулом, около 3-4 часов в день уделять какой-то неизвестной тебе работе Свое время и получать за это жалкие 300$ в месяц...

Будут поджимать сроки если будешь отдыхать, то есть этот несчастный заказ будет тебя "контролировать", ибо еще есть глупый человек, который не может нормально объяснить то, в чем ему нужна помощь от программиста (вас).

 

3)Кто-то будет работать 3-4 часа в день, сидеть в уютном кабинете, с адекватным боссом, получать довольно хорошую зарплату, и главное делать то - что нравится.

 

4)А кто-то будет делать свой бизнес, работать час-два, получить нереально много денег, будет полностью отдан себе любимому, ведь никто не может вас уволить)

 

Ну, на самом деле чаще всего я встречался с 1 пунктом, ибо так работает сей мир...

 

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

 

*Надейтесь на лучшее, готовьтесь к худшему*.

Снимок экрана 2020-02-03 в 15.36.14.png

Изменено пользователем KenT4ik
  • Нравится 7
  • Пускаю слюни 1
  • Рейтинг 5
Ссылка на комментарий
Поделиться на другие сайты

  • 4 недели спустя...

Не плохо. Но есть ещё важная фишка "use strict".А также промисы.И ещё было бы не плохо разказать о популярных библиотеках/фреймворках по типу jQuery (которая скоро умрет),Vue.js(хорошая замена React && Angular.js)

Ссылка на комментарий
Поделиться на другие сайты

Понять нравится ли эта профессия человек сможет лишь когда будет реально работать в этой сфере. Когда он узнает, что его работа - это, в основном нудная тягомотина, вперемешку с дедлайнами, форс-мажорами и прочими прелестями любой профессии IT-сферы. Сейчас ты даешь все на блюдечке: вот вам это, здесь можно найти то-то, это сделать вот так, если не работает, то исправь здесь. То есть, я не хочу сказать. что это ненужная информация, но это точно не покажет картину в целом, я бы назвал это низким стартом или (не в обиду) JS для чайников, в любом случае это полезно.

Но лучше бы рассказал как сложно справляться с неизвестными проблемами, искать ответы на форумах, где в основном сидят ЧСВ-гуки, для которых любая твоя проблема - оплошность, которую даже 3-ехлетний ребенок не допустит. Расскажи о начальстве, которое не знает пощады: "ведь ты все равно целый день сидишь за кампутером, чейто ты устал?"

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

В любом случае, статья годная, я себе сохранил, возможно пригодится. +rep

Ссылка на комментарий
Поделиться на другие сайты

  • 1 месяц спустя...

Конечно можно сократить, даже в разы, но тема создана для новичков, есть другие источники - там наверное и объяснят лучше.

Ссылка на комментарий
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...