JiYoung Dev 🖥

jQuery : JS 라이브러리 요소 접근 → $(css선택자) 기능 추가 → .메소드() 내용만 → .text() 태그까지 → .html() 스타일제어 → .css() 한줄씩 입력 $('h1').css('속성1','값1') $('h1').css('속성2','값2') $('h1').css('속성3','값3') chain 방식 $('h1').css('속성1','값1').css('속성2','값2').css('속성3','값3') 객체 방식 $('h1').css({ '속성1' : '값1', '속성2' : '값2', '속성3' : '값3', }) 🎈 동적 이벤트 바인딩 📖 이벤트 바이딩 JS코드와 jQuery코드는 대부분 이벤트(event)에 의해 동작함 이벤트란 대표적으로 클릭, 키보드 입력 등 사..

🎈 CallBack함수 코드를 통해 명시적으로 호출하는 함수가 아니라 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수 (명시적 호출 X) 구조상으로는 함수 안에 파라미터로 함수가 들어가는 구조 Click! 콜백함수 실습 Click! 🎈 JQuery 📖 라이브러리 vs 프레임워크 공통점 : 함수(코드)를 굉장히 많이 모아놓은 것 차이점 : 누가 제어를 하는가? - 라이브러리는 내(개발자)가 주체가 되어 필요한 소스를 가져다 사용하는 것 → 내가 원하는 도구를 선택해서 사용하는 것 (예 : 공구함) - 프레임워크는 주어진 환경 안에서 규칙을 만족시키면서 사용 (예 : 설계도) ⚙️ 라이브러리 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉, 특정 기능을..

🎈 사용자로부터 입력받은 값 가져오기 input, select, textarea 같이 입력받은 값을 가져오기 위해서는 value 속성을 사용해야 함 클릭 innerTEXT로는 값을 받아 올 수 없음 why? innerTEXT는 시작태그와 끝태그 사이의 콘텐츠를 받아오는 것이므로 📖 input 실습 입력한 값을 h1태그로 출력해보기 h1태그 출력 Question. 변수에 .value 속성 추가시 발생하는 문제 입력한 값을 h1태그로 출력해보기 h1태그 출력 let inputVal = document.getElementById('inputTag').value; 위와 같이 변수 지정시 inputVal = ''; 제대로 작동하지 않음 inputVal에 할당된 값은 해당 요소의 현재 값을 복사하는 것입니다. 그러..

🎈 DOM (Document Object Model) HTML 문서의 요소에 접근하여 제어할 수 있도록 객체로 모델링 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 문서 객체 모델(DOM)은 HTML, XML 문서의 프로그래밍 인터페이스임. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 도움. 웹페이지는 일종의 문서(document)임. 이 문서는 웹브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타남. 📖 HTML 문서의 트리구조 Document 객체는 웹 페이지 그 자체를 의미함. 웹 페이지에 존재하는 HTML 요소에 접근하..

🎈 자바스크립트 객체(object) 여러 속성(property)을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입 데이터(속성)과 그 데이터에 관련되는 동작(절차, 방법, 기능)을 모두 포함한 개념 자바스크립트의 기본 타입(data type)은 객체(object) 객체란 이름(name 혹은 key)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합 프로퍼티의 값으로 함수가 올 수 있도 있음 (이를 메소드라고 함) 자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체 📖 객체의 기본 구조 📖 객체의 생성과 접근 및 수정 // 객체 : 여러 데이터를 하나의 변수에 저장할 수 있는 데이터 타입 // 구조 -> {key1 : value1, ke..

🎈 배열 실습 🎈 함수 특정 기능을 수행하는 소스 코드를 하나로 묶어 필요할 때마다 호출하여 사용하기 위한 구조 // 함수 : 특정 기능을 수행하는 소스 코드를 하나로 묶어서 // 필요할 때마다 사용하기 위한 구조 // 함수 선언 function intro() { console.log('안녕하세요. 저는 신지영입니다👩'); } // 함수 호출 intro(); // 매개변수 function lunch(menu) { console.log(`점심으로는 ${menu} 먹었습니다🥰`); } lunch('가츠동'); // 매개변수 + return문 function dinner(menu){ return `저녁으로는 ${menu} 먹을 거에요!😸`; } console.log(dinner('라면')); 위와 같이 함수를..

🎈 자바스크립트 반복문 실습 for문 실습 // 1. 사용자로부터 시작 숫자와 마지막 숫자를 입력 받는다. // 1-1. 입력창을 입력 : prompt ** 리턴타입 String // 1-2. String -> Number : 형변환 // 1-3. 어딘가에 저장 : 변수 let startNum = Number(prompt('시작할 숫자를 입력하시오.')); let endNum = Number(prompt('마지막 숫자를 입력하시오.')); // 2. 시작~마지막 숫자까지의 합을 구한다. let sum = 0; for(let i = startNum ; i > sum 출력 console.log(`${startNum}부터 ${endNum}까지의 합은? >> ${sum}`); while문 실습 자바스크립트에서 ..

🎈 변수 데이터를 저장하는 공간 자바와 달리 자바스크립트는 느슨하게 자료형을 체크한다. → 자바에서는 변수명 앞에 자료형을 작성하여 변수 선언을 하지만 → 자바스크립트에서는 자료형에 관계 없이 변수선언 키워드(let)을 사용하여 변수를 선언한다. 📖 변수 선언 키워드 3가지 ⚙️ var 변수 재선언 가능 변수 재할당 가능 ⚙️ let 변수 재선언 불가능 변수 재할당 가능 ⚙️ const 변수 재선언 불가능 변수 재할당 불가능 // 변수 : 데이터를 담을 공간 let num = 3; // let -> 변수 선언 키워드 // num -> 변수 이름 // 3 -> 변수에 할당된 값 // 재선언 : 같은 변수 이름으로 다시 변수를 선언하는 것 // 재할당 : 선언된 변수에 다시 값을 할당하는 것 // var :..

🎈 JavaScript란? 웹 페이지를 프로그래밍적으로 제어하기 위해서 개발된 언어 객체(object) 기반의 스크립트 언어 HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버측 프로그래밍에서도 사용할 수 있음 🎈 ECMAScript (ES1, 2,... ) 표준화된 스크립트 프로그래밍 언어 자바스크립트를 표준화하기 위해 만들어짐 브라우저에서 동작하는 언어를 만들 때 문법적인 사항들을 정리한 문서 🎈 자바스크립트 작성 방식 웹 브라우저에는 자바스크립트 소스를 읽고 처리하는 해석기(JavaScript Interpreter)가 있음. 따라서 자바스크립트 소스는 웹 문서..

상수(constant) 변하지 않는 변수를 선언할 땐 let 대신 const 사용 const로 선언한 변수를 '상수(constant)'라고 함 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러 발생 상수는 대문자와 밑줄로 구성된 이름으로 명명 제어문 if문 else문은 선택해서 사용 else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행됨 만약 조건이 거짓이고, else문을 쓰지 않는다면 콘솔에 아무것도 표기되지 않음 else if로 복수 조건 처리하기 문제풀이 point 1. 처음 코드 작성시 return 대신 console.log() 사용. 그렇게 할 경우 아래에 undefined 출력됨. result에 반환된 값이 들어가야 하는데 console.log가 들어가 34번 행의 console...