JS를 이용한 이벤트 자바스크립트를 이용하여 HTML의 요소를 조작하여 보다 생동감 넘치는 화면을 만들어 낼 수 있다. Html Grab me! Grab me! Grab me! html 안에 body태그를 살펴보면 div태그를 이용하여 모두가 class는 hello를 가지고 있고 그 안에 있는 h1태크에는 모두 Grab Me!라는 문장이 적혀있다. 이 html코드가 표현된 초기의 모습은 위와 같이 Grab me! 가 3번 적혀있는 화면일 것이다. 이제 JS코드로 한 번 가보자. JS const title = document.querySelector((".hello h1 ")) # hello 클래스안에 h1태그를 지정(선택) function handleTitleClick(){ title.style.colo..
변수는 값을 저장, 유지하는 역할을 해준다고 생각하면 쉽다. 변하지 않는, 바뀌지 않는 값을 저장하고 싶을 때에는 const를 이용하여 저장해주면 된다 const a = 35; a란 변수에 35를 저장해주었다. 이제 이 a란 변수의 35란 값을 변하지 않는다. 수정도 불가능 하다. 변수의 이름을 정할 때에는 const hi jun = 0; 불가능 const hijun = 0; 가능 변수의 이름 중간에는 공백이 들어갈 수 없다. 공백을 표현하기 위해서는 const hi_jun = 0; 이런 식으로 _를 이용해 공백을 표현할 수 있다. 변하는 변수를 사용하고 싶을 때에는 let을 사용하면 된다. let a = 13; console.log(a); 출력 -> 13 a = 12 console.log(a); 출력 ..
JS에서는 여러가지 데이터 타입들을 사용할 수 있다. 숫자 2 #integer 1.5 #float 정수와 실수형이 나뉘어져 있지만 입력 1+3.5 출력 4.5 이런식으로 두 데이터 타입 사이의 계산은 가능하다. 문자열 "Hello" 'Hello' `Hello` 문자열은 위와 같이 표현할 수 있다. 입력 "Hello"+"Wings" 출력 "HelloWings" 이런식으로 문자열끼리의 연산도 가능하다.
써니나타스 7번 문제에 접속해 봅시다. Do u like girls? 라는 텍스트 상자와 두개의 버튼 그리고 아이유의 사진이 나와있습니다. 한번 사이트를 더 살펴봅시다 사이트를 밑으로 내리다 보니 YES라는 버튼이 보입니다. 아무래도 위에서의 Do u like girls?에 대한 답을 의미하는 것 같습니다. 한번 버튼을 눌러보면 Fail..Your too slow.. 실패 너무 느리다.. 라는 문구가 나옵니다 아무래도 이 버튼을 빨리 눌르는게 문제의 해결 방법으로 보여집니다. 한번 소스코드를 살펴봅시다 소스코드를 살펴보니 두개의 form태그가 있는 것을 확인해 볼 수 있습니다. 각각의 form태그를 살펴봅시다. 위에 나타난 form태그는 frn이라는 이름을 가졌고 DO u like girls라는 문구를 ..
suninats 2번 문제에 처음 접속하면 이러한 로그인 화면이 나타납니다 한번 아무런 값을 입력해보고 2번문제가 어떤 식으로 진행되는지 살펴봅시다 입력해보니 다시 원래의 화면으로 돌아옵니다. 한번 사이트의 소스코드를 살펴봅시다. 소스코드를 살펴보니 id와 pw에 입력한 값이 chk_form함수에 들어가 실행되는것으로 보여집니다. id와 pw와 같을 경우 if문이 실행되는 것으로 보여집니다. 한번 둘다 같은 문자열을 넣어 로그인을 해봅시다. 둘 다 같은 값을 넣어보니 이러한 alert창이 나타납니다. 하지만 밑에 나타난 힌트를 보니 id=pw라고 나타나 있습니다. 한번 자바스크립트를 끄고 입력해보겠습니다. 크롬의 자바스크립트 설정 창으로 들어가 자바스크립트를 차단해주고 id와 pw에 같은 값을 입력해주니..
