Web/java script

생활코딩 16일차 [21.02.01] - JavaScript 마무리

라이브러리 : 재사용하기 쉽도록 만든 소프트웨어, 부품을 가져오는 느낌 프레임워크 : 하고자 하는 것에 따라서 공통적인 부분을 만들어놓는 반제품 같은 느낌 JavaScript의 대표적인 라이브러리로 jQuery가 있다. jQuery는 JS의 이용을 훨씬 쉽게 만들어주는데, jQuery의 웹 페이지 상에 저장되어있는 틀을 이용하는 것이다. UI : User Interface API : Application Programming Interface 예를 들어 버틀을 클릭하여 경고창을 띄우는 alert 코드를 이용할 때, 코드의 디자인은 우리가 하지 않았다. 우리는 디자인된 경고창을 띄우기로 약속한 코드를 사용한 것이다(API). 사용자들을 버튼을 클릭하고 경고창을 확인한다. 사용자 입장에서는 UI만 보는 것이..

생활코딩 15일차 [21.01.30]

연관된 코드를 파일로 묶어서 정리하기 WEB 화면에만 있던 버튼을 다른 3가지 페이지에서도 만들어보자. input 태그를 복사 붙여놓고 긴 script 태그를 복사 붙여놓고 ... 만약에 이런 웹 페이지가 1억 개가 있다고 가정하고, 우리는 powderblue 를 yellow로 수정하고 싶은 상황이다. 하나씩 다 수정해야 할까? CSS style 코드들을 따로 파일로 담아서 링크를 걸어줬던 것 처럼 JS도 이렇게 할 수 있다. 태그로 JS 파일을 소환한다.

생활코딩 14일차 [21.01.29]

우리가 만들어온 웹 페이지로 돌아와서, night day 버튼을 함수를 이용해서 만들어보자. (*나는 JS의 태그를 문에서만 쓰는 줄 알았는데, 문에서도 사용 가능) 앞에서 배운 function 문법을 통해 문에서 함수를 작성해주자. 이렇게 하고 웹 페이지에서 버튼이 잘 작동되나 확인해보자. night 모드임에도 button의 value 값은 여전히 night이다. 문제가 무엇일까? 함수를 소환(?)하는 과정에서 매개변수와 인자를 지정해주지 않았기에 위의 함수가 그대로 호출되었고, 위에서 적힌 함수 코드에서 this는 자기 자신을 가리키는 것이 아니다. 다른 것을 가리킨다고 했다.(현재 과정에서는 무엇인지 몰라도 된다고 함) 그렇기에 매개변수와 인자를 설정해 본문에서 자기 자신을 소환해보자. 함수를 설정..

생활코딩 13일차 [21.01.28]

egoing님의 강의에서 배열과 반복문을 배운 이유는 우리가 만들어온 웹 페이지에서 night모드일 때 하이퍼링크 글자들이 너무 어둡기 때문에, 이를 밝은 색으로 설정하기 위해 배열과 반복문을 배웠다. 어느 포인트에서 배열과 반복문 개념을 활용할까? ※document.querySelector() JS에서 CSS 선택자로 요소를 선택한다. 단, 주의할 점은 선택자가 여러개일 경우, 첫번째 선택자의 요소만 선택한다. CSS 선택자의 모든 요소를 선택하는 코드 : document.querySelectorAll() 자, 우리는 모든 a 태그의 색깔을 각각의 모드에서 수정하려고 한다. 일단 모든 a 태그를 소환해보자. document.querySelectorAll('a'); 에 의해서 모든 a 태그들이 배열의 형..

생활코딩 12일차 [21.01.27]

배열(Array)과 반복문(Loop)을 왜 같이 배울까? 같이 배우는 데에는 이유가 있지 않을까? 회사의 직원들을 나열하는 웹 페이지를 만든다고 예를 들어보고, 일단 4명이라고 가정하고 1차원적으로 나타내보자. 만약 수시로 직원을 채용하고 떠나보내고, 그리고 직원의 수가 1억 명이라고 가정을 해보자. 그러면 우리는 또 비효율성을 맞닥뜨리게 된다. 직원들의 명단을 Array로 만들고 이 Array만 수정해주면 밑에 직원들의 명단이 자동으로 나열(by Loop)되는 코드를 짜면 어떨까? 추가로 직원들의 프로필 링크를 걸어두는 것 또한 어떨까? ① 직원들 명단(Array) 자동으로 나열(by Loop) 직원 4명의 명단을 coworkers라는 Array로 만들었고, 반복문을 통해 4명의 직원들을 리스트로 나열..

생활코딩 11일차 [21.01.26]

리팩토링이란? '다시 공장을 가동하는 것', 즉 다시 가공한다는 뜻인데, 코드가 늘어날 수록 비효율적인 코드나 반복되는 코드가 많아진다. 이를 재가공 과정을 통해 효율적으로 정리해나가는 것을 리팩토링이라고 한다. 기존의 night 버튼을 웹 페이지 하단에서도 볼 수 있게 코드를 복사 붙여넣어보자. 그러고 잘 가동되는지 확인해보자. 버튼이 생겨서 배경화면과 글자색은 잘 바뀌지만 하단의 버튼 value값이 day로 바뀌지 않고 그대로 night값을 유지한다. 왜 이럴까? 이유는 상단과 하단의 버튼의 id가 둘 다 "night_day"이기 때문이다. id가 중복되면 안된다. 그러므로 하단 버튼의 id값을 "night_day2"로 수정해준다. (id값은 고유한 값을 부여하는 건데, 중복되면 그 차별성을 잃기 때..

생활코딩 10일차 [21.01.25]

JavaScript의 가장 중요한 쓰임 : 사용자와 상호작용하면서 마치 대화하는 느낌의 코드를 짜서 실행하기 이 예시로 웹 페이지의 야간모드, 주간모드 버튼 적용하기를 해보았다. (HTML, JavaScript, CSS 한 데 모아 적용해보기 + 구글링하여 원하는 내용 찾아내기-검색하는 방법이 중요하다) JS에서 제어할 태그 또는 element를 선택하는 방법 :document.querySelector( ) 로 지칭하고 끝에 .color, .backgroundcolor 이런 식으로 어떤 속성을 수정할 건지 선택한다. 프로그램의 어원과 정의를 생각해보자. 프로그램의 정의를 따지기에 앞서, 프로그램이라는 말은 어디서 나왔을까? 예로부터, 음악회의 여러 연주 곡들의 순서를 한 페이지에 나열해놓은 것을 프로그램..

생활코딩 9일차 [21.01.22]

(*01.21 할당량) 데이터 타입(Data Type)이란? 컴퓨터 프로그래밍을 하는 데에 있어 가장 중요한 것이 데이터를 처리하는 것이다. 그리고 이 데이터 처리를 잘 해내기 위해서 데이터의 종류를 구분해서 정리해왔다. 이것이 데이터 타입이다. 이번 시간에 알아볼 데이터 타입은 Number(숫자)와 String(문자열)이다. Number와 String의 차이 String은 큰따옴표(", ") 또는 작은따옴표(', ')로 나타내는 반면, Number는 그냥 숫자를 쓰면 된다. 그리고 number는 javascript의 특성으로 사칙연산이 가능하다. String에는 다양한 특성들이 있는데, 이를 활용하여 문자열의 성질을 다양하게 파악하고 활용할 수 있다. " ". length : 문자의 개수를 세어준다. ..