지노스_ZNOS

1. 이름을 입력하면 아래 나오게 하기 위를 위해선 다음의 순서를 따르면 된다. 1) 에 input box 만들기(id 만들기) → id는 input-name이고, text를 넣는 형식에, 비어있으면 "여기에 이름을 입력"이라고 표시해라 2) 에 이름붙이기 버튼 만들기(onclick 함수) 이름 붙이기 → showName이라는 이름을 가진 onclick 함수를 만들고, "이름 붙이기"이라고 표시해라 3) 에 이름붙이기 function 만들기( 처음에 만들어도 된다) function showName() { let newName = $('#input-name').val(); → input-name id 값 가져오기(val함수) if (newName == '') { alert('이름을 입력하세요'); retu..

큰일이다... 내가 지금 배우고 있는 스파르타코딩 수업은 총 8주에 걸쳐 진행이 되는 수업이고, 5주차 부터는 개인 프로젝트를 진행해야 한다(물론 어려운 난이도를 하지는 못한다)그럼에도 정말 아무것도 모르고 시작한 코딩이기 때문에 복습을 하는데도 엄청 시간이 오래 걸린다. 이 전 포스팅이 JQuery에 관한 포스팅인데, 2주차 중반 과정이다. 이미 수업은 5주차 후반부를 나가서 프로젝트를 블로그에 올려 설명을 해야한다(안돼...수업 속도를 못따라가겠어)처음에 의욕을 가지고 13페이지의 PPT 기획안을 제출했는데 불가하다고 판정받았다. 내 수준에선 회원가입을 받는거는 사치였다... 그러므로 그냥 내가 사용할 수 있는 수준의 앱을 만들고 익숙해지면 초기 계획대로 만들어서 구글플레이에 업로드 하는 것을 목표로..

나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅 박스 열기 아티클 URL 간단 코멘트 기사저장 위의 코드를 가지고 연습을 해보자 우리의 목표는 버튼을 눌르면 포스팅 박스가 열고,닫히는 기능을 넣는 것이다. 박스의 id는 post-box 이다 JQuery에서 무언가를 보이게 하고 안보이게 하는 기능은 hide와 show를 사용하면 된다 아래의 코드를 에 넣어보자 function openClose() { if ($('#post-box').css('display') == 'block') { $('#post-box').hide(); } else { $('#post-box').show(); } function openClose() { → openClose라는 함수를 만들자 i..

다음의 예시를 불러와보자 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅 박스 열기 아티클 URL 간단 코멘트 기사저장 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여기에 코멘트가 들어갑니다. 나는 사진을 가운데 정렬을 하기 위해 위의 코드에 에서 .card-columns { width: 900px margin: 20px auto; } card-columns 클래스의 폭을 설정하고 마진을 위,아래 20px, 좌우 가운데정렬로 지정했다. 그런데 이동이 안된다. 왜 그럴까? 그 이유는 card-columns 라는 클래스의 설정을 Bootstrap에서 정해놨기 때문이다..

JQuery(제이쿼리) Javascript의 라이브러리(library) 중 하나다 Library(라이브러리) 자주 사용하는 코드를 미리 작성해 놓은 묶음이다 예를들어 소문자를 대문자로 바꿔주는 toUpperCase 함수나, 문자열을 특정 문자로 나눠주는 split함수 등이 JS에서 기본으로 제공하는 라이브러리에서 사용하는 함수이다(내가 따로 함수를 만들지 않아도 미리 약속되어 있는 함수) JQuery와 Javascript - 코드 길이 비교 jQuery를 이용하는 이유는 좀더 코드를 직관적이고 짧게 쓸 수 있기 때문이다. 다음의 예시를 보자 JS document.getElementById("apple").style.display = "none"; document.getElementById("apple")..

0부터 n-1까지 더하는 함수 function calculateSum(n) { let sum = 0 for (let i = 0; i < n; i++) { sum += i; // sum을 i만큼 증가시켜라. sum = sum + i 와 동일! } return sum } console.log(calculateSum(10)) // 45를 출력 리스트에서 원소의 갯수 세기 let fruitsBasket = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기'] let count = 0; for (let i = 0; i < fruitsBasket.length; i++) { if (fruitsBasket[i] == '딸기') { count += 1; } } console.lo..

조건문은 if를 사용하는데 excel을 사용해봤다면 어렵지 않게 이해할 수 있다 function compareNinety(num){ if (num > 90) { alert('90보다 커요!') } else { alert('90보다 작아요!') } } compareNinety(30); function compareNinety(num) → num이라는 변수를 갖는 compareNinety라는 함수를 선언하자 if (num > 90) → num이라는 변수의 값이 90보다 크면 alert('90보다 커요!') → 90보다 커요! 라는 알람이 뜨게 해라 else → 그 이외의 상황에서는 alert('90보다 작아요!') → 90보다 작아요! 라는 알람이 뜨게 해라 그래서 compareNinety(30);을 콘솔창..

자바스크립트에서 기본적으로 제공하는 여러 함수들을 보자 나눗셈의 나머지 구하기[%] let a = 20; let b = 7; console.log(a % b); // 6 알파벳 소문자를 대문자로 바꾸기[toUpperCase()] let myClub = 'abcde'; console.log(myClub); //'abced' let upperCase = myClub.toUpperCase(); console.log(upperCase); // ABCDE 특정 문자로 문자열 나누기[split('')] let myEmail = 'znos@gmail.com'; let result = myEmail.split('@'); // ['znos','gmail.com'] console.log(result[0]); // znos..

자바스크립트에서 리스트(List) 와 딕셔너리(Dictonary)는 자료를 담는 형태를 의미한다 (가장 많이 쓰이는 형태이다) 리스트 순서를 지켜서 가지고 있는 형태 let multiList = [1,2,'hey',3]; // 로 선언 console.log(multiList); // (4) [1, 2, 'hey', 3]을 출력 // 대부분의 프로그래밍 언어는 index가 0 부터 시작합니다. console.log(multiList[1]); // 2 를 출력 console.log(multiList[2]); // 'hey'를 출력 // 리스트에 요소 넣기 multiList.push('헤이'); console.log(multiList); // [1, 2, "hey", 3, "헤이"] 를 출력 // 리스트의 길..

[크롬 개발자도구(F12)]를 열어서, console 탭에 작성을 하자 크롬 개발자도구 콘솔창은 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구입니다(새로고침하면 모두 사라짐) 콘솔창에 아래 코드를 붙여놓고 엔터를 쳐보자 console.log("Hello World!"); 여기서 console.log(); 는 ()안에 있는 변수를 출력하라는 의미이다. 내가 실행시키고자 하는 함수를 빠르게 테스트 해 볼 수 있다. let temp = 20 console.log(temp); temp = 'Harry' console.log(temp); 위의 코드를 분석해 보자. 1) let temp = 20 → temp라는 변수를 20 이라고 하자(let 함수) 2) console..