두부의 코딩일기

안녕하세요. Javascript에서 배열에 들어있는 모든 숫자의 합계를 계산하는 방법에 대해서 알아보겠습니다. for loop forEach() 메소드 reduce() 메소드 총 3가지 방법으로 배열 내에 모든 숫자들의 합계를 구해보겠습니다. 1. for loop const nums = [1, 2, 3, 4, 5]; let sum = 0; for (let i=0; i { sum += num; }) // 15 3. reduce() 메소드 const nums = [1, 2, 3, 4, 5]; const sum = nums.reduce((accumulator, currentValue) => { return accumulator + currentValue }, 0); // 15 reduce()는 ES6에서 도입..

자바스크립트를 실행하려면 웹브라우저와 에디터만 있으면 된다. 웹브라우저는 크롬, 에디터는 Notepad++를 사용했다. (노트패드가 없는 경우에는 메모장을 사용해도 된다.) 1. 노트패드를 실행하고 아래 구문을 입력한다. HTML 기본 구조다.

자바스크립트에서의 변수 선언은 var, let, const를 사용한다. java에서는 변수의 유형에 따라 int, String, double 등으로 선언하지만 자바스크립트에서는 위 3가지로 변수 선언이 이루어진다. 그렇다면 var, let, const는 어떤 차이점이 있을까? 변수 선언 및 재할당 가능 여부 1. var [중복 선언 가능, 재할당 가능] var tmp = 'Hello'; console.log(tmp); // Hello var tmp = 'World'; console.log(tmp); // World tmp = 'Hello World'; console.log(tmp); // Hello World 동일한 이름으로 중복 선언을 했는데도 에러가 발생하지 않고, 해당 변수를 다른 값으로 변경할 수..

HTML에서 div 태그는 주로 웹사이트의 레이아웃 구조를 설계하고 화면을 분할할 때 쓰인다. 과거 웹사이트에서는 table 태그로 공간 분할을 많이 했지만 요즘엔 div 태그를 이용한다고 한다. 하지만 div 태그는 하나의 공간을 의미하는 태그로 정확히 어떤 역할을 하는지 알 수가 없다. 그로인해 HTML5에서 레이아웃 관련 새로운 태그들이 추가되었다. 추가된 태그는 다음과 같다. 태그 설명 header 웹사이트의 메타데이터를 담고 있고, 페이지의 타이틀을 보여주는 부분 nav 페이지 이동할 때 이용하는 부분 aside 본문 옆에 존재하면서 주로 광고나 카테고리 목록으로 이용하는 부분 section 본문을 여러 개 포함하고 있는 부분 article 본문의 주내용이 들어가는 부분 footer 웹사이트의 ..

정규표현식 정의 (Regular Expression) 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 언어로 코드가 간결해지는 장점을 가지고 있지만 가독성이 떨어진다. 정규표현식 형식 /패턴/플래그 슬래시(/) 사이에는 매칭시킬 패턴을 써준다. 슬래시(/) 다음에는 옵션을 설정하는 플래그를 써준다. (플래그는 하나만 찾을지 여러 개를 찾을지 등을 설정하는 옵션) 정규표현식 매칭 패턴 (문자, 숫자, 기호 등) 패턴 의미 a-zA-z 모든 영어 ㄱ-ㅎ가-힣 모든 한글 0-9 모든 숫자 . 모든 문자열 (숫자, 한글, 영어, 특수기호, 공백 모두) \d 숫자 \D 숫자 제외 모든 문자 \w 영어 \W 영어 제외 모든 문자 \s 공백 \S 공백을 제외한 모든 문자 정규표현식 검색 패턴 기호 의미 | O..

