JS (11) 썸네일형 리스트형 2022-12-02 [새싹 프론트엔드] 끌어올리기 키 값 addDate ={addDateaction}키에 값을 넣어서 넘겨야한다. 새싹 DT 기업연계형 프론트엔드 실무 프로젝트 7주차 블로그 포스팅 [2022-11-21]새싹 프론트엔드 Event 이벤트 캡처링, 버블링, 타켓 캡처링이란? 이벤트가 자식(하위)요소로 전달되는 것 캡쳐링 효과를 사용한 부모요소 이벤트 자식에게 상속 위임 부모요소에만 이벤트를 걸어줘도 자식 요소가 그 값을 상속받는다. 버블링이란? 이벤트가 부모(상위) 요소로 전파되는 것 자식요소 이벤트의 상속과는 다르다. 자식요소의 이벤트가 작동하면 부모의 이벤트도 작동되는 것 버블링 효과로인하여 div.first가 부모요소임에도 자식요소의 click이벤트가 발생하면 부모인 div.first 도 작동된다. div.third 작동 -> div.second -> div.first 순서로 작동되며 거꾸로 작동시키고싶을떄 캡처링을 사용한다. div.first -> div.second -> div.third 순서변경가능(캡처링 사용) 버블링 효과 예시 버블링 -> 캡처링변.. [2022-11-17] break, continue 반복문 break 보통 무한 반복을 빠져나가기 위하여 사용한다. 어떤 조건식이 만족되면 더이상 반복문이 필요없고 식을 종료하고 싶은 부분에 break를 넣어준다 조건식(조건만족 ){ 행동한 후 break; } 조건식(true) - 조건식의 조건이 만족하면 break가 걸리고 다음이 true여도 작동하지않고다음식이 작동한다. 다음식 작동 //isNaN을 사용하여 숫자걸러주기 do { let input = prompt("암호를 대라"); if (!isNaN(input)) { alert("문자열로만 입력해주세요"); } else if (input != "you") { alert("오답입니다"); } else if (input == "you") { // input==you일떄 해당조건식의 문을 열고 들어와서 alert.. [2022-11-16] 이벤트 리스너 Event Listener 이벤트란? 사용자가 클릭,입력등 행위나 브라우저 상태변화에 따라 JS코드에게 알리는 행동 이벤트 리스너(Event Listener)란? 이벤트 발생에 대처하기위해 작성된 JS코드 이벤트 종류 - HTML5에서 이벤트 종류는 70 여개 - 이벤트 리스너 이름은 이벤트 이름 앞에 "on" 을 붙인다 화살표함수쓰지말기 this를 쓰면 해당DOM객체가 아니라 window그 자체가 선택된다 주요 이벤트 리스너 == 메소드() 괄호안에 2개의 인자값이 들어와야한다. 이벤트명 : Javascript에서 발생할 수 있는 이벤트 명을 입력한다. 함수명 : 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수 명을 입력한다. 옵션: 옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한.. [2022-11-13] HTML DOM이란? DOM객체선택 컴퓨터는 코드를 위에서 부터 읽어 내려와 화면에 송출하게 되는데 이것을 렌더링이라고 한다. JS,CSS를 통하여 html 문서를 추가하고 수정하고 이벤트 처리를 하기 위해서는 html의 태그들이 필요한데 DOM이 트리 형태로 객체를 구조화하고, 부모,자식화를 해놓았기 때문에 태그들을 선택하는게 가능한것이다. DOM 이 없다면 HTML로 이뤄진 정적인 사이트가 되지만 DOM이 루트(뿌리)에서 부터 태그들을 뿌려주기 떄문에 동적인 사이트로 변할 수 있는것이다. 새싹 DT 기업연계형 프론트엔드 실무 프로젝트 5주차 블로그 포스팅 [2022-11-09 새싹 프론트엔드] class 2022-11-09 공부내용 class란? class사용이유 프로토타입이란? 생성자함수란? .this 키워드란? class를 사용하는 이유 프로토타입이란(prototype)? new 연산자를 사용하여 생성자함수의 값을 가져오게되면 같은값을 여러번 자식들에게 뿌려주게된다. 이때 여러번 같은 값을 뿌려주게되면 데이터가 낭비되게 되는데 JS는 생성자 함수안에 값을 어딘가 빈공간에 그 값을 저장해놓고 new 연산자를 사용한 자식에겐 공간안에 있는 값을 공유해준다. 이것을 가능하게 하는것이 프로토타입 생성자함수를 통하여 생성한 인스턴스들은 프로토타입이라는 속성을 상속받게된다. 생성자 함수를 사용하면 아래처럼 porototype이라는 속성값을 따로 줘서 프로토타입에 저장시켜야하지만 class를 사용하면 알아서 pr.. [2022-11-08 새싹 프론트엔드] 함수 2022-11-08 강의 내용 함수 다이얼로그 화살표함수 함수란? 코드의 집합, 특정 작업을 할수 있도록 설계된 코드블록{} 함수는 선언하는 부분과 호출하는 부분으로 나뉜다. 누군가 함수를 호출할때 실행된다. 문을 쓰고 블록으로 감싸서 실행하는 것 함수를 사용하는이유 명령이 필요할 때와 필요없을때 필요에 따라서 적합하게 사용하기위해 함수 선언과 함수호출 부분이 나눠져있는것이다. *블록 {중괄호} 안에 둘러쌓인 부분 함수의 선언과 호출 매개변수와 리턴키워드 변수식 함수선언 내장함수 즉시호출함수 매개변수(Parameter) 사용자가 어떤 값을 사용할지 모르기 떄문에 미지의수를 사용한다. 인수를 받기위해서 임의의 변수이름을 지어준부분 내장함수 alert () 함수처험 자바스크립트가 미리 만들어놓은 함수 인수 .. [2022-11-07 새싹 프론트엔드] 객체 2022-11-07 강의내용 객체 내장 객체 사전적 의미 실세계에 존재하는 대상 또는 생각할 수 있는 어떠한 개념 자바스크립트에게 객체란? 어떤 ㅅ가물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단. 자바스크립트 코드 내에서 객체란 '값 또는 기능을 가지고 있는 데이터'이다 메소드와 함수 의 차이점 함수가 메소드를 아우르는 포괄적인 용어이다. 함수는 객체로부터 독립적이며, 메소드는 객체에 종속적이다. 메소드는 거의 모든 면에서 함수와 동일하지만, 아래의 2가지 포인트에서 다른 점이 있다. 메소드는 호출된 객체에 암시적으로 전달된다. 메소드는 클래스 안에 있는 data를 조작할 수 있다. 기본적으로 두 용어의 뜻은 동일하나 '객체(클래스)로부터 독립적인가 아닌가'가 함수와 메소드를 나누는 .. 2022-11-02 새싹 프론트엔드] 배열 배열 관련있는 데이터들을 하나로 묶어서 하나의 변수 아래에 한줄로 저장하는 것 여러개의 데이터를 하나의 변수에 담고 싶을 때 사용한다. 변수는 하나의 값만 넣을 수 있지만 배열은 여러가지의 변수를 넣을 수 있다. 변수에 들어갈 수 있는 하나의 값 변수안에 아이템이 들어갈 때 마다 자동으로 번호를 붙여준다, 이를 인덱스라 칭한다. 1000가지의 값을 모두 let로 하나하나 지정할 수 없을 때 사용함 호출시에는 변수명만 써주면 된다. 여러개의 변수값중 하나만 호출도 가능 인덱스 배열에 들어가 있는 아이템에는 모두 인덱스 번호가 부여된다. 번호는 0부터 부여된다. 인덱스 번호로 배열에 있는 아이템들을 접근할 수 있다. 위의 값에서 banana의 값만 가져오고 싶을때 let fruit = ["banana","a.. 2022-11-01 [새싹 프론트엔드] 조건문과 반복문 2022-11-01 강의내용 조건문 (switch, 삼항연산자, 짧은 조건문 삼항연산자와 switch문 if 문 else 문 ) 반복문 ( for문, while문, do while문, 중첩 for문 ) 조건문을 쓰는 이유 어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야 합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이처럼 어떠한 조건의 결과에서 도출되는 값을 원할때 조건문을 사용한다. switch 문 삼항연산자 짧은 조건문 조건문에는 if 뿐아니라 switch, 삼항연산자, 짧은조건문 등이 조건문으로 있다. 조건문이 여러개인 이유는 한국어에도 어머니=엄마, mo.. 이전 1 2 다음
