c 자바스크립트 사용법-프런트엔드 Q&A-php.cn

JavaScript는 웹 페이지에 동적 콘텐츠와 대화형 기능을 추가하는 데 일반적으로 사용되는 프로그래밍 언어입니다. HTML 및 CSS와 함께 최신 웹사이트의 기본 구성 요소를 형성합니다. 웹사이트에 동적 요소를 추가하려면 JavaScript가 필수입니다. 이번 글에서는 자바스크립트 사용법을 다뤄보겠습니다.

Embed JavaScript HTML에 JavaScript 코드를 삽입하는 방법에는 두 가지가 있습니다. 먼저 HTML의 또는 사이에 스크립트 태그를 배치할 수 있습니다. 즉, 페이지가 로드될 때 코드가 한 번 실행됩니다. 예:

function displayMessage() { alert("Hello, World!"); } Click me! 로그인 후 복사 위 코드는 간단한 경고 상자를 표시하는 displayMessage()라는 함수를 정의합니다. 사용자가 버튼을 클릭하면 함수가 호출됩니다.

두 번째 방법은 HTML 문서 외부에 JavaScript 파일을 만드는 것입니다. 이렇게 하면 코드가 더 체계화되고 관리하기 쉬워집니다. 외부 스크립트를 사용하려면 태그의 src 속성을 JavaScript 파일 경로로 설정하세요. 예:

Click me! 로그인 후 복사 이 예에서 JavaScript 코드는 myscript.js라는 파일에 있습니다.

변수 및 데이터 유형 JavaScript는 문자열, 숫자 값, 부울 값, 객체, 배열, null 값 및 정의되지 않은 값을 포함한 다양한 데이터 유형을 지원합니다. 변수를 선언하려면 var 키워드를 사용하십시오.

var name = "John"; var age = 30; var isMale = true; 로그인 후 복사 위의 예에서는 문자열, 숫자 값, 부울 값을 각각 저장하기 위해 세 가지 변수를 정의했습니다. typeof 연산자를 사용하여 변수의 데이터 유형을 결정할 수 있습니다.

alert(typeof name); // "string" alert(typeof age); // "number" alert(typeof isMale); // "boolean" 로그인 후 복사 연산자 및 논리 표현식 JavaScript는 산술 연산자, 비교 연산자, 논리 연산자를 포함한 다양한 연산자를 지원합니다. 다음 예에서는 두 개의 변수 x와 y를 정의하고 일반적으로 사용되는 몇 가지 연산자를 보여줍니다.

var x = 10; var y = 5; var z = x + y; // 加法运算 var w = x - y; // 减法运算 var q = x * y; // 乘法运算 var r = x / y; // 除法运算 var s = x % y; // 取模运算 var t = x == y; // 等于运算符（返回false） var u = x > y; // 大于运算符（返回true） var v = (x > y) && (x 로그인 후 복사 위 코드에서는 논리식을 사용하는 방법도 시연했습니다. AND 연산자는 두 표현식을 함께 연결하고 두 표현식이 모두 true인 경우 true를 반환합니다.

함수 함수는 JavaScript의 기본 구성 요소 중 하나입니다. 함수는 다른 코드와 함께 사용할 수 있는 재사용 가능한 코드 조각입니다. 함수를 정의하려면 function 키워드를 사용하세요.

function addNumbers(x, y) { return x + y; } 로그인 후 복사 이 예에서는 두 개의 숫자 매개변수를 받아들이고 그 합계를 반환하는 addNumbers라는 함수를 정의합니다. 함수를 호출하려면 함수 이름 뒤에 괄호를 사용하고 필요한 인수를 전달합니다.

var sum = addNumbers(5, 10); // sum等于15 로그인 후 복사 Events 이벤트는 JavaScript의 또 다른 중요한 개념입니다. 이벤트는 버튼 클릭, 양식 제출 등 트리거될 수 있는 작업입니다. 이벤트를 처리하려면 이벤트가 발생할 때 호출되는 함수인 이벤트 핸들러를 설정합니다.

Click me! 로그인 후 복사 위의 예에서는 버튼을 정의하고 버튼을 클릭하면 displayMessage라는 함수를 호출했습니다.

DOM 연산 마지막으로 JavaScript의 DOM 연산을 살펴보겠습니다. DOM(Document Object Model)은 JavaScript가 웹 페이지의 요소와 속성에 액세스하고 수정할 수 있도록 하는 웹 페이지의 프로그래밍 인터페이스입니다. 예를 들어 요소에 액세스하려면 문서 개체를 사용하고 요소의 ID를 지정합니다.

This is a paragraph.

로그인 후 복사 위 예에서는 ID가 "myParagraph"인 단락 요소를 정의했습니다. 다음은 JavaScript를 사용하여 콘텐츠를 수정하는 방법에 대한 예입니다.

var paragraph = document.getElementById("myParagraph"); paragraph.innerHTML = "This is a new paragraph."; 로그인 후 복사 위 코드에서는 getElementById 메소드를 사용하여 요소를 가져오고 innerHTML 속성을 사용하여 해당 내용을 설정합니다.

요약

JavaScript는 대화형의 동적 웹 페이지를 만드는 데 사용할 수 있는 강력하고 유연한 프로그래밍 언어입니다. 이 문서에서는 변수, 데이터 유형, 연산자, 함수, 이벤트 및 DOM 작업을 포함한 JavaScript의 기본 개념을 소개합니다. 이제 자신만의 JavaScript 코드를 작성할 준비가 되었습니다!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

c 자바스크립트 사용법