Spell

버튼 클릭으로 박스를 열고 닫기 기능을 만들어서 넣어볼꺼다. 사용하기 앞서 수정전의 전체 코드는 더보기를 누르면 나온다. 더보기 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅 하기

자 jQuery를 사용하기 전에 무엇을 해야 한다고? "임포트" 아주아주 자주자주 사용하게 될 w3schools 홈페이지에 간다. https://www.w3schools.com/jquery/jquery_get_started.asp 그럼 해당 Google CDN이라는 코드가 보인다. 으로 감싸져 있으니까, 우리도 사용할 때 안에 아무곳이나 넣으면 된다. 하지만 이왕이면 보기 쉽게 title 밑에다가 넣어보자. 학습에 활용한 페이지 코드는 전에 Bootstrap을 사용하면서 연습할 때 쓰던 메모장 페이지다. 추가한 코드는 다음과 같다. 부트스트랩 연습하기, 메모장 활용한 전체 코드는 다음 더보기를 누르면 나온다. 더보기 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅 하..

Javascript로 우리가 궁극적으로 하고 싶었던게 무엇이였나? 움직이게, 동작하게 하는거다. 여러 브라우저가 산재되어 있던 시절이 과거에 있었다. 그래서 브라우저 마다 호환성 이슈가 있었는데, JQuery제단에서 "브라우저마다 코드를 다 다르게 쓰고 길게 쓰고 하는 것을 다 모아서 라이브러리로 만들어 둘께! 시작할 때 임포트해서 써!" 이런 식으로 나오게 된 게 JQuery다. 즉, Html의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것(Feat. 라이브러리) 라이브러리 library 주로 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다. JQuery는 Javascript와 다른 특별한 소프트웨어가 아니다. 미리 작성된 Javascript 코드이다. 전..

Javascript 복습 할 겸 onclick을 활용하여 한번 클릭하면 홀수, 두번째 클릭하면 짝수라고 나오게 하려는 걸 연습해보자. 과거 메모장을 만든 페이지에서 학습하려고 한다. 그때 onclick으로 클릭하면 'Hello!'라는 메세지가 나오는 경고창이 열리게 함수를 만들었다. 일단 카운트업을 해줘야한다. 클릭했을때 누군가는 수를 세어야 하니까. 그리고 조건문을 달아 주어야 한다. 짝수와 홀수를 어떻게 구분해야할까? 전에 기본문법 중 나눈값의 나머지를 알 수 있는게 있었다. [4 % 2 ==] 4를 2로 나눈뒤의 나머지 값을 도출해라. 이런 모양 이였다. 이를 활용하여 조건문을 달아주자. alert 메세지도 바꿔주자. 카운터가 1부터 시작이며, 이를 2로 나눴을때 나머지가 0일 경우에 '짝수'라는 ..

이제 예제를 가지고 조금 연습을 추가로 해볼꺼다. 예제는 다음과 같다. (1) 앱개발 종합반에 결제 수단별 주문건수. (2) Gmail을 사용하는 성씨별 회원수 세어보기. (3) Course_id별 ‘오늘의 다짐’에 달린 평균 like 개수 구해보기. (1) 앱개발 종합반에 결제 수단별 주문건수. 주문건수니까 count를 활용하려나? show tables로 살펴보니 테이블은 orders를 활용해야 할꺼 같다. 일단 orders 테이블을 불러오자. select * from orders 결제 수단별이니까 group by로 결제수단별로 묶어주었다. select * from orders group by payment_method 앱개발 종합반만 남겨기위해 where을 사용해주었고 select * from ord..

Order by는 문자열 기준으로도 정렬이 된다. select * from users order by email Users 테이블에서 email을 오름차순 정렬해줘! 의 결과다. 보이는봐와 같이 문자열도 오름차순이 된 화면이다. 물론 내림차순도 가능하다. select * from users order by email desc 문자열인 이름도 가능하겠지? select * from users order by name Users 테이블에서 name을 오름차순 정렬해줘! 이 경우에도 역시나 내림차순도 마찬가지다. select * from users order by name desc 날짜 및 시간도 가능하다. select * from users order by created_at Users 테이블에서 create..

아이템은 아무거나 선정해서 만들어 볼 것이다. 사전에 준비된 Bootstrap시작 템플릿을 가지고 만들어 볼 것이다. (feat. 기획서 레이아웃) 이 과정에서 내가 행동했던 (멍청한것 포함) 기록을 남겨본다.. 흑.. 시작 템플릿과 기획서 레이아웃은 다음과 같다. 시작해보죠! 일단.. 안에 기획서와 비슷하게 텍스트들을 넣고 구역을 나눠보자. Spell's Shopping 상품제목 해당 제품은 어쩌구저쩌구 내용 주문하기 주석 처리로 해당 구역이 어떤 구역인지 헷갈리지 않게 적어두었다. (내가 작업하기 편하려고) 이제 상품 이미지를 찾아서 일단 꾸며볼꺼고, 상세내용을 좀 더 수정해줄꺼다. 추가로 글꼴을 입혓으며, 전체를 하나의 구역으로 묶어 가운데로 읻동시켜주었다. 중간중간 글씨크기를 수정해주기 위해 cl..

오늘도 역시나 개발자 도구의 console창과 함께한다. 여러 예제들을 바탕으로 연습해볼꺼다. (1) 미세먼지(IDEX_MVL)의 값이 40 초과인 구 이름(MSRSTE_NM)과 값을 출력하기 연습에 앞서 아래의 값들을 console창으로 미리 넣어주어야 된다. 좀 길다. 밑에 더보기를 클릭하여 펼치면 나온다. 더보기 let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MS..

변수, 자료형은 한번 다뤄보았고! 이제 함수, 조건문, 반복문이 남았다. 오늘도 여전히 개발자 도구의 console창을 띄운 뒤에 시작할꺼다. 함수 함수부터 다뤄보자. 내가 아는 함수는 값을 넣으면 값이 나오는 것. 프로그래밍에서의 함수는 정해진 동작을 입력하면 그 동작을 하는 것이다. console창에 입력해보자. function sum(num1, num2){ return num1+num2 } sum은 함수의 이름이다. 임의로 정한 이름. 풀이해 보자면 num1, num2라는 변수를 받아서 그것을 더한 값을 return해라. 함수에서의 return은 작업을 긑내고 나를 변신시켜줘! 라는 말이다. 어떻게 활용을 하는 것인가? let result = sum(2,3) 해당 문구를 입력하면 다음 화면이 나온다..

변수란? 값을 담는 것이라고 간단히 생각하면 된다. 개발자 도구를 키고 console창을 활용해서 학습해볼꺼다. 여기서 let a = 2 라는 코드를 적었다. 즉, a에다가 2라는 변수를 담은 것이다. 그럼 a+4=? 6이겠지? 이번에는 5라는 숫자를 담아보자. 그리고 a+4를 다시 계산해보면? 숫자가 아니라 문자열도 담을 수 있다. (문자열이기에 따옴표가 필요하다. '...' or "...") 그림과 같이 담았다면, first_name + last_name = ? 음 SpellKim이라고 나오겠지? Good! 그럼 First_name + a = ? 아마 Spell5? Nice! 여기서 우리는 알 수 있다. let text = x 라는 문구를 사용하면 text 에 x 라는 변수를 담는 것! (단 여기서 ..