새로운 블로그에 다시 정리해 놨습니다.
참고하시면 좋을 것 같습니다!

- 배열
https://youtaekjung.github.io/2018/04/30/js/JS-Array-method/

- 문자열
https://youtaekjung.github.io/2018/05/03/js/JS-String-method/


  1. BlogIcon 떱스턴 2018.05.03 18:18 신고

    주소가 바뀌었는지 링크를 클릭해도 접속이 안되네요! 404

새로운 블로그에 다시 정리해 놨습니다.

참고하시면 좋을 것 같습니다!


자바스크립트로 디데이 출력하기

단기 프로젝트에서 디데이를 출력하는 자바스크립트 코드를 짜게되어서 사용한김에 포스팅 하려함

코드

HTML

<div id="d-day"></div>

JavaScript

//디데이 종료 일자 설정
var countDownDate = new Date("May 9, 2017 06:00:00").getTime();

//1초마다 갱신되도록 함수 생성,실행
var x = setInterval(function() {
    // 오늘 날짜 등록
    var now = new Date().getTime();

    // 종료일자에서 현재일자를 뺀 시간
    var distance = countDownDate - now;

    // 각 변수에 일, 시, 분, 초를 등록
    var d = Math.floor(distance / (1000 * 60 * 60 * 24));
    var h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var s = Math.floor((distance % (1000 * 60)) / 1000);

    //id가 d-day인 HTML코드에 내용 삽입
    document.getElementById("d-day").innerHTML = "디데이까지 " + d +"일 " + h + "시간 " + m + "분 " + s + "초 남았습니다.";
});

jQuery 효과


작성방법 $("선택자").click(function(){ $("선택자").메소드;});

콜백함수는 앞의 함수가 끝나면 실행


jQuery 효과(effects)


숨기기 hide(speed, callback)

보여주기 show(speed, callback)

토글 toggle()


페이드인 fadeIn(speed,callback)

페이드아웃 fadeOut(speed,callback)

페이드토글 fadeToggle(speed,callback)

페이드투 fadeTo("slow", 0.7) 0.7은 투명도를 나타냄

속도는 "slow","1000" 등으로 표현


슬라이드다운 slideDown(speed,callback)

슬라이드업 slideUp(speed,callback)

슬라이드토글 slideToggle(speed,callback)


애니메이션 animate{( left: '250px', opacity:'0.5' height:'150px' width: '150px'}) 절대값

height: '+=150px' width: '+=150px'  상대값

height: 'toggle' 지정된 값 사용

애니메이션을 연속적으로 처리하는 큐기능


정지 stop(stopAll, goToEnd) 삭제여부지정

stopAll,goToEnd 둘다 기본값은 false


메소드 체인

연속으로 메소드를 쓰는

줄바꿈 가능


jQuery HTML


DOM = Document Object Model

HTML 및 XML 문서에 엑세스하기위한 표준 정의

text() html() val() 로 표현가능

attr(속성값, 변경)  속성값 가져올 때 사용


Element추가

append() html 끝부분에 내용 삽입

prepend() html  앞부분에 내용 삽입

after() 요소 뒤에 내용 삽입

before() 요소 전에 내용 삽입


remove() 선택된 요소 전체 삭제

empty() 선택된 요소의 자식요소 삭제


jQuery CSS

addClass() 다른 요소에 클래스 속성 추가 ex).addClass("important blue")

removeClass() 다른 요소에 클래스 속성 제거 ex).removeClass("blue important")

toggleClass() 클래스 속성 추가/제거 전환


css("background-color") 배경 색 반환

css("propertyname", "value") css속성 설정

css({"propertyname": "value", "propertyname": "value"}) 여러개의 css속성 설정

width() 폭 반환 / height() 높이 반환, 변경은 ()안에 변경값 입력

innerWidth() 패딩 포함 폭 반환 / innerHeight() 패딩 포함 높이 반환

outerWidth() 패딩,테두리 포함 폭 반환 / outerHeight() 패딩,테두리 포함 높이 반환(true)입력해야함


jQuery Traversing


parent() 선택 요소의 직접적인 부모 요소 반환 ex)$("span").parent

parents() 루트 요소까지 선택된 요소의 모든 상위 요소 반환 ex)$("span").parents("ul") span의 부모요소중 ul 반환

parentsUntil() 주어진 두 인자 사이의 모든 상위 요소 반환 ex)$("span").parentsUntil("div")


children() 선택 요소의 자식 요소 반환

find() find안의 요소 반환 ( "*" 입력시 모든 자식 요소 반환)


siblings() 형제 요소 반환 ex)$("h2").siblings("p") h2의 형제 요소중 <p>반환

next() 선택 요소 다음 형제 요소 반환 (<=>prev())

