HighLight in your life~

자바스크립트 이벤트
- 이벤트 : 사용자의 입력 작업이나 시스템 상황의 변화 등의 사건
- 이벤트 핸들러 : 이벤트가 발생했을 때 그에 따른 행위를 결정하는 것
- 예시
 onLoad : 문서를 읽을 때 
 onFocus : 포커스를 얻을 때
 onBlur : 포커스를 잃었을 때
 onMouseOver : 마우스가 대상의 링크나 영역 안에 위치할 때 발생되는 이벤트 처리
 onMouseOut : 마우스가 대상의 링크가 영역 안을 벗어날 때 발생되는 이벤트 처리
 onMouseDown : 마우스 버튼을 눌렀을 때 발생

자바스크립트, Window 객체 - 웹 브라우저 창을 위한 속성과 메소드 제공

alert() : 경고 창을 보여줌
confirm() : 확인 대화상자 보여줌
open() / close() : 새 창 열기/창 닫기
setInterval() : 일정 시간마다 지정된 명령을 주기적으로 실행

자바스크립트, String 객체의 메서드 - 문자를 처리하는 객체

concat(string) : 문자열에 string 문자열을 연결
replace() : 임의의 문자열에서 지정한 문자를 다른 문자로 변경
match() : 임의의 문자열에서 지정한 문자가 나타나는 첫번 째 위치 값을 반환
split() : 임의의 문자열을 지정한 문자열이 나타나는 위치들을 나누어 두 개 이상의 문자열 배열로 만들어 반환
toUpperCase() : 대문자로 변환하여 반환

*** 화살표 함수
1. 매개 변수가 없는 함수const hi = function() {  return "안녕하세요";}

2. 매개 변수가 없는 화살표 함수const hi = () => { return "안녕하세요?" };

3. 매개 변수가 없는 화살표 함수(중괄호 생략)const hi = () => "안녕하세요?";

4. 매개 변수가 1개인 함수const hi = function(user) {  document.wirte(user + " 님, 안녕하세요?");}

5. 매개 변수가 1개인 화살표 함수const hi = user => {document.write(user + "님, 안녕하세요?");}

6. 매개 변수가 2개인 함수const sum = function(a, b) {  return a + b;}

7. 매개 변수가 2개인 화살표 함수const sum = (a, b) => a + b;

*** Array 객체의 메서드

concat : 기존 배열에 요소를 추가해 새로운 배열을 생성
every : 배열의 모든 요소가 주어진 함수에 대해 참이면 true 리턴하고, 그렇지 않으면 false 리턴
filter : 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 생성
forEach : 배열의 모든 요소에 대해 주어진 함수 실행
indexOf : 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스 찾음
join : 배열 요소를 문자열로 합침. 이때 구분자를 지정 가능함
push : 배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환함
unshift : 배열의 시작 부분에 새로운 요소를 추가
pop : 배열의 마지막 요소를 꺼내 그 값을 결과 반환
shift : 배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환
splice : 배열에 요소를 추가하거나 삭제
slice :  배열에서 특정한 부분을 잘라 냄
reverse : 배열의 배치 순서를 역순으로 만듬
sort : 배열 요소를 지정한 조건에 따라 정렬
toString : 배열에서 지정한 부분을 문자열로 반환. 이때 각 요소는 쉼표(,)로 구분

1. 스타일 시트 
브라우저 스타일 기본 스타일 
인라인 스타일 : 스타일 속성을 사용하는 필수 요소에 스타일을 사용하는 
내부 스타일 시트 : 문서 앞 부분에 문서에서 직접 사용하는 스타일을 모자이크서와 함께 정의하고 관리하는 외부 시트 :에서 문서 사용 스타일을 모자이크 때문에 저장한 후 연결해서 사용 

2. 스타일 우선 순위 
2-1. 중요도 사용자 스타일 -> 개발자 스타일 -> 브라우저 기본 스타일 

2-2. 적용 범위 !important -> 인라인 스타일 -> id 스타일 -> 클래스 스타일 -> 타입 스타일 

(스타일시트 선택자의 우선순위: (1) !important -> (2) Inline -> (3) #id 지정한 선택자 -> (4) .class 지정한 class선택 -> (5) 태그 이름을 지정한 Type 선택자 )

2-3. 나중에 작성한 스타일이 이미 작성된 스타일입니다

** 즉시 실행 함수

    <script>

  (function() {
    var userName = prompt("이름을 입력하세요.");
    document.write("안녕하세요? <span class='accent'>" + userName + "</span>님!");
  }());
        
    </script>

*** 매개 변수가 있는 즉시 실행 함수

    <script>

  (function(a, b) {
    sum = a + b;    
  }(10, 20));

  document.write("함수 실행 결과: " + sum);
        
    </script>

*** a태그 target속성 

<a href="주소" target="_self">클릭</a>

_blank : 새창 또는 새탭에서 OPEN
_self : 기본 값으로 현재 창에서 OPEN 
_top : 모든 프레임 제거하고 최상위창에서 OPEN
_parent : 부모창에서 창 OPEN
frame name : 연결 이름의 프레임에서 OPEN