본문 바로가기

javascript, framework

 (68)
Step01_example1 2 (querySelector) Step01_example 에서 연습한 예제를 확장시켰다. 2022.07.06 - [javascript] - Step01_example (javascript에서 태그 접근하기) 해당 모든 데이터를 array type으로 출력해주는 querySelectorALL과 다르게 querySelector는 첫번째에 있는 한개의 데이터만 출력해준다. 다음은 배운 것을 활용한 예제이다. 버튼을 누르면 텍스트가 변경되도록 작성하였다.
Step01_example1 (javascript에서 태그 접근하기) html, head, meta, title, body, p 등의 태그는 object type 형식을 띄고 있다. javascript로 특정 p태그에 접근해보기 앞서 배웠듯이 document.querySelectorAll("p") 에서 document는 뒤에 .이 있기에 object type, document.querySelectorAll은 뒤에 ()이 오기에 function type인 것을 알 수 있다. 이후 NodeList(5) [p, p, p, p, p] 정보에 []를 보면 document.querySelectorAll("p")은 array type이다. 이후 출력되는 값이 p태그 이기 때문에 object type 뒤에 작성하는 .을 입력하고 innerText를 통해 해당 string type 문자를..
Step01_dataType11 (confirm, prompt, if ) alert 빌트인 함수는 기존에 배웠듯이 팝업창을 실행시켜주는 빌트인 함수이다. confirm이라는 모양새가 비슷한 빌트인 함수도 존재하는데 가장 큰 차이는 취소버튼이 추가된 것과 출력값이 boolean type으로 출력되는 것이다. prompt라는 빌트인 함수도 존재한다. 사용자로부터 입력값을 받아 문자열로 출력해준다. 숫자도 문자열로 입력되는 것을 확인할 수 있다. 확인만 눌러도 공란의 문자열이 출력되고 취소를 누르면 null이 출력된다. confirm 빌트인 함수를 활용하여 삭제버튼을 만들었다. 이후 if 함수를 활용하여 isDelete 함수가 true로 나올시 "삭제합니다"가 기록되는 기능을 추가하였다. false일 경우 넘어간다. console 기능, break point, scope 기능을 활..
Step01_dataType10 2 (type 복습, 참조 데이터) 1. number type let 변수명=숫자; 2. string type let 변수명="문자"; 3. boolean type let 변수명=true; let 변수명=false; 4. object type - 여러가지 타입을 묶어서 사용할때 사용한다. let 변수명={key:value, key2:value2, key3:value3}; 5. array type - 순서가 중요할때 사용한다. 순서가 0부터 시작한다. let 변수명=[key:value, key2:value2, key3:value3]; 6. function type 1. let 변수명=function(){}; 2. function 변수명(){} 3. let 변수명=()=>{} 2번 형식은 로드시 실행된다. 7. function type과 매개..
Step01_dataType10 (매개 변수, 연결연산) 함수에 매개변수를 미리 정해놓고 대입값을 매개변수에 적용할 수 있다. 물론 매개변수는 설정한 함수에서만 사용 가능하다. 10과 hello를 검색하여 매개변수에 대입한 예시이다. let을 활용하여 만든 변수명을 매개변수에 대입할 수도 있다. 1+1 은 산술연산이며 "김구라"+1, "김구라"+"해골" 연결연산이다. 연결연산을 활용하여 다음과 같은 숫자와 글자가 섞인 문장으로 출력도 가능하다. 변수명을 활용하여 매개변수에 값을 대입하는 것도 가능하다.
Step01_dataType9 (return, type 유추) 각각의 함수 안에 let을 활용하여 object 혹은 array 함수로 일련의 정보를 입력해놓고 return으로 이동시켜 값을 출력할 수 있도록 작성했다. 예시에서 getData() 는 object type 형식으로, getFriends()는 array type으로 입력해놓았기 때문에 abject type, array type 활용하는 것과 같이 사용이 가능하다. 위 사진은 그 예시이다. type 유추 예시 자바스크립트를 사용하여 html 특정부분에 접근하고 변경시키는 것이 가능하다.
Step01_dataType7,8 (function, return, sources) 함수 만드는 3가지 방법을 소개한다. 방식에 차이가 있다. 첫번재와 세번째 방식인 f1과 f3 함수는 let을 이용하여 함수를 준비해놓고 호출시키지는 않은 상태라고 볼 수 있고 두번째 방식인 f2 함수는 준비도 되어있지만 업로드시 호출된다. 함수를 호출하는 목적은 크게 두가지가 있다. 1. 어떤 동작을 하기 위해 2. 어떤 값을 받아오기 위해 예제의 pushMonkey는 동작은 하지만 값은 undefined가 나오듯이 결과값이 나오지는 않는다. 반면에 getFortune은 let과 return을 활용하여 결과값이 나오게 설정하였다. 위의 html을 실행시키면 위 사진과 같은 console창이 실행된다. sources 창을 키고 breakpoints를 만든 다음에 javascript를 한칸씩 넘겨가며 진행..
Step01_dataType6 (function type, ==) function type은 data를 준비해놓아야할 경우 사용한다. function type은 function(){} 형식으로 작성한다. 기존에 배웠던 console.log() (페이지 로딩시에 결과 값을 출력시켜 주는 함수) 를 활용하여 f1이라는 함수를 만들어봤다.. 다른 타입은 값을 참조하는 기능만 있는 반면 function type은 참조와 호출이 모두 가능하다. 기존에 배웠던 alert 같은 함수는 빌트인 함수 (미리 제작되어 기본제공해주는 함수) 라고 한다. 빌트인 함수도 필요하다면 변경, 활용하는 것이 가능하다. button onclick과 f1()함수를 연결시켜서 버튼을 누를때마다 "하나 두울 세엣" 정보가 찍히게 만들어봤다. == 이해하기 number, string, boolean typ..

티스토리툴바