생각기록

혼자 만드는 것보다는 다른사람이 잘 만들어논 것을 이용해 빠르게 조립하는 것이 소프트웨어를 만드는 것의 기본 중 기본이다. 생산자가 되는 방법을 앞에서 배워왓고 다른 사람이 만든 소프트웨어를 부품으로 해 내가 만든 소프트웨어의 생산자가 되는 법 library 도서관, 내가 만들고자 하는 프로그램에 필요한 부품들을 재사용, 정리정돈 되어 쓰기 쉽도록 되어있는 소프트웨어 (우리가 부품을 가져오기) framework 만들고자 하는 것이 있을 때, 무엇이냐? 따라서 그것을 만드려고 할 때 언제나 필요한 공통적인것을 프레임워크가 만들어준다 = 즉 반 제품(우리가 들어가서 작업하는) 일단 둘 다 다른사람과 협력하는 것 library 의 대표적 예 jQuery 사용법 1. CDN, 다운로드 해서 프로젝트에 포함시키기..

가장 큰 정리 도구 = 서로 연관된 파일들을 묶어서 그룹핑 하면, 많은 웹페이지들을 감당 할 수 있다. 스크립 태그를 모든 웹페이지에 배포하면, 동작할 것이다. 하지만, 1억개라면? 어떤 하나의 요소 색상을 yellow로 바꾸고 싶다면? 바로 파일로 쪼개는 방법 1. colors.js 라는 파일을 만든다. 2. colors.js 파일에 모든 웹페이지의 공통된 코드를 스크립태그 제외한 후 복사 붙이기 한다. 3. 공통된 코드를 다른 파일(colors.js 제외한 페이지들)들에서 지우고, 스크립트 태그에 하면 해당 기능이 들어온다. 4. 확인방법 : 검사 에 Network 탭에 이 웹페이지에 로딩하기위한 파일들이 보임 해당 웹페이지랑 colors.js 파일이 보일 것이다. 모든 공통 코드를 이런식으로 재사용..

객체 object 객체라는 도구는 중요하지만, 매우 어렵다. 함수의 기반위에서 객체라는 것이 존재한다. 객체가 갖고 있는 다면적인 얼굴들 중 하나는 하나의 객체 특성, 존재이유, 기능에 집중 해봅시다. ( 아 객체란 이런거구나? ) 객체의 얼굴 하나는 정리 정돈의 수납입니다. 코딩을하면, 정리정돈을 위해 함수를 쓰고, 또 함수가 많아지면 함수 + 연관된 변수들이 또 많아지면, 복잡도의 한계 속에서 서로 연관된 함수, 변수를 그룹핑 하는 = 객체 위의 사진의 중복된 코드를 없애 보자 함수로 독립 ㄱㄱ function setColor(color){ var alist = document.querySelectorAll('a'); var i = 0; while( i < alist.length ){ alist[i]..

배열과 반복문의 활용 콘솔에 찍힌 a태그 배열들을 반복문에 활용해보기 이런식으로 응용이 가능하다 함수 만약 위의 파우더블루가 1억개라면.. 그걸 골라 낼 수 있게 해주는게 함수! 함수로 웹페이지의 크기가 극단적으로 줄어들 수 있다! 밑의 코드 수정 요망! 2 3 4 함수의 이론 기본적 문법 Basic Parameter & Argument Return 항상 극단적으로 생각해라 이 두개의 반복이 1억번 해야 한다면? 그리고 연속적이지 않다면, 반복문은 불가능하다. 그럴 때 필요한게 함수이다. 이것을 반복 하고 싶다. 1. 반복 하고 싶은 것을 보기 2. 이 내용을 함수선언에 넣고, 반복될 부위에 two(); 함수 실행! = 기본 함수 문법 function Basic Parameter & Argument Re..

반복문 링크가 밝을 경우에는 어두운 컬러로 어두운 경우엔 밝게 var links = document.querySelectorAll('a'); 이 웹페이지. 모든 태그 선택 var i = 0; while( i apple index라고 함 *0부터 시작 / 첫 번째는 0임! index 0번은 사과 index 1번은 바나나 또 들어있는 물건은 몇개인가? document.write( fruits. length ); . length 갯수 값이 2개 라면, 2 데이터를 추가하는 방법은? document.write(fruits.push( " kiwi " )); .push 추가 데이터를 끝에 추가 javascript array 검색해서 여러 기능을 이용해 배열 수납상자 데이터를 넣고 빼고 몇개인지, 어떤 작업을 할지 ..

웹브라우저 제어 html은 한번 바뀌면, 자기 스스로 바꿀 능력이 없는 정적언어 그것을 js로 동적으로 제어 해준다. 바디태그에 스타일 속성을 주기 위해서는 이 속성을 주고자 하는 태그가 누구인가를 알려주는 자바스크립트 문법 1.css 본질적 문법 바꾸고싶은 태그에 style 써주기 javascript 속성(프로퍼티) 2. 자바스크립트를 이용해 제어하고자 하는 태그를 선택하는 법 css 강의 아무런 기능도 없는 무색 무취의 태그 css, js통해 정보를 제어 하고 싶을 때 사용하는 태그 전체를 차지하기 때문에 자동 줄바꿈 전체를 쓰지않는 태그 하나의 태그가 1억개라면? 이것을 변경하기 위해 필요한 것이 선택자 선택자 = 누구에게 적용할 것인지 타겟팅!! js { } js라는 이름의 태그 .js { } 클..

웹화면, 우클릭 > 검사 Elements = 태그 input type = "button" value="night" onclick=" document.querySeletor('body').style.backgroundColor='black'; document.querySeletor('body').style.Color='white'; 버튼 타입인 버튼이름값이 night인 onclick이라는 속성의 값은 JavaScript가 와야한다. 사용자가 onclick속성이 위치한 버튼을 클릭했을 때, 이 js코드를 실행시킬 것 document.querySeletor('body').style.backgroundColor='black'; document. 해당 웹문서 ('body') 바디태그 = 화면 전체 .style. ..

실습 21. 전체 실습 2022년 11월 조건 조건 1. 배우지 않은 Javascript 라이브러리 사용하기 Ex) Sweetalert, Chart.js, Scroll, Fullpage 등등 조건 2. Bootstrap Component 또는 Utility 5개 이상 사용하기 조건 3. 반응형 페이지로 만들기 Navbar 가운데 정렬하는 법 https://mdbootstrap.com/how-to/bootstrap/navbar-center/ How to center Bootstrap Navbar - code helpers To center the Navbar horizontally use flexbox utilities. Add .justify-content-center classes to the Navb..