nextAll() 선택 요소 다음 형제 모두 반환 (<=>prevAll())

nextUntil() 선택요소 사이의 요소 모두 반환 (<=>prevUntil())


first() 첫 번째 요소 선택

last() 마지막 요소 선택

eq(1) 인덱스 번호 선택

not(".intro") intro 제외하고 선택


jQuery AJAX 

load() 

syntax: $(selector).load(URL,data,callback);


다른 프레임워크와 혼용시 $대신 jQuery작성

$.noConflict() 작성 뒤 사용

변수에 담을 수 있음 ex)var jq= $.noConflict()





스프레드 연산자(...)(JavaScript)

 

배열 리터럴의 일부를 반복 가능한 식(다른 배열 리터럴 등)에서 초기화하거나 식을 함수 호출에서 여러 인수로 확장할 수 있습니다.

var array = [[arg0ToN ,] ...iterable [, arg0ToN]]
func([args ,] ...iterable [, args | ...iterable])

iterable

필수.반복 가능한 개체입니다.

arg0ToN

선택 사항입니다.하나 이상의 배열 리터럴 요소입니다.

args

선택 사항입니다.함수에 대한 하나 이상의 인수입니다.

반복기에 대한 자세한 내용은 반복기 및 생성기(JavaScript)를 참조하세요.rest 매개 변수로 스프레드 연산자 사용하기에 대한 자세한 내용은 함수(JavaScript)를 참조하세요.

다음 코드 예제에서는 스프레드 연산자의 사용이 concat 메서드의 사용과 대조를 이룹니다.

var a, b, c, d, e;
a = [1,2,3];
b = "dog";
c = [42, "cat"];

// Using the concat method.
d = a.concat(b, c);

// Using the spread operator.
e = [...a, b, ...c];

console.log(d);
console.log(e);

// Output:
// 1, 2, 3, "dog", 42, "cat"
// 1, 2, 3, "dog", 42, "cat"

다음 코드 예제에서는 함수 호출에서 스프레드 연산자를 사용하는 방법을 보여줍니다.이 예제에서는 두 개의 배열 리터럴이 스프레드 연산자를 사용하여 함수로 전달되며 배열은 여러 인수에 확장됩니다.

function f(a, b, c, x, y, z) {
  return a + b + c + x + y + z;
}

var args = [1, 2, 3];
console.log(f(...args, 4, ...[5, 6]));

// Output:
// 21

스프레드 연산자를 사용하여 이전에 apply 사용을 필요로 한 코드를 간소화할 수 있습니다.

function f(x, y, z) {
    return x + y + z;
}

var args = [1, 2, 3];

// Old method
func.apply(this, args);
// New method
func(...args);


출처:https://msdn.microsoft.com/ko-kr/library/dn919259(v=vs.94).aspx

JavaScript의 위치

<script>태그 사이에 위치 <head>, <body> 둘다 위치 가능


JavaScript Output

Window.alert() 경고창

documnet.write() HTML출력 (테스트용) HTML로드 후 작성시 기존 문서 삭제

innerHTML HTML출력 요소로 작성 document.getElementById(ID)를 사용해 HTML에 접근

console.log() 브라우저 콘솔에 작성


JavaScript 문법(Syntax)

세미콜론(;)으로 구문 구별/ 텍스트는 " 또는 ' 안에 작성

변수는 var로 선언 ex) var x = 2;

주석은 //(한줄) /* */(여러줄) 로 작성

대소문자 구별하여 사용

첫 번째 문자는 문자, _, $ 세가지만 가능/ 예약어 사용 불가

camelCase 사용


JavaScript 키워드(keyword)

continue 루프 시작

debugger 디버깅 실행

do ...while 조건문이 참일때 실행,반복

for 조건문이 참인 조건 설정

function 함수 선언

if ...else 조건문 선언

return 함수 반환

switch 조건이 맞지 않을때 case 변환 break 스위치,루프 종료

try ... catch try에서 맞는 조건을 catch해서 실행


JavaScript 변수 (variable)

var 변수 선언 ( =는 할당연산자 == 동등연산자)

한번에 여러개 변수 설정 가능

ex) var a =1, b=2, c=3;

왼쪽에서 오른쪽으로 명령 수행

ex)

var x = "A" + 16 +4 => A164

var x = 16+ 4 +"A" => 20A 

배열로 변수 선언 가능

ex) var A = ["a", "b", "c"]


JavaScript 함수 (function)

function(변수1, 변수2) { return : code }

함수 호출 방법

event( ex)버튼 클릭) / call / 자동

변수 선언 > 함수 실행 > return 에의해 반환


JavaScript 객체 (object)

속성(properties) 선언 중괄호 사용

ex) var person = { a:"babo", b="jjindda", c="pig"};

빈 값은 null 사용

objectName.methodName() 로 액세스


