Spell

Javascript로 페이지 전환 없이 서버에서 값을 받아올 수 있는 방법은 무엇일까? 그전에 API에 대해서 일단 무엇인지 알아야 한다. Json이 뭔지도 알아야하고. API? 클라이언트는 서버에게 여러 요청을 보낸다. 그럼 서버는 요청에 따라 적합한 처리를 해서 응답을 준다. 하지만 컴퓨터는 한글을 모르기에 어떤 요청이 '사진 올려줘'의 요청인지, '로그인 시켜줘'의 요청인지 알 수 없다. 요청을 구분할 수 있도록 하는 체계가 바로 API이다. 클라이언트, 서버와 같은 서로 다른 프로그램에서 요청과 응답을 주고 받을 수 있게 만든 체계인 것이다. Json? 그러면 이런 요청과 응답을 할 때는 데이터가 담길 수 있기에 데이터를 넣을 수 있는 '기능'또한 함께 개발해야 한다. 그런데 데이터를 넣을 수 있..

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

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

자 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일 경우에 '짝수'라는 ..

오늘도 역시나 개발자 도구의 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를 알아들을 수 있게 만들었다. 그런데 친구가 와서 "오 뭐야 그거 신기하다, 나도 그걸로 만들어볼래"..