웹 UI개발 기초강의 정리 01

[ Script ]

setTimeout()

• 정해진 시간 후에 명령을 실행하도록 하는 JS 기본 함수.
• 시간 초가 다 되기 전에 중단하고 싶다면 clearTimeout() 함수를 실행하면 됨

/* 기본 구조 */
setTimeout(함수, 시간);

• 입력한 시간이 다 되면 입력한 함수의 코드를 실행함. 시간은 ms단위(1초 = 1000ms)

/* 5초 후에 "Hi!"를 출력해보자 */
function sayHi(Word) {
    console.log(Word);
}

/* 함수 구문을 직접 넣을 수도 있고 */
setTimeout(function() {console.log("Hi!")}, 5000);

/* 함수명을 넣을 수도 있음 */
setTimeout(sayHi("Hi!")), 5000);

 

 

setInterval()

• 정해진 시간마다 명령을 실행하도록 하는 함수. 시간은 역시 ms단위
• 반복을 멈추고 싶을 땐 clearInterval() 함수를 실행하면 됨

/* 기본 구조 */
setInterval(함수, 시간);

/* 5초마다 "Hi!"를 출력해보자 */
function sayHi(Word) {
    console.log(Word);
}

/* 마찬가지로 함수 구문을 직접 넣을 수도 있고 */
setInterval(function() {console.log("Hi!")}, 5000);

/* 함수명을 넣을 수도 있음 */
setInterval(sayHi("Hi!")), 5000);

 

 

콜백함수

정말 간단히 생각하면 다른 함수의 파라미터 자리에 들어가는 함수를 콜백함수라 부름. 위의 setTimeout() 같은 함수의 인자에 들어가는 함수나, addEventListener() 등의 함수의 인자에 들어가는 함수들.

 

 

.includes()

문자열에 찾는 글자가 들어있는지 확인해주는 메서드

"abcdefg".includes("abc") // true
"abcdefg".includes("ag") // false, a와 g 각각은 있지만 ag는 없어
"abcdefg".includes("a", "g") // true, 각각 분리해서 확인하면 있음
"abcdefg".includes("g", "a") // true, 순서는 상관 없음
"abcdefg".includes("") // true, 빈 문자열은 무조건 포함
"abcdefg".includes("xyz") // false

 

 

정규표현식(regular expression)

문자를 검사하고 싶을 때 사용하는 식

/* 기본 구조 */
/검사요소/.test(검사대상)

/* 예시 */
/H/.test("Hello!") // true

 

 

정규식 주요 문법

• /[?-?]/ :정규식 내에 대괄호 []를 통해 검사 요소의 범위를 정해줄 수 있음. test()시 범위 내 글자 중 하나라도 검사대상에 포함돼있으면 true를 반환함

/* 대괄호 범위 내의 문자 중 하나라도 포함돼있으면 참 */
/[a-z]/.test("abcdefg") // true

/* 대문자는 별개임에 주의 */
/[A-Z]/.test("abcdefg") // false

/* 모든 알파벳 범위를 설정하고 싶을 때 */
/[a-zA-Z]/.test("abcdEFG") // true

/* 모든 한글 범위를 설정하고 싶을 때 */
/[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test("안녕하세요") // true

• /\S/ : 특수문자도 포함해서 아무 문자 하나라도 있으면 true

/* 특수문자만 있어도 참 */
/\S/.test("****"); // true

/* 빈 문자열이면 거짓 */
/\S/.test(""); // false

/* 그냥문자와 특수문자가 함께 있어도 참 */
/\S/.test("Hello!"); // true

• /^?/ : 시작하는 문자를 검사할 수 있음

/^a/.test("abcdefg"); // true, a로 시작하니까 참
/^abc/.test("abcdefg"); // true, 여러 글자도 가능

• /$?/ : 끝나는 문자를 검사할 수 있음

/g$/.test("abcdefg"); // true, g로 끝나니까 참
/efg$/.test("abcdefg"); // true, 여러 글자도 가능

 

• /?|?/ : 정규식 버전 or조건, 검사 요소 중 하나라도 있으면 true 반환

/a|c|g/.test("abcdefg"); // true, 여러 번도 가능

 

• /?+/ : 검사대상에서 검사요소를 찾았을 때, 그 글자 뒤 글자도 검사요소와 일치하면 반복해서 찾아줌

/a/.test("aaaaaabcdefg");
/a+/.test("aaaaaabcdefg"); // 둘다 true지만, 위는 a 하나만 찾고 아래가 반복되는 a를 모두 검사

/a+b/.test("aaaaaabcdefg"); // true, a 반복구간이 끝나면 b가 나오냐는 뜻
/a+c/.test("aaaaaabcdefg"); // false, a 반복구간이 끝나고 나오는 글자가 c가 아니기 때문

▼ 이메일 확인 정규식 예시

 이메일은 "????@????.????"의 형식임. 이때 온점은 정규식 내 문법으로 활용하기 때문에, 문자 "."를 찾고 싶다면 온점 앞에 역슬래시 \를 붙여줘야 함

/\S+@\S+\.\S+/.test("tID@tCite.com"); // true

 

 

script에서 css 관련 명령하는 법

셀렉터로 원하는 요소를 지정한 후 메서드를 입력하면 되는데, 두 가지 방식이 있음

하지만 스크립트에서 너무 많이 css 간섭을 하면 성능이 저하되니 꼭 필요할 때만 활용하자

• 기본 자바스크립트 방식 .style.??? =

document.getElementById("myImg").style.width = "50vw";

• JQuery 방식 .css()

/* 한 속성만 수정할 경우 */
$("#myImg").css("height","50vh");

/* 여러 속성 수정할 경우 */
$("#myImg").css("height":"50vh", "width":"50vw");

 

 

[ HTML ]

<span></span> 

단순 텍스트나 인라인 콘텐츠 등에 스타일이나 HTML 속성, 스크립트를 적용해주기 위해 감싸주는 태그

<!-- 기본 구조 -->
<div>
    안녕하세요! 시작까지 <span>5</span>분 남았습니다!
</div>

<!-- span태그에 id나 class 등을 붙여 활용 -->
<div>
    안녕하세요! 시작까지 <span id="remainingTime">5</span>분 남았습니다!
</div>

 

 

[ CSS ]

vw와 vh

• viewport height와 viewport width. 현재 실행 중인 스크린 크기에 맞춰 상대적 크기를 반환할 때 쓰는 단위. 
• 전체 화면이 꽉 차는 기준은 100vh, 100vw임

/* 만약 화면 높이가 1000px, 너비가 800px이라면 */
.myImg {
    height = 80vh;
    width = 80vw;
} /* 이미지의 높이는 800px, 너비는 640px이 됨 */