Escape

Java Script(루프) For loop loop문에는 세 번의 세미콜론(;)이 나온다. 첫째는 ‘초기화’로 루프를 시작하고 반복문 변수를 선언한다. 정지 조건은 , 이 조건이 참일 경우 코드를 실행시키고 거짓이라면 코드를 멈추게하는 조건이다. 이 조건에 대해 거짓이 되기 시작할 때를 정지 조건이라고 부르기도 한다. 반복 선언은 1번의 반복 변수를 매 루프(매 회차)마다 업데이트 하기 위해 존재한다. 다음은 예시이다. for (let counter = 0; counter < 4; counter++) { console.log(counter); } /* 결과는 다음과 같다. 0 1 2 3 Looping in Reverse (역루프) 조금 헷갈림 // The loop below loops from 0 to..

웹접근성에 관해서 미국에서는 90년대 후반 ADA라고 하는 법률에 장애를 가진 이들에 대한 건물의 접근성 등을 규정하기 시작했다. 건물 입구의 경사로 , 색약 혹은 색맹을 위한 신호등이 그러한 것들의 대표적인 예이다. 시간이 지날 수록 많은 사람들이 디지털화 된 세계에서 살아가게 되었고 지금에 와서는 디지털이 아닌 것만으로 삶을 살아가기는 어려운 세상이 되었다 . 이러한 환경 속에서 시각 등의 감각이나 신체가 불편한 사람들에게 보다 나은 접근성을 제공하고자 하는 것이 Web Accesibility에 대한 담론이다. 단순한 선의의 측면에서도 그렇지만, 마치 경사로가 유모차를 끌고가는 사람 등 원래의 타겟 이외의 계층에게도 편하게 쓰일 수 있음을 고려하면 웹의 접근성은 그 주 타겟이 되는 이 뿐만이 아니라 ..

이전포스팅과 이어지는 내용입니다. JavaScript(HTML form validation) HTML form에서 required로 min max 설정하기 의 안에 태그가 들어가는데, 그 태그의 속성값으로 required를 지정해서 반드시 채워야하는 칸이라 공란으로 두면 무언가 입력값이 필요하다고 표시할 수 있다. min max 속성을 이용하면 숫자를 최소 몇부터 최대 몇까지 입력할 수 있는지 설정할 수 있다. 예시) Enter # of guests: 글자의 길이를 체크하기 minlength 속성과 maxlength 속성을 활용한다. 예시) Summarize your feelings in less than 250 characters (참고) HTML form 태그에서 method 속성값 데이터를 전송하는..

Javascript(HTML form #2) 알고보니 form의 기본 내용들을 정리한 부분을 읽지 않아 그냥 넘어갔었네요, 다시 정리합니다. Form의 작동원리 form은 정보를 수집하는 방법 이다. 정보를 수집하고 나서는 그 정보를 어디론가 보내야 하는데 그래서 쓰이는 속성이 action과 method 이다. 이 부분은 HTTP와 관련된 부분이 있다. method는 정확히 말하면 어떠한 HTTP 요청을 실행하게 할 것인가를 값으로 가진다. 다음은 form의 기본 골격이다. action으로 정보를 보낼 곳을 지정했고 method로 어떤 방법으로 정보를 보낼 것인가를 지정해주었다. method 뒤에 오는 문자는 소문자로 써도 괜찮지만 관습적으로 대문자로 쓰고 있다. ex) POST, GET 다음과 같이 안..

Javascript(HTML form) 개요 HTML의 form을 이용하여 정보를 받아들여 서버로 전송을하게 되는데, 이 과정에서 입력된 정보가 유요한 정보인지 체크하는 것을 form validation 이라고 한다. 주소를 입력해야하는 창에 사용자가 자신의 이름을 입력한다면 그것은 우리가 기대한 값이 아니다. 그러한 것을 체크하는 과정을 form validation 이라고 부른다. 유효한 데이터를 수집하지 않으면, 복수의 동명의 유저네임등으로 인한 혼란이 발생할 수 있고 심하게는 악성 유저가 일종의 코드를 우리의 데이터에 삽입하여 해킹에 취약해지는 점도 발생할 수 있다. 정규표현식 : regular expressions (regex or regexp) 한국어로는 정규표현식이라고 하는 개념인데, 우리가 ..

Javascript(이벤트, 이벤트 핸들러) Event(이벤트) 이벤트 핸들러 등록하기 .addEventListener() 라고 하는 메소드가 있다. 이 메소드는 2개의 인자를 받는데, string 형식의 이벤트 이름과 또 다른 하나는 이벤트 핸들러 함수이다. 이벤트 핸들러를 작성 할 때에는 익명함수보다는 이름이 있는 함수로 작성하는 것이 유리하다. 이후에도 깔끔하고 재사용이 가능한 코드가 될 것이다. 이벤트핸들러 함수는 실제로 어떠한 이벤트가 fired(여기서는 클릭이 일어났을 때) 실행되는 함수를 말한다. let eventTarget = document.getElementById('targetElement'); eventTarget.addEventListener('click', function() {..

Javascript(Dom 조작 ) .innerHTML 위 명령어를 사용하여 , 특성 요소의 내부를 바꿀 수있다. document.querySelector('p'); 위를 사용하여 CSS 선택자를 활용하여 요소에 접근할 수 있다 document.getElementById('bio').innerHTML = 'The description'; // Set first element of .student class as 'Not yet registered' document.getElementsByClassName('student')[0].innerHTML = 'Not yet registered'; // Set second tag as 'Cedric Diggory' document.getElementsByTagNa..

Building Interactive Webpage (인터랙티브 웹 만들기) HTML이 구조 / CSS는 디자인적인 요소 / JS는 반응성 및 기능성을 담당한다고 크게 개괄을 해놓고 시작 . The 스크립트는 어떻게 로딩이 되는가 ? HTML의 구성요소들은 기본적으로 ‘순차적’으로 렌더링 되어 브라우저에 전달된다. 이는 태그도 마찬가지이다. 따라서 먼저 나온 script 태그가 먼저 렌더링 되고, 이 스크립트의 로딩이 다끝나고 나서야 나머지 html 구성요소들의 렌더링이 시작되는 것이다. HTML parser가 script를 만나면 우선 parsing을 멈춘다. 그 뒤 js 로딩을 마무리한 후 다시 parsing이 재개 되게 된다. 간단하게 해결하기 위해서는 script 태그를 body 태그의 제일 아래..

HIGHER-ORDER FUNCTIONS 인간이 사용하는 어휘들은 대체로 일련의 과정들을 추상화 한 것이다. 예를 들어 ‘제빵’이라는 단어 자체는 오븐을 예열하고 , 반죽을 준비해서 그 안에 넣고 등등의 과정들이 함축된 것이다. 이러한 추상화(abstraction)을 구현 하는 것을 배울 것이고 Higher order functions에 대해서 배울 것이다. Higher order function는 간단히 말하면 argument로 다른 함수를 받는 것을 말한다 . 자바스크립트에서 함수는 first class object 로 분류된다. 이 말은 function도 오브젝트의 일종이기 때문에, .length .name 등의 속성을 가지고 .toString() 등의 메소드도 가진다. 함수의 원 이름을 확인하는 ..

Javascript(반복을 쉽게 해주는 빌트인 메소드) 반복을 쉽게 해주는 빌트인 메소드 들을 iteration methods라고한다*.* .map() .forEach() .filter() The .forEach() Method 괄호 안에 function을 사용해서 call back function으로 불러오는게 되는데, 대략 세가지의 방법을 사용할 수 있다. 우선 첫 번째로는 가장 기본적인 함수의 선언을 활용한 것 const animals = ['dog', 'cat', 'horse']; animals.forEach(function(oneAnimal){ console.log('♥' + oneAnimal); } ); //출력 ♥dog ♥cat ♥horse 두 번째로는 함수의 arrow function 기능..