누렁이의 명예의전당

자바(Java)랑 자바스크립트(JavaScript)는 이름이 비슷해서 헷갈리기 쉬운데, 사실 완전히 다른 프로그래밍 언어야! 간단히 비교해볼게.🟡 기본 개념Java: 일반적으로 서버 측(back-end) 애플리케이션, 데스크톱 애플리케이션, 안드로이드 앱 개발에 많이 사용돼. 컴파일된 코드를 JVM(Java Virtual Machine)에서 실행해.JavaScript: 주로 웹사이트의 프론트엔드(front-end) 개발에 사용돼. 최근엔 Node.js 덕분에 서버 측(back-end)에서도 사용 가능해. 브라우저에서 바로 실행돼.🟡 컴파일 vs. 인터프리터Java: 코드를 작성하면 컴파일러가 바이트코드로 변환하고, JVM이 이걸 실행해. (컴파일 언어)JavaScript: 브라우저나 Node.js에서..

position : sticky  (Edge 이상에서 사용가능)스크롤이 되었을 때 화면에 고정되는 요소를 만들고 싶을 때 사용할 수 있는 CSS 속성입니다.position : fixed 는 항상 화면에 고정이 되는 요소를 만들 때 사용한다고 배웠었는데 이거랑 뭔 차이가 있냐면,position : sticky 는 스크롤이 되어서 이 요소가 화면에 나오면 고정시킨다는 특성이 있습니다.한번 위의 예제를 만들어보도록 합시다.    Meet the first Triple Camera System .grey { background: lightgrey; height: 2000px; margin-top: 500px;}.text { float: left; width : 300px;}.i..

숙제1. 구매버튼누르면 상품명을 localStorage에 저장일단 카드레이아웃 생성하는 코드에 구매 이거 추가해놨습니다.이 버튼 누르면 버튼 위에 있던 상품제목을 가져와서 array형식으로 저장해봅시다.   products.forEach(function(a, i){ (생략) ${products[i].title} 가격 : ${products[i].price} 구매});$('.buy').click(function(){ var title = $(e.target).siblings('h5').text(); console.log(title)});그래서 구매버튼에 이벤트리스너를 붙여봤습니다.누르면 일단 위에 있는 가격도 출력해보라고 코드짜봤습니다.jQuery함수인 .siblings() 는 내 형제요소를 찾..

실제 서비스였으면 서버로 보내서 DB 이런데 저장하는게 좋겠지만서버같은게 없기 때문에 브라우저 저장공간을 이용해봅시다.   브라우저 저장공간이 여러개 있는데 크롬 개발자도구의 Application 탭 들어가보면 구경가능합니다. Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능)Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능)Cookies (유저 로그인정보 저장공간)Cache Storage (html css js img 파일 저장해두는 공간)골라쓰면 되는데 우린 범용적으로 쓸 수 있는 Local Storage를 써봅시다. Local Storage / Session Storage 는 문자, 숫자만 key : value 형태..

1. DOM ( Document Object Model )이라는 말이 자주 등장합니다. DOM이라는 용어를 남용하는데 그게 뭔지 알아봅시다. 자바스크립트는 HTML 조작에 특화된 언어입니다그런데 자바스크립트가 어떻게 HTML을 조작할 수 있는지 원리를 생각해본 적이 있습니까. 생각해보면 HTML과 자바스크립트는 다른 언어입니다.그래서 자바스크립트에선 이런 html을 직접 해석하고 조작할 수 없습니다.  자바스크립트는 이런건 못알아듣습니다.그런데 어떻게 HTML 태그들을 알아보고 조작할 수 있는 것일까요?  자바스크립트가 HTML 조작을 하기 위해선 HTML을 자바스크립트가 해석할 수 있는 문법으로 변환해놓면 됩니다.HTML을 자바스크립트가 좋아하는 array 혹은 object 자료형에 담아버리는게 좋..

Q. Array에서 철수라는 자료를 찾고 싶습니다 array에서 이름을 찾아주는 함수를 만들고 있습니다.함수 안에 파라미터로 이름을 집어넣으면그 이름이 출석부에 있으면 콘솔창에 출력해주는 함수를 만들어봅시다. 어떻게 만들면 될까요?    var 출석부 = ['흥민', '영희', '철수', '재석'];function 이름찾기(){ //여기다 코드 짜십쇼 } 동작 예시 :이름찾기('철수'); 라고 쓰면 콘솔창에 '있어요'라는 글자가 떠야합니다.이름찾기('명수'); 라고 쓰면 콘솔창에 아무 글자도 뜨지 않아야합니다. (조건) 이상한데서 찾아온 find, indexOf 같은 자바스크립트 기본함수들 사용금지  컴퓨터야 array안에 파라미터가 들어있는지 찾아봐~ 라고 명령을 한 번에 주면 어려워합니다.  "지금..

맨 위에 pants 라는 변수를 하나 만들고 서버에서 보낸데이터라고 가정해봅시다.pants 데이터 갯수만큼 을 생성하고싶으면 어떻게 해야할까요? 반복문 쓰면 될 것 같은데요    ▲ 반복문 쓰면 해결될듯요 pants.length 만큼 반복해달라고 하면 됩니다.근데 이거보다 조금 더 쉬운 반복문을 알아봅시다.  forEach 반복문  array 자료 뒤에 붙일 수 있는 forEach() 라는 기본함수가 있습니다.  var pants = [28, 30, 32];pants.forEach(function(){ console.log('안녕')});이렇게 쓰면 pants 안의 데이터 갯수만큼forEach 콜백함수 안에 있는 코드가 실행됩니다.3번 실행될듯요 그래서 array 자료 다룰 때 for 반복문 쓰기 귀찮..

코드의 확장성을 위해 html을 생성해야한다. 셔츠사이즈를 95, 100 이라고 하드코딩해놓고 보여주기만 하기 때문입니다.실제 쇼핑몰이라면 셔츠 사이즈가 매일매일 바뀔 것인데 이럴 경우 서버에서 보낸 데이터 갯수에 맞게 태그를 생성해줘야 좋을듯요  html 생성하는 법 1  안에 태그를 생성하려면   이러면 생성됩니다. 개발자도구 까보면 div 안에 p태그가 생성되어있습니다. - document.createElement() 쓰면 html 자료를 하나 생성해줍니다.- 그걸 맘대로 조작한 다음 appendChild() 써서 아무데나 넣으면 html이 생성됩니다.  html 생성하는 법 2   이래도 생성됩니다.- 문자자료로 html을 만든 다음 - insertAdjacentHTML() 안에 넣으면 됩..

select 들어간 폼을 만들어봅시다  Bootstrap이 설치되어있으면 이쁘게 나옴  상품선택 모자 셔츠 는 이랑 똑같은데사용자가 고를 수 있는 선택지를 드랍다운 메뉴로 제공하는 입니다. 선택지는 으로 넣으면 됩니다.  - 태그도 선택시 input, change 이벤트가 발생합니다. - 태그도 .value로 유저가 입력한 값을 가져올 수 있습니다.   셔츠고르면 밑에 더 보여주기    html css로 미리 디자인해놓고 원할 때 보여주기만 하면 됩니다.  상품선택 모자 셔츠 95 100  미리 하나 더 추가했고 form-hide 클래스에는 display : none 주었습니다. 이제 "유..

Card title 가격 : 70000 주문하기 Card title 가격 : 70000 주문하기 Card title 가격 : 70000 주문하기 var products = [ { id : 0, price : 70000, title : 'Blossom Dress' }, { id : ..