월드스토리의 코딩 나라

jQuery자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 라이브러리 jQuery의 장점• 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능 • HTML DOM을 손쉽게 조작 가능하며, CSS 스타일도 간단히 적용 가능 • 애니메이션 효과나 대화형 처리를 간단하게 적용 • 같은 동작을 하더라도 더욱 짧게 구현 가능 • 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능 jQuery의 기초 표현$(선택자).동작함수(); $ 는 jQuery() 함수의 축약 형태로, 식별자 역할 jQuery의 메소드  - 기본jQuery 쓰는 법의미예시$( 선택자 ).val();value 값을 가져올 수 있다.var value = $("input").val();$(선택자).val(“..

DOM(Document Object Model) • HTML 문서 요소의 집합!• HTML 문서는 각각의 node 와 object 의 집합으로 문서를 표현• 따라서 각각 node 또는 object 에 접근하여 문서 구조 / 스타일 / 내용 등을 변경 할 수 있도록 하는 것 Document웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체 Document 요소 선택하는 법 태그 용어의미• document.getElementById(아이디 속성값)태그의 Id 속성값이 특정값인 녀석을 가져온다.• document.getElementsByClassName(클래스 속성값)태그의 클래스 속성값이 특정값인 태그를 선택한다.• document.getElementsByTagName(태그 이..

Javascript 표준 객체자바스크립트가 기본적으로 가지고 있는 도구라고 보면 된다.Date 객체매 순간 바꾸는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체초기화 방법new Date(); //1970년1월1일을 default로 가지는 객체 반환new Date(밀리초); //1970년1월1일부터 특정 시간만큼 지난 날짜 반환new Date(년, 월, 일, 시, 분, 초); //특정 시간으로 초기화하여 반환 Date 객체를 변수로 사용 가능한 함수 함수의 표현함수의 의미 Date.now()현재 년도, 월, 일, 시간까지 반환 date.getFullYear() date  값이 가지는 년도 반환date.getMonth()0~11사이의 숫자로 월을 표시(0 = 1월)date.getDate()1~31사이의..

기본 for문 let numbers= [1, 2, 3, 4, 5, 6]; let fruits= ["사과", "바나나", "수박", "포도", "파인애플"]; for(let i= 0; i for of 반복문 let numbers= [1, 2, 3, 4, 5, 6]; let fruits= ["사과", "바나나", "수박", "포도", "파인애플"]; let numbersLength= numbers.length; let fruitsLength= fruits.length; for(let number of numbers) { console.log(number); } for(letfruitoffruits) { console.log(fruit); } forEachlet numbers = [1, 2, 3, 4, 5, ..

문자열에서 사용 가능한 메소드내장메소드메소드의 의미length문자열의 길이를 반환toUpperCase()문자열 전체를 대문자로 변경toLowerCase()문자열 전체를 소문자로 변경indexOf("")몇번째 인덱스인지 숫자로 반환slice(start, end)start 인덱스부터 end-1 인덱스까지의 값을 빼냄replace(문자열1, 문자열2)문자열의 특정 값을 찾아 제일 먼저 나온 녀석을 문자열2로 변경함replaceAll(문자열1, 문자열2)문자열1을 전부찾아서 문자열 2로 바꿔줌repeat(n)문자열에 대해 n번 반복trim()문자열의 양끝 공백 없애기split()매개변수로 들어온 문자열을 문자 단위로 쪼개서 배열로 만듬

1. 연산자의 개념연산자는 코드에서 값을 계산하거나 평가하는 데 사용됩니다. 대표적인 예로는 산술 연산자, 할당 연산자, 비교 연산자 등이  존재합니다..참고 문서: MDN 자바스크립트 연산자2. 값과 표현식리터럴 (Literal)리터럴은 코드에서 값을 나타내는 표기법입니다.숫자 리터럴: 1, 123문자열 리터럴: 'hello', "world"템플릿 리터럴: 안녕, ${name}함수 리터럴: function() {}표현식 (Expression)값으로 평가될 수 있는 코드를 의미합니다.let b; // 선언문b = 2; // 표현식, 할당문let a = b = 2; // 표현식console.log(a); // 2 출력 3. 산술 연산자 (Arithmetic Operators)산술 연산..

배열에서 사용가능한 함수함수의 이름함수의 의미변수명.length함수의 길이를 찾음변수명.push(추가할 값)배열에 값을 추가함변수명.pop()배열에서 제일 앞 값을 빼냄변수명.unshift(추가할 값)배열의 맨 앞에 값을 추가한다.변수명.shift()배열의 맨 앞 값을 제거한다.변수명.indexOf(찾을값)배열에 특정값이 있는지 여부를 확인(true로 표시)변수명.includes(찾을 값)배열에 특정 단어를 포함하는 변수값이 있는지 여부확인typeof 변수명해당 변수가 어떤 자료형인지 찾음(배열은 object)변수명.reverse();배열의 순서를 뒤집음(원본 배열도 변환되니 주의할 것)arr.join() join 안의 문자열을 기준으로 문자열로 병합 Object  메소드 체이닝 • 각각의 메소드를 연결..

개발언어 표기법표기법 이름사용방법kebab-casethe-quick(언어 사이에 -을 붙이는 방식)snake_casethe_quick(언어 사이에 _(언더바)를 붙이는 방식camelCase첫번째 단어의 앞글자는 소문자로 붙임PascalCaseTheQuick(단어의 앞글자는 모두 대문자)  개발언어의 타입강한 타입의 언어타입 검사를 통과하지 못한다면 실행을 못함String, int, double 등 타입이 개발자가 쉽게 알게끔 정의됨약한 타입의 언어런타임에서 타입 오류가 발생하더라도 실행이 막히지 않음타입이 여러 종류인 값들이 상관없이 지정됨

JavaScript웹 페이지에서 복잡한 기능을 구현할 수 있도록 만들어진 프로그래밍 언어 JavaScript 태그의 사용방식태그의 사용방식사용 방법장단점내장 방식간단하게 조작 가능특정 페이지에서만 작동하는 기능인 경우, 따로 파일을 만들지 않는 게 경제적일 수 있을 것이다.링크 방식JS 코드의 양이 많다면 다른 파일에서 관리하는 것이 용이함.같은 기능을 다른 페이지에서도 사용한다면 JS 파일에 링크만 걸어서 표현하는 게 경제적임Head 태그 내부, Body 태그 내부, Head와 body 사이 등 head 태그가 열린 이후라면 어디든 가능  JavaScript의 변수 변수 종류변수의 특정var선언 단계와 초기화가 동시에 이루어지며 아무것도 할당하지 않으면 자동으로 undefined가 할당됨중복 선언 가능..

반응형1. 동일한 웹페이지를 보여주나 디바이스의 크기에 따라 레이아웃을 다르게 보여줌2. 모바일로 웹 사이트를 접속하는 경우가 많으므로 반응형은 매우 중요한 기술임 적응형사용자가 모바일 환경인지, PC 환경인지에 따라 다른 웹 페이지를 보여줌.  Viewport 반응형 웹을 디자인하기 위하여 기준으로 삼는 지표를 의미함기기마다 화면 사이즈가 다르기에 기기에 맞춰서 디자인하기 위한 크기 요소디바이스 화면 크기를 고려하여 사용자에게 최적화된 웹페이지를 제공함 @media(미디어 쿼리)   용어 정리의미코드 상의 예시미디어 유형All(전부)/print(인쇄)/Screen(전부)screen크기 규칙min(최소 뷰포트 넓이)max(최대 뷰포트 넓이)지정 기준을 결정min-width, min-heightBreakp..