JavaScript Scope

함수 안에 var 선언시 function에서만 사용 가능 (local변수)

함수 밖에 선언시 전체에서 사용 가능 (global 변수)

함수 안에 var없이 선언해도 전체에서 사용 가능 (권장x)


JavaScript 이벤트 (event)

onchange 변경되었을 때

onclick 클릭했을 때

onmouseover 마우스를 올렸을 때

onmouseout 마우스를 다른곳으로 옮겼을 때

onkeydown 키보드키를 눌렀을 때

onload 페이지로드완료


JavaScript 문자열 (strings)

"" 내에 "작성시 \"로 작성

.length 문자열 길이 반환

.indexOf("a") a의 첫번째 시작 지점 반환

.lastIndexOf("a") a의 마지막 시작 지점 반환

 문자열 추출 방법 

slice(start, end) 시작,종료 위치에서 추출

substring(start, end)  두 사이의 내용 나머지 삭제

substr(start, length) 뒤에서부터 카운트, 삭제


.replace( a, b) a를 b로 교체

.toUpperCase() 대문자로 변환

.toLowerCase() 소문자로 변환

.concat(a, b) 두가지 이상 문자열을 결합

.charAt(0) 0번째 문자열 반환

.charCodeAt(0) 0번째 유니코드 반환

str[0] 0번째를 문자열에 액세스 (권장x)

.split(" ") " "안의 것으로 변환


JavaScript 숫자 (numbers)

숫자는 64비트 값(0~51) 멱지수 (52~62) 기호 (63)

지수표기x시 15자리까지 정확한 것으로 간주

0x로 시작하는경우 16진수로 해석 ex) 0xFF = 255


.toString() 문자열로 숫자를 반환

.toExponential(숫자) 반올림 지수 표기법을 사용하여 작성된 숫자로, 문자열을 반환

.toFixed(숫자)  소숫점을 숫자만큼 문자열로 반환

toPrecision(숫자) 지정된 숫자의 길이만큼 문자열 반환

valueOf() 숫자로 순자를 반환


변수를 숫자로 반환하는법

Number()

parseInt() 문자열을 분석해 정수를 반환, 공백 허용/ 첫 번째 숫자 반환

parseFloat() 문자열을 분석해 수를 반환, 공백 허용/ 첫 번째 숫자 반환


속성

.MAX_VALUE 표현가능한 최댓값 반환

.MIN_VALUE 표현가능한 최솟값 반환

.NEGATIVE_INFINITY 음의무한대 반환

.NAN Not-a-Number 반환

.POSITIVE_INFINITY 무한대 반환


JavaScript 수학 개체(Math Object)

Math.round(a) 가까운 정수로 반올림 반환

Math.pow(a,b) a^b 반환

Math.sqrt(a) 루트a 반환

Math.abs(a) 양수값 반환

Math.ceil(a) 올림

Math.floor(a) 내림

Math.sin() sin값 반환

Math.cos() cos값 반환

Math.min(a, b, c, d) 최솟값 반환

Math.max(a, b, c, d) 최댓값 반환

Math.random() 임의의 수 반환 0에서1사이(0포함)


JavaScript 날짜(date)

.toString() 문자열로 날짜 반환

.toUTCString() UTC문자열로 날짜 반환

.toDataString() 읽기쉬운 형식으로 날짜 변환

시간지정x시 브라우저시간 


JavaScript 배열(array)

배열 만드는 법 var x = [a, b, c] / var x = new Array(a, b, c)  여기서 x[0] = a

x.length 배열의 길이

x.push 배열에 삽입

xtypeof 사용으로 배열 확인

x.toString로 배열을 문자열로 반환

x.join(" * ") 구분기호를 포함해 배열 반환

x.pop 배열의 마지막 요소 제거

x.shift 배열의 첫번째 요소 제거

x.unshift 배열의 첫번째에 요소 추가

x[x.length] ="d"; 배열x에 d 요소 추가

delete x[0] 첫번째 요소 삭제

x.splice(2, 0, "a", "b") 시작점,삭제할 배열 수, 추가할 배열

a.concat(b) a와b배열을 연결

x.slice(1) 두번째 배열부터 표시

.sort(function(a, b){return b-a}); 내림차순

.sort(function(a, b){return a-b}); 오름차순


JavaScript 조건문(if ...else)

if문 if (condition) { if condition is true/code }

else문 if문이 거짓일 때 실행

if a{ } elseif { } else{ };


switch문 case중 일치하면 선택 불일치시 break, 다음case 체크

ex) switch(x) { case a:~ break, case b:~ break, default:~ }


JavaScript 디버깅 (debugging)

디버거 창에서 자바스크립트 표시 console.log() 사용

debugger; 사용시 다음코드 실행 중지




+ Recent posts