Spell

예제 코드를 활용해서 직접 Javascript와 jQuery를 함께 사용해보면서 실습할꺼다. 실습할 코드와 해당 화면은 더보기를 누르면 나온다. 더보기 jQuery + Javascript의 조합을 연습하자! 1. 빈칸 체크 함수 만들기 1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 [완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기 클릭 2. 이메일 판별 함수 만들기 2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기 2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기 [완성본]2-3. 이메일 도메인만 얼럿 띄우기 클릭 3. HTML 붙이기/지우기 연습 3-1. 이름을 입력하면 아래 나오게 하기 [완성본]3-2. 다지우기 버튼을 만들..

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

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

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

아이템은 아무거나 선정해서 만들어 볼 것이다. 사전에 준비된 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 라는 변수를 담는 것! (단 여기서 ..

Javascript? 브라우저가 유일하게 알아 들을 수 있는 프로그래밍 언어다. 초기에 공부할 때 클라이언트가 서버에 요청하면, 서버가 클라이언트에게 Html+CSS+Javascript를 준다고 했떤 것을 기억하자. 근데 왜 브라우저가 알아 들을 수 있는 유일한 프로그래밍 언어일까? Java나 파이썬등은 안될까? 말이 안되는건 아니다. 하지만 이는 역사적인 이유와 이미 만들어진 표준이 존재하기 때문인데, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어 있으며, 모든 웹서버는 HTml+CSS+Javascript를 주게 되어있다. 예를 들어보면 첫 브라우저를 만든 사람이 Javascript를 알아들을 수 있게 만들었다. 그런데 친구가 와서 "오 뭐야 그거 신기하다, 나도 그걸로 만들어볼래"..