> 웹 프론트엔드 > JS 튜토리얼 > inute의 JavaScript

inute의 JavaScript

WBOY
풀어 주다: 2024-08-06 00:39:22
원래의
854명이 탐색했습니다.

JavaScript in inute

소개

JavaScript는 동적이고 대화형 사용자 경험을 만들기 위해 웹 개발에서 일반적으로 사용되는 다용도의 고급 프로그래밍 언어입니다. 프론트엔드와 백엔드 개발에 모두 사용할 수 있어 현대 웹 개발자에게 필수적인 도구입니다.

설정

  1. 브라우저 콘솔: 웹 브라우저를 열고 콘솔에 액세스합니다(일반적으로 개발자 도구에 있음).
  2. 텍스트 편집기: VSCode, Sublime Text 또는 메모장과 같은 텍스트 편집기를 사용하세요.

기초

변수

변수는 데이터를 저장하는 데 사용됩니다. let, const, var를 사용하여 변수를 선언할 수 있습니다.

let name = "John";
const age = 30;
var isStudent = true;
로그인 후 복사

데이터 유형

JavaScript는 다음을 포함한 다양한 데이터 유형을 지원합니다.

  • 문자열: "안녕하세요"
  • 번호: 42
  • 부울: 참 또는 거짓
  • 배열: [1, 2, 3]
  • 객체: { 키: "값" }
  • 정의되지 않음: 정의되지 않음
  • 널:

기능

함수는 특정 작업을 수행하도록 설계된 코드 블록입니다.

function greet() {
  console.log("Hello, World!");
}

greet(); // Output: Hello, World!
로그인 후 복사

제어 구조

조건문

다른 조건에 따라 다른 작업을 수행하는 데 사용됩니다.

let time = 20;
if (time < 12) {
  console.log("Good morning");
} else if (time < 18) {
  console.log("Good afternoon");
} else {
  console.log("Good evening");
}
로그인 후 복사

루프

코드 블록을 여러 번 반복하는 데 사용됩니다.

for (let i = 0; i < 5; i++) {
  console.log(i); // Output: 0 1 2 3 4
}
로그인 후 복사

이벤트

JavaScript는 클릭이나 키보드 입력과 같은 이벤트에 응답할 수 있습니다.

<button onclick="sayHello()">Click me</button>
<script>
  function sayHello() {
    alert("Hello!");
  }
</script>
로그인 후 복사

DOM 조작

JavaScript는 HTML 요소와 상호 작용하여 콘텐츠, 스타일 및 속성을 변경할 수 있습니다.

<p id="demo">This is a paragraph.</p>
<button onclick="changeText()">Change Text</button>
<script>
  function changeText() {
    document.getElementById("demo").innerHTML = "Text changed!";
  }
</script>
로그인 후 복사

배열과 객체

배열과 개체는 데이터 컬렉션을 저장하는 데 사용됩니다.

배열

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
로그인 후 복사

사물

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};
console.log(person.firstName); // Output: John
로그인 후 복사

ES6 기능

최신 JavaScript(ES6 이상)에는 몇 가지 새로운 기능이 도입되었습니다.

화살표 기능

const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5
로그인 후 복사

템플릿 리터럴

let name = "John";
console.log(`Hello, ${name}!`); // Output: Hello, John!
로그인 후 복사

구조분해

let person = { firstName: "John", lastName: "Doe" };
let { firstName, lastName } = person;
console.log(firstName); // Output: John
로그인 후 복사

결론

이것은 JavaScript에 대한 간략한 소개입니다. 비동기 프로그래밍 및 API와 같은 고급 주제를 포함하여 탐색할 내용이 훨씬 더 많습니다........

이런 블로그 게시물을 더 많이 공유하게 되어 기쁩니다. 팔로우하고 반응만 주세요

위 내용은 inute의 JavaScript의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