| # 낮 | 주제 |
|---|---|
| 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 | 최종 프로젝트 |
? 행복한 코딩 ???
저자 : Asabeneh Yetayeh
2020 년 1 월
?? 영어 ?? 스페인어 ?? 이탈리아어 ?? 러시아어 ?? 터키 ?? 아제르바이잔 ?? 한국인 ?? 베트남어 ?? 광택 ?? 포르투갈 인
2 일 >>
30 일의 JavaScript 프로그래밍 챌린지에 참여하기로 결정한 것을 축하합니다 . 이 도전에서, 당신은 JavaScript 프로그래머가되기 위해 필요한 모든 것을 배우고 일반적으로 프로그래밍의 전체 개념을 배우게됩니다. 챌린지가 끝나면 30daysofjavaScript 프로그래밍 챌린지 완료 인증서를 얻게됩니다. 도움이 필요하거나 다른 사람을 돕고 싶은 경우 전용 전보 그룹에 가입 할 수 있습니다.
30daysofjavaScript 챌린지는 초보자와 고급 JavaScript 개발자 모두를위한 가이드입니다. JavaScript에 오신 것을 환영합니다. JavaScript는 웹의 언어입니다. 나는 JavaScript를 사용하고 가르치는 것을 좋아하며 당신도 그렇게하기를 바랍니다.
이 단계별 JavaScript 도전에서 인류의 역사에서 가장 인기있는 프로그래밍 언어 인 JavaScript를 배웁니다. JavaScript는 웹 사이트에 상호 작용을 추가하고 모바일 앱, 데스크톱 응용 프로그램, 게임 및 요즘 JavaScript를 개발하여 서버 측 프로그래밍 , 머신 러닝 및 AI 에 사용될 수 있습니다.
JavaScript (JS)는 최근 몇 년 동안 인기가 높아졌으며 지난 10 년 동안 주요 프로그래밍 언어였으며 GitHub에서 가장 많이 사용되는 프로그래밍 언어입니다.
이 도전은 읽기 쉽고 대화하는 영어로 작성되며, 참여, 동기 부여 및 동시에 매우 까다 롭습니다. 이 도전을 마치려면 많은 시간을 할당해야합니다. 시각적 학습자라면 Washera YouTube 채널에서 비디오 레슨을받을 수 있습니다. YouTube Vides에서 채널을 구독하고 댓글을 달고 질문하십시오. 저자는 결국 귀하를 알아 차릴 것입니다.
저자는 도전에 대한 귀하의 의견을 듣고 30daysofjavaScript 도전에 대한 귀하의 생각을 표현하여 저자를 공유합니다. 이 링크에 평가를 남길 수 있습니다
이 도전에 따라 프로그래밍에 대한 사전 지식이 필요하지 않습니다. 당신은 만 필요합니다 :
나는 당신이 개발자, 컴퓨터 및 인터넷이 되고자하는 동기와 강한 소망이 있다고 생각합니다. 당신이 그것들이 있다면, 당신은 시작할 모든 것이 있습니다.
지금 Node.js가 필요하지 않을 수도 있지만 나중에 필요할 수 있습니다. Node.js를 설치하십시오.
더블 클릭 및 설치를 다운로드 한 후
장치 터미널 또는 명령 프롬프트를 열어 노드가 로컬 컴퓨터에 설치되어 있는지 확인할 수 있습니다.
asabeneh $ node -v
v12.14.0이 튜토리얼을 만들 때 노드 버전 12.14.0을 사용하고 있었지만 다운로드 용 Node.js의 권장 버전은 v14.17.6입니다.이 자료를 사용할 때까지 Node.js 버전이 더 높을 수 있습니다.
많은 브라우저가 있습니다. 그러나 Google Chrome을 강력히 추천합니다.
아직없는 경우 Google 크롬을 설치하십시오. 브라우저 콘솔에 작은 JavaScript 코드를 작성할 수 있지만 브라우저 콘솔을 사용하여 응용 프로그램을 개발하지 않습니다.
브라우저의 오른쪽 상단 모서리에서 3 개의 점을 클릭하거나 더 많은 도구를 선택하거나 키보드 단축키를 사용하여 Google Chrome 콘솔을 열 수 있습니다. 나는 바로 가기를 선호합니다.
키보드 바로 가기를 사용하여 Chrome 콘솔을 엽니 다.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Google Chrome 콘솔을 열면 표시된 버튼을 탐색하십시오. 우리는 대부분의 시간을 콘솔에서 보낼 것입니다. 콘솔은 JavaScript 코드가가는 곳입니다. Google 콘솔 V8 엔진은 JavaScript 코드를 기계 코드로 변경합니다. Google Chrome 콘솔에 JavaScript 코드를 작성하겠습니다.
Google 콘솔 또는 브라우저 콘솔에 JavaScript 코드를 작성할 수 있습니다. 그러나이 과제를 위해 Google Chrome 콘솔에만 중점을 둡니다. 다음을 사용하여 콘솔을 엽니 다.
Mac
Command+Option+I
Windows:
Ctl+Shift+I 첫 번째 JavaScript 코드를 작성하기 위해 내장 기능 Console.log ()를 사용했습니다. 입력 데이터로 인수를 전달했으며 함수는 출력을 표시합니다. Console.log () 함수의 입력 데이터 또는 인수로 'Hello, World' 통과했습니다.
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() 여러 인수를 할 수 있습니다.
축하해요! console.log() 사용하여 첫 번째 JavaScript 코드를 작성했습니다.
코드에 댓글을 추가 할 수 있습니다. 코드를보다 읽기 쉽게 만들고 코드에 비고를 남기는 것이 매우 중요합니다. 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!` ) 이제 숫자 데이터 유형에 대해 Chrome Console에서 console.log() 사용하여 더 많은 쓰기 JavaScript 코드를 연습하겠습니다. 텍스트 외에도 JavaScript를 사용하여 수학적 계산을 수행 할 수도 있습니다. 다음과 같은 간단한 계산을하겠습니다. Google Chrome 콘솔에 JavaScript 코드를 작성할 수 있습니다. Chrome Console은 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 챌린지에서는 Visual Studio Code를 사용할 것입니다.
Visual Studio Code는 매우 인기있는 오픈 소스 텍스트 편집기입니다. Visual Studio Code를 다운로드하는 것이 좋습니다. 그러나 다른 편집자를 선호한다면 자유롭게 가지고있는 것을 자유롭게 따르십시오.
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() 에서 출력을 확인하십시오.
내부 스크립트와 마찬가지로 외부 스크립트 링크는 헤더 또는 본문에있을 수 있지만 신체에 넣는 것이 선호됩니다. 먼저 .js 확장자가있는 외부 JavaScript 파일을 작성해야합니다. .js 확장자로 끝나는 모든 파일은 JavaScript 파일입니다. Project Directory 내부에서 소개 .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 파일을 웹 페이지에 연결할 수도 있습니다. 30daysofjs 폴더 안에 helloworld.js 파일을 작성하고 다음 코드를 작성하십시오.
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 원시 데이터 유형입니다 : 문자열, 번호, 부울, 정의되지 않은, null 및 기호 .
두 개의 단일 따옴표, 이중 인용문 또는 백 티크 사이에 하나 이상의 문자 모음.
예:
'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 또는 false 값입니다.
예:
true // if the light is on, the value is true
false // if the light is off, the value is falseJavaScript에서 값을 변수에 할당하지 않으면 값이 정의되지 않습니다. 그 외에도 함수가 아무것도 반환하지 않으면 정의되지 않은 반환됩니다.
let firstName
console . log ( firstName ) // undefined, because it is not assigned to a value yetJavaScript의 Null은 빈 값을 의미합니다.
let emptyValue = null 특정 변수의 데이터 유형을 확인하기 위해 연산자 유형을 사용합니다. 다음 예를 참조하십시오.
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목록의 첫 번째 및 두 번째 변수는 JavaScript로 선언하는 Camelcase Convention을 따릅니다. 이 자료에서는 Camelcase 변수 (Camelwithonehump)를 사용합니다. 우리는 Camelcase (Camelwithtwohump)를 사용하여 클래스를 선언하고 다른 섹션의 수업과 개체에 대해 논의 할 것입니다.
잘못된 변수의 예 :
first - name
1 _num
num_ # _1데이터 유형이 다른 변수를 선언하겠습니다. 변수를 선언하려면 변수 이름 앞에 LET 또는 Const 키워드를 사용해야합니다. 변수 이름에 따라 동일한 부호 (할당 연산자) 및 값 (할당 된 데이터)을 씁니다.
// Syntax
let nameOfVariable = valueNameOfVriable은 값의 다른 데이터를 저장하는 이름입니다. 자세한 예제는 아래를 참조하십시오.
선언 된 변수의 예
// 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 Finland01 일 폴더에서 index.html 파일을 실행하면 다음과 같이해야합니다.
? 당신은 놀랍습니다! 당신은 방금 1 일차 도전을 완료했고 당신은 위대함으로가는 길에 있습니다. 이제 뇌와 근육을 위해 몇 가지 운동을하십시오.
한 줄의 주석을 작성하여 코드를 읽을 수있게 할 수 있습니다.
30daysofjavaScript에 오신 것을 환영 합니다
댓글, 코드를 읽기 쉽고 재사용하기 쉬우 며 유익한 정보를 제공 할 수있는 멀티 라인 댓글 작성
variable.js 파일을 만들고 변수를 선언하고 문자열, 부울, 정의 및 널 데이터 유형을 할당합니다.
Datatypes.js 파일을 만들고 JavaScript 유형 을 사용하여 다른 데이터 유형을 확인하십시오. 각 변수의 데이터 유형을 확인하십시오
값을 할당하지 않고 4 개의 변수를 선언합니다
할당 된 값으로 네 가지 변수를 선언합니다
여러 줄에 이름, 성, 결혼 상태, 국가 및 연령을 저장하도록 변수를 선언합니다.
이름, 성, 결혼 상태, 국가 및 나이를 한 줄로 저장하도록 변수 선언
두 가지 변수를 선언하고 Myage 와 Yourage를 선언하고 초기 값을 지정하고 브라우저 콘솔에 로그인하십시오.
I am 25 years old.
You are 30 years old.? 축하해요 ! ?
2 일 >>