자바스크립트에서 문자열의 공백을 제거하는 방법에는 trim 함수와 replace 함수 2가지가 있습니다. trim 함수와 replace 함수 사용 방법에 대해서 알아보겠습니다. 1. trim 함수를 이용한 공백 제거 var str = ' Java Script '; str.trim(); // 'Java Script' trim 함수를 이용하면 문자열의 맨 왼쪽과 오른쪽의 공백을 제거할 수 있지만 문자열의 내부는 제거되지 않는다. 또한 trim 함수는 인터넷 익스플로러 IE10 버전부터 지원이 가능하기 때문에 IE9 아래 버전은 replace 함수를 이용해야한다. 2. replace 함수를 이용한 공백 제거 replace 함수를 이용하면 정규식과 함께 사용해야한다. var str = ' java script ..

1. substr() str.substr(start, [length]); str: 문자열 start: 문자열 시작 인덱스, 0부터 시작 length: 추출할 문자열의 길이 const str = 'Hello'; console.log(str.substr(1,3)); // ell 2. substring() str.substring(start, [end]); str: 문자열 start: 문자열 시작 인덱스, 0부터 시작 end: 문자열 끝 인덱스 const str = 'Hello'; console.log(str.substring(1,3)); // el 3. slice() str.slice(start, [end]); str: 문자열 start: 문자열 시작 인덱스, 0부터 시작 end: 문자열 끝 인덱스 cons..

window.open(url, name, specs, replace); 1. url: 새 창에 보여줄 주소 2. name: 새로 열릴 창의 속성 또는 이름을 지정, 기본 값은 _blank이다. - _blank: 새 창에 여린다. - _parent: 부모 프레임에 열린다. - _self: 현재 페이지를 대체 - _top: 로드된 프레임셋을 대체 - _name(임의의 이름): 새 창이 열리고 창의 이름을 지정 3. specs: 창의 크기, 스크롤여부, 리사이즈 기능 등을 지정 - channelmode=yes || no: 전체화면으로 창을 띄움 - directories=yes || no: 디렉토리 버튼의 표시여부 - fullscreen=yes || no: 전체 화면 모드 - height=pixels: 창의 높..

광고 매체의 홈페이지를 접속하면 메인 화면에서 자동으로 재생되는 동영상을 흔하게 볼 수 있습니다. 이번 포스팅은 태그를 이용해서 간단한 동영상을 띄워보겠습니다. 저번 이미지 태그 포스팅에서도 말씀드렸지만 저작권에 주의해서 사용해주셔야합니다. HTML을 이용해서 동영상을 띄우는 방법은 두 가지가 있습니다. 태그 유튜브에 게시된 동영상을 가져와서 출력 태그 직접 가지고 있는 동영상 파일을 출력 video 태그 기본 구조 태그는 주로 태그와 함께 사용합니다. 속성 설명 autoplay 자동 재생 ※ 지정할 경우 preload는 무시 controls 제어 컨트롤러 표시 crossorigin 외부의 특정한 사이트에서 동영상을 가져올 때 동일한 출처인지 확인 여부 loop 반복 재생 preload 사용자의 사용 여..

이번에 알아볼 기본 태그는 태그입니다. 표를 만드는 대표적인 태그로 , 과 태그를 이용해서 표의 행과 열, 너비/높이 등을 설정할 수 있습니다. 각 각의 태그가 어떤 역할을 하고, 어떤 구조로 표가 만들어지는에 대해서 알아보겠습니다. 기본 구조 표를 만드는 태그의 기본 구조입니다. 태그는 행, , 태그는 열을 정의하는 태그입니다. 표 제목1 표 제목2 표 내용1 표 내용2 표는 어디 간 거지? 위의 코드를 실행해보면 실제로 표는 온데간데없고, 글자만 두둥실 떠다니는 것을 볼 수 있습니다. 이상한 게 아니고 정상입니다! 표의 테두리를 설정해주기 위해선 태그를 사용해야 합니다. 태그를 이용하면 시각적으로 다양한 기능을 사용할 수 있습니다. 이번 포스팅에서는 가볍게 표의 테두리를 설정하는 방법만 알고 넘어가겠..