기본 사항에서 중급까지 : JavaScript를 배우는 여행 ✨

<p><img src="https://img.php.cn/upload/article/000/000/000/173793085662165.jpg" alt="From Basics to Intermediate: My Journey Learning JavaScript ✨"></p> <p>이 가이드에는 개인적인 학습 경험을 바탕으로 JavaScript 기초부터 중급 개념까지의 과정이 나와 있습니다. 여러분의 학습 여정을 보다 원활하게 만들어줄 주요 시사점, 실제 사례, 유용한 힌트를 정리했습니다. 뛰어들어 보세요!</p> <p><strong>목차</strong></p> <ol> <li>변수</li> <li>배열</li> <li>조건문</li> <li>기능</li> <li>객체</li> <li>DOM(문서 객체 모델)</li> <li>이벤트</li> <li>HTML과 JavaScript 통합</li> </ol> <hr> <p><strong>1. 변수</strong></p> <p>변수는 프로그램에 사용되는 데이터를 담는 컨테이너입니다. JavaScript는 이를 선언하는 두 가지 주요 방법을 제공합니다.</p> <ul> <li> <code>let</code>: 값이 변경될 수 있는 변수의 경우</li> <li> <code>const</code>: 일정하게 유지되어야 하는 값의 경우</li> </ul> <p><strong>예:</strong></p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre> <p>변수에는 숫자, 텍스트(문자열), 참/거짓 값(부울) 또는 정의되지 않은 값도 포함될 수 있습니다. JavaScript는 표준 산술 연산자( , -, *, /, %)와 지수 연산자(**)를 제공합니다.</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></pre> <hr> <p><strong>2. 배열</strong></p> <p>배열은 단일 변수 내에 여러 값을 저장합니다. 배열을 정의하려면 대괄호를 사용하세요.</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre> <p>색인(0부터 시작)을 사용하여 요소에 액세스:</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre> <p><strong>요소 추가 및 제거:</strong></p> <p>배열은 동적입니다. 수정할 수 있습니다:</p> <ul> <li> <code>.push()</code>: 끝에 요소를 추가합니다.</li> <li> <code>.unshift()</code>: 시작 부분에 요소를 추가합니다.</li> <li> <code>.pop()</code>: 마지막 요소를 제거합니다.</li> <li> <code>.shift()</code>: 첫 번째 요소를 제거합니다.</li> </ul> <p><strong>예:</strong></p> <pre class="brush:php;toolbar:false"><code class="language-javascript">fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</code></pre> <p><strong>배열 검색:</strong></p> <ul> <li> <code>.indexOf()</code>: 값의 인덱스를 찾습니다.</li> <li> <code>.includes()</code>: 값이 존재하는지 확인합니다.</li> </ul> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits.indexOf("banana")); // Output: 1 console.log(fruits.includes("grape")); // Output: false</code></pre> <hr> <p><strong>3. 조건문</strong></p> <p>조건문을 사용하면 코드에서 결정을 내릴 수 있습니다. <code>if</code> 및 <code>else</code>이 일반적으로 사용됩니다.</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</code></pre> <p><strong>비교 연산자:</strong></p> <p>다음 연산자는 조건을 평가하는 데 필수적입니다.</p> <ul> <li> <code>===</code>(엄격한 평등)</li> <li> <code>!==</code> (엄격한 불평등)</li> <li> <code>></code>(보다 큼)</li> <li> <code><</code>(미만)</li> <li><code>>=</code>(이상)</li> <li> <code><=</code>(이하)</li> </ul> <hr /> <p><strong>4. 기능</strong></p> <p>함수는 재사용 가능한 코드 블록입니다. <code>function</code> 키워드를 사용하여 정의하세요.</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!</code></pre> <p><strong>매개변수 및 인수:</strong></p><p>함수는 입력(<strong>매개변수</strong>)을 허용하고 <strong>인수</strong>와 함께 호출할 때 사용할 수 있습니다.</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre> <hr /> <p><strong>5. 객체</strong></p> <p>객체는 미니 데이터베이스와 같은 키-값 쌍의 모음입니다.</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></pre> <p><strong>객체의 메서드:</strong></p> <p>객체에는 함수(<strong>메서드</strong>)도 포함될 수 있습니다.</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre> <hr /> <p><strong>6. DOM(문서 개체 모델)</strong></p> <p>DOM을 사용하면 JavaScript가 HTML 요소와 상호 작용할 수 있습니다.</p> <p><strong>요소 선택:</strong></p> <p><code>document</code> 개체를 사용하여 요소를 선택합니다.</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre> <p><strong>요소 업데이트:</strong></p> <p>동적으로 콘텐츠 수정:</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</code></pre> <hr /> <p><strong>7. 이벤트</strong></p> <p><code>.addEventListener()</code>을 사용하여 사용자 작업(클릭, 키 누름)에 응답:</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits.indexOf("banana")); // Output: 1 console.log(fruits.includes("grape")); // Output: false</code></pre> <p><strong>예: 카운터 증가:</strong></p> <pre class="brush:php;toolbar:false"><code class="language-javascript">if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</code> <hr> <p><strong>8. HTML과 JavaScript 통합</strong></p> <p><code><script></code> 태그를 사용하여 HTML에 JavaScript를 직접 추가하세요.</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!</code></pre> <p>더 큰 스크립트의 경우 외부 <code>.js</code> 파일을 연결하세요.</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">function add(a, b) { return a + b; } console.log(add(2, 3)); // Output: 5</code></pre> <hr> <p>이것으로 초급부터 중급까지의 JavaScript 학습 여정이 끝났습니다! 이 가이드가 도움이 되기를 바랍니다. 여러분만의 학습 팁을 공유하거나 댓글로 질문을 남겨주세요! 즐거운 코딩하세요! ✨</p> </li> </ul>

위 내용은 기본 사항에서 중급까지 : JavaScript를 배우는 여행 ✨의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!