본문 바로가기

Home207

[JS] 9. 리팩토링(refactoring) 이번시간에는 리팩토링(refactoring)에 대해서 알아보겠습니다. 우리가 작성한 코드를 보니 조금 복잡하고, 중복으로 사용된 코드가 많이 있습니다. 이러한 중복을 제거하고 코드의 가독성(읽기 좋게)을 좋게 하는게 리팩토링이라고 합니다. 우리가 작성한 코드를 리팩토링 해보면서 어떻게 실제코딩에 적용할 수 있는지 살펴보겠습니다. 먼저 위에 만든 day, night 버튼을 아래에도 만들려고 합니다. 그래서 코드를 복사해서 아래에 붙여넣기 합니다. 그런데, 결과를 보니 위 버튼과 동일하게 작동하지 않습니다. night 버튼의 이름이 계속 night으로 남아있고 위에 있는 버튼이 계속 바뀌네요! 아래와 같이 id값을 night_day2로 바꾸어 주면 정상적으로 동작합니다. 그런데, 바꾸어야 할 버튼이 100개.. 2020. 10. 8.
[JS] 8. 자바스크립트 조건문 및 활용법 이번시간에는 조건문(if else)에 대해서 배워보겠습니다. 1. 자바스크립트 조건문 If, else 새로운 html파일을 작성해서 아래와 같이 코딩해봅니다. Conditional statements Program If-true If-false 결과를 보시면? if문 ( ) 안에는 boolean 데이터타입이 옵니다. (true 또는 false가 옵니다.) 위 코딩에서 if가 true이기 때문에 2,4가 출력이 됩니다. 위코딩에서는 if(false)이기 때문에, 3,4가 출력이 됩니다. 즉, if 다음의 ( ) 의 값의 결과에 따라서 if 문 중괄호 안에 있는 코딩을 출력하든지, else문 중괄호 안에 있는 코딩을 결과값으로 출력해주게 됩니다. 2. 자바스크립트 조건문 활용하기 2.1 기본적인 if els.. 2020. 10. 8.
[JS] 7. 비교연산자, Boolean 데이터타입 먼저 예시를 보여드립니다. 기존에 night, day를 번갈아가면서 클릭하는게 뭔가 부족함을 느껴져서 아래와 같이 오른쪽에 버튼을 하나 더 만들어서 night이면 day로 표시되고, day이면 night으로 표시되어 버튼 하나만 눌러서 낮,밤이 바뀌게 하는걸 만들어보려고 합니다. 해당하는 부분의 소스는 아래와 같은데요. if, else의 조건문, 비교연산자, boolean 데이터 타입에 대해서 알아보겠습니다. 이번시간에는 비교연산자와 Boolean 데이터 타입에 대해서 살펴볼께요! 1. 자바스크립트 비교연산자 예제파일을 하나 만들고 아래와 같이 입력합니다. Comparison operators & Boolean === 1===1 1===2 결과를 볼께요 네, 위와 같은 결과가 나왔습니다. 1.1 === .. 2020. 10. 7.
{JS] 6. 자바스크립트로 웹브라우저 제어하기 이번시간에는 첫번째 보여주었던 예제를 한번 구현해보겠습니다. 1. 먼저 버튼을 만들어야겠죠? 태그를 통해서 night, day에 대한 버튼을 만듭니다. 버튼이 만들어졌어요! 이제 본격적으로 어떻게 저 버튼을 누르면 배경화면의 색깔과 글자가 바뀌게 할지를 고민해야겠죠. 고민은 검색을 통해서 해결할 수 있습니다. 2. 자바스크립트로 CSS의 태그를 선택하는걸 검색해봅시다! 페이지를 들어가서 예제를 한번 살펴봅니다. 아래와 같이 사용하도록 되어 있네요. var el = document.querySelector(".myclass"); 자, 이걸 활용해볼께요 먼저 마우스를 클릭했을 때 발생하는 이벤트설정을 먼저 아래와 같이 합니다. 그리고 위 코드에 위 예제를 복사해서 붙여넣기 할께요! 아래와 같이 작성했습니다... 2020. 10. 7.
[JS] 5. 변수와 대입연산자 이번시간에는 변수와 대입연산자를 배우겠습니다. 1. 변수란? 바뀔 수 있는 어떤 값 먼저 콘솔창을 열어서 아래값을 입력해볼께요 여기서 =는 대입연산자라고 표현합니다. 좌항과 우항을 결합해서 우항의 값을 만들어냅니다. (1을 x에 대입해서 이제는 x의 값이 1이 됩니다.) 1=2; 이렇게 해볼께요 에러가 뜨네요!!! 1은 상수입니다. 항상 1이기때문에 바뀌기 않죠. 숫자가 바뀌지 않잖아요! Variable VS constant 라고 합니다. Varariable는 변수이고 constant는 상수입니다. 변수는 변하는 값, 상수는 변하지 않는값이죠! 2. 변수는 언제 어떻게 활용되는가? 이번에는 이 변수가 어떻게 활용되는지 한번 살펴보겠습니다. 이렇게 나열된 문서에 이름을 중간중간 넣어볼께요. 아래와 같이 k.. 2020. 10. 7.
[JS] 4. 데이터 타입 문자열과 숫자 이번 시간에는 데이터타입인 문자열과 숫자에 대해서 알아보겠습니다. 자바스크립트뿐만 아니라 모든 프로그래밍 언어에는 데이터타입이 존재하는데요, 자바스크립트에서는 어떻게 구성되어 있고, 어떻게 사용하는지를 알아보겠습니다. 구글에서 Javascript data type 검색해서 들어가보면 아래 홈페이지에 자바스크립트의 데이터 타입이 설명되어 있습니다. developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures 1. Number 숫자 연산자 먼저 개발자도구에서 콘솔창을 엽니다. 그리고 alert(1)을 입력합니다. 경고창을 통해서 1이 표시되는걸 확인할 수 있습니다. 그냥 1 입력후 엔터를 치면 그 결과값이 아래에 표시됩니다. 아래와 같습니다. 2를 입력하셔도 .. 2020. 10. 7.
[JS] 3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기 이번시간에는 자바스크립트를 필요에 따라 바로 작성하고 적용해 볼 수 있는 방법을 배우도록하겠습니다. 먼저 작성된 자바스크립트 파일을 웹브라우저(크롬)에서 오픈한 후 오른쪽 마우스 버튼을 클릭해서 개발자도구로 들어갑니다. 1. 크롬 브라우저에서 개발자도구를 연후, Console 클릭 Elements 오른쪽에 Console라고 있습니다. 그걸 클릭해주세요!! 모든 웹페이지에서 우리는 이 콘솔기능을 사용할 수 있습니다. 왼쪽에 있는 Web의 문서의 내용중 글자수가 몇개인지를 알아보는 걸 한번 작성하고 결과를 보도록 하겠습니다. 먼저 왼쪽에 있는 문장을 복사해서 오른쪽 콘솔창에 붙여넣습니다. 아래와 같이요~ 그리고 자바스크립트를 활용해서 글자수를 확인해볼께요! 문장을 ' ' 로 묶은 뒤에 마지막에 .length.. 2020. 10. 7.
[JS] 2. 자바스크립트 이벤트란 무엇인가? 이번시간에는 자바스크립트 이벤트에 대해서 살펴보겠습니다. 먼저 HTML 문서를 열겠습니다. 1. onclick 이벤트 버튼을 하나 만들어볼께요 태그를 씁니다. 버튼을 만드는 태그는 2020. 10. 7.
[JS] 0. 자바스크립트란 무엇인가? 지난 번 CSS 강의 파일의 마지막 파일에 아래의 자바스크립트 코드를 추가했습니다. 그리고 결과를 한번 보죠~ 웹페이지 제일 상단에 버튼 두개가 생깁니다. Night 버튼을 누르면 아래와 같이 배경이 바뀝니다. day를 누르면 다시 흰색으로 바뀌게 되죠~ 개발자도구를 통해서 살펴보면, Night 버튼을 눌렀을때, 바디 태그의 style이 바뀌는걸 확인할 수 있습니다. day도 마찬가지이구요~ 자, 그럼 자바스크립트가 어떤건지 조금 감이 오셨나요? 자바스크립트란, 이렇게 사용자와 웹브라우저간에 서로 상호작용할 수 있도록 도와줍니다. HTML이 정적이라면, 자바스크립트는 동적으로 작용하는거죠~ 앞으로 수업을 통해서 하나하나 배워갈테니 너무 염려마세요~ 그럼 다음시간에 뵐께요! 아래 생활코딩의 강의를 바탕으로.. 2020. 10. 7.