c 자바스크립트 사용법
- 王林원래의
- 2023-05-17 16:25:38542검색
JavaScript는 웹 페이지에 동적 콘텐츠와 대화형 기능을 추가하는 데 일반적으로 사용되는 프로그래밍 언어입니다. HTML 및 CSS와 함께 최신 웹사이트의 기본 구성 요소를 형성합니다. 웹사이트에 동적 요소를 추가하려면 JavaScript가 필수입니다. 이번 글에서는 자바스크립트 사용법을 다뤄보겠습니다.
- Embed JavaScript
HTML에 JavaScript 코드를 삽입하는 방법에는 두 가지가 있습니다. 먼저 HTML의 93f0f5c25f18dab9d176bd4f6de5d30e 또는 6c04bd5ca3fcae76e30b72ad730ca86d 사이에 스크립트 태그를 배치할 수 있습니다. 즉, 페이지가 로드될 때 코드가 한 번 실행됩니다. 예:
<!DOCTYPE html>
<html>
<head>
<script>
function displayMessage() {
alert("Hello, World!");
}
</script>
</head>
<body>
<button onclick="displayMessage()">Click me!</button>
</body>
</html>위 코드는 간단한 경고 상자를 표시하는 displayMessage()라는 함수를 정의합니다. 사용자가 버튼을 클릭하면 함수가 호출됩니다.
두 번째 방법은 HTML 문서 외부에 JavaScript 파일을 만드는 것입니다. 이렇게 하면 코드가 더 체계화되고 관리하기 쉬워집니다. 외부 스크립트를 사용하려면 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 src 속성을 JavaScript 파일 경로로 설정하세요. 예:
<!DOCTYPE html> <html> <head> <script src="myscript.js"></script> </head> <body> <button onclick="displayMessage()">Click me!</button> </body> </html>
이 예에서 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 < 20); // 逻辑AND运算符（返回true）
위 코드에서는 논리식을 사용하는 방법도 시연했습니다. AND 연산자는 두 표현식을 함께 연결하고 두 표현식이 모두 true인 경우 true를 반환합니다.
- 함수
함수는 JavaScript의 기본 구성 요소 중 하나입니다. 함수는 다른 코드와 함께 사용할 수 있는 재사용 가능한 코드 조각입니다. 함수를 정의하려면 function 키워드를 사용하세요.
function addNumbers(x, y) {
return x + y;
}이 예에서는 두 개의 숫자 매개변수를 받아들이고 그 합계를 반환하는 addNumbers라는 함수를 정의합니다. 함수를 호출하려면 함수 이름 뒤에 괄호를 사용하고 필요한 인수를 전달합니다.
var sum = addNumbers(5, 10); // sum等于15
- Events
이벤트는 JavaScript의 또 다른 중요한 개념입니다. 이벤트는 버튼 클릭, 양식 제출 등 트리거될 수 있는 작업입니다. 이벤트를 처리하려면 이벤트가 발생할 때 호출되는 함수인 이벤트 핸들러를 설정합니다.
<button onclick="displayMessage()">Click me!</button>
위의 예에서는 버튼을 정의하고 버튼을 클릭하면 displayMessage라는 함수를 호출했습니다.
- DOM 연산
마지막으로 JavaScript의 DOM 연산을 살펴보겠습니다. DOM(Document Object Model)은 JavaScript가 웹 페이지의 요소와 속성에 액세스하고 수정할 수 있도록 하는 웹 페이지의 프로그래밍 인터페이스입니다. 예를 들어 요소에 액세스하려면 문서 개체를 사용하고 요소의 ID를 지정합니다.
<p id="myParagraph">This is a paragraph.</p>
위 예에서는 ID가 "myParagraph"인 단락 요소를 정의했습니다. 다음은 JavaScript를 사용하여 콘텐츠를 수정하는 방법에 대한 예입니다.
var paragraph = document.getElementById("myParagraph");
paragraph.innerHTML = "This is a new paragraph.";위 코드에서는 getElementById 메소드를 사용하여 요소를 가져오고 innerHTML 속성을 사용하여 해당 내용을 설정합니다.
요약
JavaScript는 대화형의 동적 웹 페이지를 만드는 데 사용할 수 있는 강력하고 유연한 프로그래밍 언어입니다. 이 문서에서는 변수, 데이터 유형, 연산자, 함수, 이벤트 및 DOM 작업을 포함한 JavaScript의 기본 개념을 소개합니다. 이제 자신만의 JavaScript 코드를 작성할 준비가 되었습니다!
위 내용은 c 자바스크립트 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!