| # День | Темы |
|---|---|
| 01 | Введение |
| 02 | Типы данных |
| 03 | Логиты, операторы, дата |
| 04 | Условия |
| 05 | Массивы |
| 06 | Петли |
| 07 | Функции |
| 08 | Объекты |
| 09 | Функции более высокого порядка |
| 10 | Наборы и карты |
| 11 | Разрушение и распространение |
| 12 | Регулярные выражения |
| 13 | Методы консольного объекта |
| 14 | Обработка ошибок |
| 15 | Классы |
| 16 | Json |
| 17 | Веб -хранилища |
| 18 | Обещания |
| 19 | Закрытие |
| 20 | Написание чистого кода |
| 21 | Дом |
| 22 | Манипулирование объектом DOM |
| 23 | Слушатели событий |
| 24 | Мини -проект: солнечная система |
| 25 | Мини -проект: Визуализация данных стран мира 1 |
| 26 | Мини -проект: Визуализация данных стран мира 2 |
| 27 | Мини -проект: портфель |
| 28 | Мини -проект: таблица лидеров |
| 29 | Мини -проект: анимирующие персонажи |
| 30 | Окончательные проекты |
??? Счастливого кодирования ???
Автор: Асабене -лейтайе
Январь 2020 года
?? Английский ?? Испанский ?? Итальянский? Русский ?? Турецкий? Азербайджан ?? Корейский Вьетнамцы ?? Лак ?? португальский
День 2 >>
Поздравляем с принятием принятия 30 дней с задачей программирования JavaScript. В этом вызове вы узнаете все, что вам нужно, чтобы стать программистом JavaScript, и в целом, всю концепцию программирования. В конце задачи вы получите сертификат задачи разработки программирования 30 дней. В случае, если вам нужна помощь или если вы хотите помочь другим, вы можете присоединиться к специализированной Telegram Group.
Проблема 30daysofjavascript - это руководство как для начинающих, так и для продвинутых разработчиков JavaScript. Добро пожаловать в JavaScript. JavaScript - это язык Интернета. Мне нравится использовать и преподавать JavaScript, и я надеюсь, что вы тоже это сделаете.
В этом шаг за шагом JavaScript вы узнаете JavaScript, самый популярный язык программирования в истории человечества. JavaScript используется для добавления интерактивности к веб-сайтам, для разработки мобильных приложений, настольных приложений, игр и в настоящее время JavaScript можно использовать для программирования на стороне сервера , машинного обучения и ИИ .
JavaScript (JS) увеличился в популярности в последние годы и был ведущим языком программирования в течение последних десяти лет и является наиболее используемым языком программирования на GitHub.
Эту проблему легко читать, написано на разговорном английском языке, привлекательном, мотивации и в то же время, это очень требовательно. Вам нужно выделить много времени, чтобы закончить этот вызов. Если вы визуальный ученик, вы можете получить видеоурок на канале Washera YouTube. Подпишитесь на канал, комментируйте и задавайте вопросы на Vides на YouTube и будьте активны, автор в конечном итоге заметит вас.
Автор любит слышать ваше мнение о вызове, поделиться автором, выразив свои мысли о 30daysofjavascript Challenge. Вы можете оставить свой отзыв по этой ссылке
Никаких предварительных знаний о программировании не требуется для выполнения этой задачи. Вам нужно только:
Я считаю, что у вас есть мотивация и сильное желание быть разработчиком, компьютером и интернетом. Если у вас есть, то у вас есть все, чтобы начать.
Возможно, вам не понадобится Node.js прямо сейчас, но вам может понадобиться на потом. Установить node.js.
После загрузки двойного щелчка и установки
Мы можем проверить, установлен ли узел на нашей локальной машине, открыв нашу клемма или командную строку.
asabeneh $ node -v
v12.14.0При создании этого урока я использовал Node версию 12.14.0, но теперь рекомендуемая версия Node.js для загрузки v14.17.6, к тому времени, когда вы используете этот материал, у вас может быть версия Node.js.
Есть много браузеров. Тем не менее, я настоятельно рекомендую Google Chrome.
Установите Google Chrome, если у вас еще нет. Мы можем написать небольшой код JavaScript на консоли браузера, но мы не используем консоль браузера для разработки приложений.
Вы можете открыть Google Chrome Console, нажав три точки в правом верхнем углу браузера, выбрав больше инструментов -> инструменты разработчика или, используя сочетание клавиатуры. Я предпочитаю использовать ярлыки.
Чтобы открыть хромированную консоль, используя сочетание клавиатуры.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
После того, как вы откроете консоль Google Chrome, попробуйте изучить отмеченные кнопки. Мы будем проводить большую часть времени на консоли. Консоль - это место, куда идет ваш код JavaScript. Двигатель Google Console V8 изменяет ваш код JavaScript на машинный код. Давайте напишем код JavaScript на консоли Google Chrome:
Мы можем написать любой код JavaScript на консоли Google или любой консоли браузера. Однако для этой задачи мы сосредоточены только на консоли Google Chrome. Откройте консоли, используя:
Mac
Command+Option+I
Windows:
Ctl+Shift+I Чтобы написать наш первый код JavaScript, мы использовали встроенную функциональную консоль.log () . Мы передали аргумент в качестве входных данных, и функция отображает выход. Мы прошли 'Hello, World' в качестве входных данных или аргумента в функции console.log ().
console . log ( 'Hello, World!' ) Функция console.log() может принимать несколько параметров, разделенных запятыми. Синтаксис выглядит следующим образом: console.log(param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' ) Как вы можете видеть из кода фрагмента выше, console.log() может принимать несколько аргументов.
Поздравляю! Вы написали свой первый код JavaScript, используя console.log() .
Мы можем добавить комментарии к нашему коду. Комментарии очень важны, чтобы сделать код более читабельным и оставлять замечания в нашем коде. JavaScript не выполняет комментарий части нашего кода. В JavaScript любая текстовая строка, начинающаяся с // в JavaScript, является комментарием, и все, что прилагается, как это // также является комментарием.
Пример: комментарий на одну строку
// This is the first comment
// This is the second comment
// I am a single line commentПример: многослойный комментарий
/*
This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/ Языки программирования похожи на человеческие языки. Английский или многие другие языки используют слова, фразы, предложения, сложные предложения и другие другие, чтобы передать значимое сообщение. Английское значение синтаксиса-это расположение слов и фраз для создания хорошо сформированных предложений на языке . Техническое определение синтаксиса - это структура утверждений на компьютерном языке. Языки программирования имеют синтаксис. JavaScript - это язык программирования, и, как и другие языки программирования, у него есть свой собственный синтаксис. Если мы не напишем синтаксис, который понимает JavaScript, он выразит различные типы ошибок. Позже мы рассмотрим различные виды ошибок JavaScript. На данный момент давайте посмотрим на синтаксические ошибки.
Я сделал преднамеренную ошибку. В результате консоль увеличивает синтаксические ошибки. На самом деле, синтаксис очень информативный. Он сообщает, какой тип ошибки был сделан. Считая руководство по обратной связи с ошибкой, мы можем исправить синтаксис и исправить проблему. Процесс выявления и удаления ошибок из программы называется отладкой. Позвольте нам исправить ошибки:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' ) До сих пор мы увидели, как отображать текст, используя console.log() . Если мы печатаем текст или строку с помощью console.log() , текст должен находиться внутри отдельных кавычек, двойных кавычек или обратной связи. Пример:
console . log ( 'Hello, World!' )
console . log ( "Hello, World!" )
console . log ( `Hello, World!` ) Теперь позвольте нам практиковать больше записи кодов Javascript с использованием console.log() на консоли Google Chrome для типов цифр данных. В дополнение к тексту, мы также можем выполнять математические расчеты, используя JavaScript. Давайте сделаем следующие простые расчеты. Можно написать код JavaScript на консоли Google Chrome может непосредственно без функции console.log() . Тем не менее, это включено в это введение, потому что большая часть этой проблемы будет происходить в текстовом редакторе, где использование функции будет обязательным. Вы можете играть непосредственно с инструкциями на консоли.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3Мы можем написать наши коды на консоли браузера, но это не будет для более крупных проектов. В реальной рабочей среде разработчики используют разные редакторы кода для написания своих кодов. В течение этих 30 дней JavaScript Challenge мы будем использовать код Visual Studio.
Visual Studio Code-очень популярный текстовый редактор с открытым исходным кодом. Я бы порекомендовал загрузить код Visual Studio, но если вы выступаете за другие редакторы, не стесняйтесь следить за тем, что у вас есть.
Если вы установили код Visual Studio, давайте начнем его использовать.
Откройте код Visual Studio, дважды щелкнув его значок. Когда вы откроете его, вы получите такой интерфейс. Попробуйте взаимодействовать с маркированными значками.
JavaScript можно добавить на веб -страницу тремя различными способами:
В следующих разделах показаны разные способы добавления кода JavaScript на вашу веб -страницу.
Создайте папку проекта на своем рабочем столе или в любом месте, назовите ее 30daysofjs и создайте файл index.html в папке проекта. Затем вставьте следующий код и откройте его в браузер, например, Chrome.
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Inline Script </ title >
</ head >
< body >
< button onclick =" alert('Welcome to 30DaysOfJavaScript!') " > Click Me </ button >
</ body >
</ html > Теперь вы только что написали свой первый встроенный сценарий. Мы можем создать всплывающее оповещение, используя встроенную функцию alert() .
Внутренний сценарий может быть записан в head или body , но предпочтительнее помещать его на тело документа HTML. Во -первых, давайте напишем на голове часть страницы.
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Internal Script </ title >
< script >
console . log ( 'Welcome to 30DaysOfJavaScript' )
</ script >
</ head >
< body > </ body >
</ html > Вот как мы пишем внутренний сценарий большую часть времени. Написание кода JavaScript в разделе тела является наиболее предпочтительным вариантом. Откройте консоль браузера, чтобы увидеть вывод из console.log() .
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Internal Script </ title >
</ head >
< body >
< button onclick =" alert('Welcome to 30DaysOfJavaScript!'); " > Click Me </ button >
< script >
console . log ( 'Welcome to 30DaysOfJavaScript' )
</ script >
</ body >
</ html > Откройте консоль браузера, чтобы увидеть вывод из console.log() .
Подобно внутреннему сценарию, внешняя ссылка сценария может быть на заголовке или теле, но предпочтительнее помещать его в тело. Во -первых, мы должны создать внешний файл JavaScript с расширением .js. Все файлы, заканчивающиеся расширением .js, являются файлами JavaScript. Создайте файл с именем venturection.js внутри вашего каталога проекта и напишите следующий код и свяжите этот файл .js в нижней части тела.
console . log ( 'Welcome to 30DaysOfJavaScript' )Внешние сценарии в голове :
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfJavaScript:External script </ title >
< script src =" introduction.js " > </ script >
</ head >
< body > </ body >
</ html >Внешние сценарии в теле :
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfJavaScript:External script </ title >
</ head >
< body >
<!-- JavaScript external link could be in the header or in the body -->
<!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
< script src =" introduction.js " > </ script >
</ body >
</ html > Откройте консоль браузера, чтобы увидеть вывод console.log() .
Мы также можем связать несколько внешних файлов JavaScript с веб -страницей. Создайте файл helloworld.js в папке 30daysofjs и напишите следующий код.
console . log ( 'Hello, World!' ) <!DOCTYPE html >
< html lang =" en " >
< head >
< title > Multiple External Scripts </ title >
</ head >
< body >
< script src =" ./helloworld.js " > </ script >
< script src =" ./introduction.js " > </ script >
</ body >
</ html >Ваш файл main.js должен быть ниже всех других сценариев . Очень важно помнить об этом.
В JavaScript, а также на других языках программирования существуют различные типы типов данных. Ниже приведены примитивные типы данных JavaScript: строка, число, логическое, неопределенное, ноль и символ .
Коллекция из одного или нескольких символов между двумя отдельными кавычками, двойными кавычками или обратными брюками.
Пример:
'a'
'Asabeneh'
"Asabeneh"
'Finland'
'JavaScript is a beautiful programming language'
'I love teaching'
'I hope you are enjoying the first day'
`We can also create a string using a backtick`
'A string could be just as small as one character or as big as many pages'
'Any data type under a single quote, double quote or backtick is a string'Логическое значение либо верно, либо ложное. Любые сравнения возвращают логическое значение, которое либо истинно, либо ложное.
Логический тип данных является либо истинным, либо ложным значением.
Пример:
true // if the light is on, the value is true
false // if the light is off, the value is falseВ JavaScript, если мы не присваиваем значение переменной, значение не определен. В дополнение к этому, если функция ничего не возвращает, она возвращает неопределенную.
let firstName
console . log ( firstName ) // undefined, because it is not assigned to a value yetNULL в JavaScript означает пустое значение.
let emptyValue = null Чтобы проверить тип данных определенной переменной, мы используем оператор TypeOF . Смотрите следующий пример.
console . log ( typeof 'Asabeneh' ) // string
console . log ( typeof 5 ) // number
console . log ( typeof true ) // boolean
console . log ( typeof null ) // object type
console . log ( typeof undefined ) // undefined Помните, что комментарии в JavaScript аналогичны другим языкам программирования. Комментарии важны для того, чтобы сделать ваш код более читаемым. Есть два способа комментировать:
// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line commentМногослойные комментарии:
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
This is a Multiple line comment
*/ Переменные - это контейнеры данных. Переменные используются для хранения данных в память. Когда переменная объявлена, зарезервированное местоположение памяти зарезервировано. Когда переменная присваивается значению (данные), пространство памяти будет заполнено этими данными. Чтобы объявить переменную, мы используем ключевые слова VAR , Let или Const .
Для переменной, которая меняется в другое время, мы используем Let . Если данные вообще не изменяются, мы используем Const . Например, PI, название страны, гравитация не меняются, и мы можем использовать Const . Мы не будем использовать VAR в этом вызове, и я не рекомендую вам использовать его. Это склонный к ошибкам способ объявить переменную, что у него много утечки. Мы подробнее поговорим о VAR, LET и CONST в других разделах (область применения). На данный момент вышеупомянутого объяснения достаточно.
Допустимое имя переменной javaScript должно следовать следующим правилам:
Ниже приведены примеры действительных переменных JavaScript.
firstName
lastName
country
city
capitalCity
age
isMarried
first_name
last_name
is_married
capital_city
num1
num_1
_num_1
$num1
year2020
year_2020Первая и вторая переменная в списке следует за Camelcase Convention о объявлении в JavaScript. В этом материале мы будем использовать переменные Camelcase (CamelWithoneHump). Мы используем Camelcase (CamelWithtWohump) для объявления классов, мы обсудим классы и объекты в другом разделе.
Пример неверных переменных:
first - name
1 _num
num_ # _1Давайте объявим переменные с различными типами данных. Чтобы объявить переменную, нам нужно использовать ключевое слово let или const перед именем переменной. Следуя имени переменной, мы пишем равный знак (оператор назначения) и значение (назначенные данные).
// Syntax
let nameOfVariable = valueНазвание - это имя, которое хранит различные данные значения. Смотрите ниже для получения подробной информации примеры.
Примеры объявленных переменных
// Declaring different variables of different data types
let firstName = 'Asabeneh' // first name of a person
let lastName = 'Yetayeh' // last name of a person
let country = 'Finland' // country
let city = 'Helsinki' // capital city
let age = 100 // age in years
let isMarried = true
console . log ( firstName , lastName , country , city , age , isMarried ) Asabeneh Yetayeh Finland Helsinki 100 true // Declaring variables with number values
let age = 100 // age in years
const gravity = 9.81 // earth gravity in m/s2
const boilingPoint = 100 // water boiling point, temperature in °C
const PI = 3.14 // geometrical constant
console . log ( gravity , boilingPoint , PI ) 9.81 100 3.14 // Variables can also be declaring in one line separated by comma, however I recommend to use a seperate line to make code more readble
let name = 'Asabeneh' , job = 'teacher' , live = 'Finland'
console . log ( name , job , live ) Asabeneh teacher FinlandКогда вы запустите файл index.html в папке с 01 днем, вы должны получить это:
? Ты потрясающий! Вы только что завершили вызов 1 день, и вы находитесь на пути к величию. Теперь сделайте несколько упражнений для вашего мозга и мышц.
Напишите комментарий с одной строкой, в котором говорится, что комментарии могут сделать код читаемым
Напишите еще один комментарий, в котором говорится, добро пожаловать в 30daysofjavascript
Напишите многослойный комментарий, в котором говорится, что комментарии могут сделать код читаемым, простым в повторном использовании и информативном
Создать файл variable.js и объявить переменные и назначить строковые, логические, неопределенные и нулевые типы данных
Создайте файл dataTypes.js и используйте оператор JavaScript TypeOF для проверки различных типов данных. Проверьте тип данных каждой переменной
Объявите четыре переменных без присвоения значений
Объявить четыре переменных с назначенными значениями
Объявите переменные для хранения вашего имени, фамилии, семейного положения, страны и возраста в нескольких линиях
Объявите переменные для хранения вашего имени, фамилии, семейного положения, страны и возраста в одной линии
Объявите две переменные myage и yourage и назначьте им начальные значения и войдите на консоли браузера.
I am 25 years old.
You are 30 years old.? Поздравляю! ?
День 2 >>
