📚 .getElementByid?
getElementById는 JvaScript에서 사용되는 메서드로, HTML 문서에서
특정 ID를 가진 요소를 찾아 반환하는 역할을 한다. 문서 내에서 특정 ID를 가진 요소를 가져오는 데 사용된다.
| document.getElementById("아이디명") |
한 문장씩 뜯어서 생각해 보면
document - 문서에
getElementById ("myDiv") - 요소의 아이디가 안녕으로 작명된 것을 가져온다.
innerHTML = HTML 문서에서
📌 .getElementById 예시
작성된 코드를 보면 getElemenById를 통해서 안녕하세요 [변경 전] 내용을 안녕하세요 [변경 후]로
변경해서 출력한 것을 확인할 수 있다. text 뿐만 아니라 다양한 style을 적용할 수 있다.
document.getElementById("hello").style.color = "red";- ID "hello" 요소의 글자색을 빨간색으로 변경
document.getElementById("hello").style.fontSize = "16px";- ID "hello" 요소의 글자크기를 16px로 변경
등등 수없이 많은 스타일 변경 가능하다.
버튼 클릭하면 알림 창 출력하기
1. 버튼 클릭 시 나올 박스 생성
2. button onclick을 사용하여 버튼 클릭시 box가 block으로 변경 되게 설정
3. 닫기도 마찬가지로 onclick 사용하여 닫기 버튼 클릭하면 display='block'에서 'none'으로 변경
📚 javascript function
function는 함수라고 함 특정 작업을 수행하도록 설계되며, 호출하여 실행할 수 있다.
📌 function의 기본적인 함수
function greet(name) {
console.log("Hello, " + name + "!");
}- `function` 키워드를 사용하여 함수 선언
- `greet`는 함수의 이름, 괄호 안의 (name)은 매개변수(파라미터)이며, `name`이 정의되어 있음
📌 함수의 호출 방법
greet("Alice");
// 출력: Hello, Alice!- `greet("alice")`와 같이 함수를 호출하면 함수 본문이 실행되고 결과가 출력된다.
- 함수 호출 시에는 매개변수에 해당하는 값을 전달한다.
📌 반환 값
function add(a, b) {
return a + b;
}
let result = add(3, 5);
console.log(result);
// 출력: 8- `return` 키워드를 사용하여 함수의 값을 반환할 수 있다.
- 반환된 값은 함수를 호출한 곳에서 변수에 저장하거나 다른 작업에 활용할 수 있다.
📌 익명 함수와 함수 표현식
let multiply = function(x, y) {
return x * y;
};
console.log(multiply(4, 6));
// 출력: 24- 함수를 변수에 할당하여 익명 함수(anonymous function)또는 함수 표현식으로 만들 수 있다.
📌 화살표 함수 (Arrow Function)
let square = (num) => num * num;
console.log(square(3));
// 출력: 9- 화살표 함수는 간단한 함수를 더 간결하게 표현할 수 있는 방법
위에서 사용한 코드를 function을 사용해서 코드를 변경해 보기
1. function 작성
<script>
function 열기() {
document.getElementById("box").style.display = "block";
}
</script>- function 작성하여 onclick "document.getElemntById("box").style.disple ="block"; 복사해서 function에 넣기
2. 함수 호출
button onclick="열기()"를 통하여 내가 작성한 함수를 호출하기. 끝
'Front-end Developer > Javascript' 카테고리의 다른 글
| Javascript - forEach (0) | 2023.11.28 |
|---|---|
| [Javascript] DOM이란 무엇인가? (0) | 2023.11.05 |
| [Javascript] Javascript란 무엇일까? (0) | 2023.11.03 |
| Javascript -1. 변수 선언 (const, let, var) (0) | 2022.10.07 |
