728x90

Coding/Javascript 6

addEventListener 이벤트리스너 ('click' 사용해보기)

document.getElementById('close').addEventListener('click', function(){ }); => 해석 : getElementById안의 요소가 클릭되면 괄호 안의 코드 실행시킨다 +여기서 'click'을 event라고 한다. Alert 박스 X 버튼1 버튼2 function 알림창1열기(구멍) { document.getElementById('title').innerHTML= 구멍; document.getElementById('alert').style.display = 'block'; } document.getElementById('close').addEventListener('click', function(){ document.getElementById('ale..

Coding/Javascript 2024.03.03

alert박스와 function()함수 콜라보

목표 -버튼1 / 버튼2 를 누르면 각 '아이디입력해라' / '비번입력해라' 가 적힌 alert 박스가 나오게 하기 코드 Alert 박스 버튼1 버튼2 function 알림창1열기(구멍) { document.getElementById('title').innerHTML= 구멍; document.getElementById('alert').style.display = 'block'; } => button onClick="" 안에 function함수를 넣는다. function() 의 () 안의 파라미터를 입력하여 편리하게 코드를 작성한다. 1. '알림창1열기'라는 function함수를 만들어서 식을 넣는다. document.getElementById('id명').innerHTML => 요소에 포함된 HTML을 ..

Coding/Javascript 2024.03.03

function 함수

function함수는 왜 사용하는가? -긴 코드를 깔끔하게 한 단어로 축약하여 사용 가능 function hi() { 코드 } => 이런식으로 사용. hi 위치에 들어갈 함수명은 알아서 지정한다. (하지만 코드 내용을 연상시킬 수 있으면 좋음) 예제 function openBox() { document.getElementById('hello').style.display = 'block'; } 이런식으로 openBox라는 함수가 있다고 하자. 그럼 openBox(); 라고 하면 자동으로 내부 코드가 재생된다.

Coding/Javascript 2024.03.01

Alert 창 만들기

Window.alert() -확인 버튼을 가지며 메시지를 지정할 수 있는 경고 대화 상자를 띄우는 메서드 구문 -window.alert([message]); Alert UI만드는 법 - 미리 디자인 해놓고 숨김(display:none) - css로 - 버튼 누르면 보여줌 (버튼 누를 시 display:block 으로 바뀌게 함) 예제1 Hello box 버튼 => id가 hello인 요소 가져와서 display 속성을 block으로 변경 예제2 닫기 버튼 => 닫기 버튼 만들기

Coding/Javascript 2024.03.01

ES5/ES6 차이

ES5 -오른쪽값을 변수공간(=저장공간)에 "대입연산자"로 하여 초기화 -var은 변수선언 전에 사용이 가능한 문제가 있음(변수호이스팅) + 호이스팅 : 인터프리터가 코드를 실행하기 전에 함수,변수,클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상 (메모리 공간을 선언하기 전에 미리 할당하는 것) -var없이도 변수선언이 가능하며 전역에 생성됨 -반복문에서 변수선언시 전역변수가 만들어짐 -var 함수스코프이므로 함수내부가 아닐 경우 전역변수가 되어버림 for (var i = 0; i

Coding/Javascript 2024.03.01