SOCO

1. form 태그 button이 달린 input 태그는 form으로 감싸주는 것이 추세라고 한다. 확인 이 경우 input 태그에 바로 이벤트를 다는 것이 아니라 form 태그에 이벤트를 달아준다. 2. submit 이벤트 (1) form안에 있는 button을 누르면 submit이벤트가 호출된다. 확인 (2) event.preventDefault() : 기본동작 막기 submit 이벤트는 호출되는 경우 페이지가 새로고침된다. 확인 (3)event.target[index] : form안에 있는 태그들을 개별적으로 부르는 방법 확인 event.target[0]는 event가 target하는 form 태그의 첫번째 태그인 input 태그를 의미한다. (4) 추가 : submit은 모든 버튼에 다 적용됨 f..

1. document.querySelector(' ') 와 textContent, value (1) JavaScript에서 태그 선택하기 cf. CSS설명도 함께 확장자를 .html로 한 상태에서 CSS와 JavaScript를 쓰는 경우 CSS는 안에 넣고 JavaScript는 (2)textContent, value textContent와 value 태그의 내부값을 나타낸다. 버튼 버튼 2. document.querySelector(' ') + innerHTML innerHTML은 HTML 태그가 나오는 경우 이를 태그로 인식해서 반영한다 document.createTextNode(' ')는 따옴표 안의 내용을 text로 인식하고 document.createElement(' ')는 따옴표 안의 내용을 태..

1. readonly : 읽기 전용 2. input type input과 input type="text"의 차이가 무엇일까? 웹 상으로는 똑같이 구현되는 것 같은데.... 3. box넓이 설정시 border을 기준으로 *{box-sizing : border-box} 4. 불리언으로 형 변환시 false가 되는 data 0, NaN, undefined, null, '' => if문의 조건식 작성시 유용함 왜냐면 if문의 경우 조건식이 true일 때 실행되기 때문이다! 5. value, textContent tag의 내용값을 불러올 때! document.querySelector('input').value document.querySelector('button').textContent 6. 형변환 consol..

예시. function test() { let result =''; if (a) { if(!b) { result='c'; } } else{ result='a'; } result +='b'; return result; } 함수해석 1단계 result라는 변수를 undefined로 먼저 설정! 2단계 case1. a가 참이면, b가 거짓일 때 : result변수는 'c'가 되고, case2. a가 참인데 b가 참일 때 : result 변수는 여전히 비어있고, case3. a가 참이 아닐 때 : result변수는 'a'가 된다. 3단계 case1. result= 'cb' case2. result= 'b' case3. result= 'ab' ---------------------------- if문 중복 줄이기..

1. 생활코딩 web2 강의 버튼을 클릭하시오 2. 제로초 자바스크립트 2021강의 버튼을 클릭하시오 버튼 고차함수로 설정하지 않으면 웹페이지를 열자마자 글자가 빨간색이 되는데... return값이 뭐길래 그런걸까? 방식1은 함수호출로 바로 해도 괜찮은데, 방식2는 그렇지 않은 이유가 무엇일까?

1. console.log console.log( ) => console창에 괄호 안의 내용을 '그려라'는 뜻이다. 반환값은 undefined이다. console.log('안녕'+3) console.log('안녕',3) console.log에는 +와 ,를 사용할 수 있다. 내가 발견한 차이점은 우선 +를 하는 경우에는 안녕3으로 나타나지만, ,를 하는 경우에는 안녕 3으로 나타난다. 또한 +의 경우 3이 검은색으로 나타나지만 ,를 하는 경우 3이 파란색으로 나타난다. console.log('3') console.log(3) 문자열 3의 경우 검은색으로 나타나고, 숫자 3의 경우 파란색으로 나타나는 걸 확인했는데, 아마도 +를 사용하는 경우에는 문자열로 타입이 변환되지만, ,를 사용하는 경우에는 타입이 그..

1. console.log console.log( ) => console창에 괄호 안의 내용을 '그려라'는 뜻이다. 반환값은 undefined이다. console.log('안녕'+3) console.log('안녕',3) console.log에는 +와 ,를 사용할 수 있다. 내가 발견한 차이점은 우선 +를 하는 경우에는 안녕3으로 나타나지만, ,를 하는 경우에는 안녕 3으로 나타난다. 또한 +의 경우 3이 검은색으로 나타나지만 ,를 하는 경우 3이 파란색으로 나타난다. console.log('3') console.log(3) 문자열 3의 경우 검은색으로 나타나고, 숫자 3의 경우 파란색으로 나타나는 걸 확인했는데, 아마도 +를 사용하는 경우에는 문자열로 타입이 변환되지만, ,를 사용하는 경우에는 타입이 그..

끝말잇기 코딩을 위해 필요한 개념 1. prompt, confirm, alert 처음 웹 페이지 입장 시 창이 뜨는 경우는 3가지로 나눠볼 수 있다. 1) prompt : 입력값을 받는 경우 prompt("몇 명이 참가하나요?") 2) confirm : 예, 아니오로 대답하는 경우 confrim("x명이 참가하나요?") 3) alert : 확인으로만 대답하는 경우 alert("끝말잇기 게임입니다") 2. Number, ParseInt, ParseFloat data type이 숫자가 아닌 것을 숫자로 바꾸는 역할을 한다 ParseInt는 정수로만 바꾼다. ParseInt는 해당 문자열에 있는 정수를 뽑아낼 수 있다. console.log(ParseInt('3월')) 3 console.log(Number('..

1. 테두리를 만들고 싶을 때 쓰는 속성인 border!! width, style, color를 모두 한 번에 적을 수 있는데 중요한 건 쉼표를 넣으면 안 된다는 것이다... 이걸 발견한다고 얼마나 많은 시간을 썼던지.. 이렇게 하면 적용이 안 된다.... 그리고 style에 대한 정보는 꼭 넣어줘야 실행된다. 두께나 색에 대한 정보는 없어도 작동하는데 solid가 없으니까 작동하지 않았다... (이건 심심해서 이렇게 저렇게 해보다가 발견...!) 2. 위, 아래, 왼쪽, 오른쪽 테두리를 설정할 때 border-top이렇게 작성해야 한다 border - top이렇게 작성하면 안 된다...! 띄워쓰기 하지 말 것! 3. heading에 테두리를 설정하고, 그 옆에 버튼을 두고 싶은데 어떻게 해야할지 고민을..

생활코딩 강의 web2 javascript 복습 포스팅입니다. 제가 이해한 대로 정리하는 것이니 틀린 부분이 있을 수 있습니다! 댓글로 알려주시면 수정하도록 하겠습니다 :) 항상 열심히 배우겠습니다 JavaScript -> 사용자와의 상호작용이 가능함 -> 동적임 HTML CSS JavaScript 컴퓨터 언어 O O O 컴퓨터 프로그래밍 언어 X X O 확장자 .html .css .js CSS가 아래와 같은 코드로 반복, 중복을 피할 수 있듯이 JavaScript도 아래의 코드를 활용하여 중복을 피할 수 있다 코드를 짤 때는 중복을 피하는 것이 중요하다고 한다!!!! 본격적으로 JS에 대한 내용을 개괄해보자! 1. JS를 이용하는 방법 (1) 각 방법에 대한 소개는 밑에서 자세하게! 2. (1)웹 페이..