본문 바로가기

전체 글

 (190)
[JavaScript] setTimeout, setInterval, 자식요소 (추가, 삭제) setTimeout setTimeout(함수, 시간) : 지정한 시간이 흐른 뒤 함수를 1회 실행 ( 1000 => 1초 ) 시작 종료 코드 실행 ( setTimeout 은 일회성 이지만 코드내에 자신 코드를 실행시키는 코드를 넣어서 무한으로 반복시킴 ) setInterval setInterval(함수, 시간) : 지정한 시간이 흐를때마다 함수 실행을 반복 ( 1000 => 1초 ) clearInterval(Interval로 설정한 변수명) : 반복중인 Interval 을 종료 toLocaleString() : 기본 내장함수인 Date() 함수의 기본 메소드로 , (년.월.일 오후/오전 시간.분.초) 포멧으로 시간을 나타낸다 start stop 코드 실행 innerHTML : 내부의 모든 HTML 코드를..
[JavaScript] 배열 배열 join ( 배열 값의 사이사이에 값을 추가, join 을 사용하면 배열이 string 자료형으로 변환 ) push, pop ( 배열의 마지막 값을 추가, 배열의 마지막 값을 제거 ) unshift, shift ( 배열의 맨 앞의 값을 추가, 배열의 맨 앞의 값을 제거 ) concat ( 배열의 마지막 값을 추가하지만 원본 배열은 건드리지 않고 복사본을 만든다 ) forEach ( 단순 배열 출력 및 연산에 사용, 리턴 값을 가질 수 없음 ) map ( 리턴 값을 가지므로 원하는대로 저장하여 사용할 수 있음 ) ★ 둘 다 괄호 안에 함수를 가진다 ★ Dictionary ( 키와 값을 가진다, 함수도 값으로 가질 수 있다 ) filter ( 데이터 중 해당하는 값만 걸러서 가져온다 ) ★ () 에 함..
[JavaScript] 이벤트 ( 마우스 동작, 키보드 동작 시 함수 호출 ) Event 모든 행위를 이벤트라 부른다 마우스 이벤트 코드 실행 키보드 이벤트 아이디와 연동하여 이벤트 발생 시 함수 호출하기 텍스트 값 코드 실행 이벤트 알아보기 0 0 코드 실행 download.jpg : 이상해씨 image.png : 파이리 좌측 이미지 : 마우스가 올라가고 나감에 따라 그림이 변경, 우측 이미지 : 마우스가 그림에서 클릭됨에 따라 그림이 변경 코드 간단히 변경 코드 실행 실습 예제 예제 풀이 이전 사진 다음 사진 코드 실행 실습 예제2 예제 풀이2 - 처음 시도(오류) - 테이블 안에 td 태그내부에 img 태그로 이미지를 불러옴 > 이후 img 태그에 각각 id 를 부여하여 innerHTML 을 사용하여 이미지를 display:none 으로 표현하고자 하였으나 실패 > inner..
[JavaScript] 함수 ( 익명 함수, 즉시 실행 함수 ) 함수 ( function ) - function 으로 정의한다. funtion 함수명(){실행할 코드} ( 자바의 변수와 동일하게 자바스크립트의 변수는 지역변수, 전역변수 등 어디서 선언되느냐에 따라 변수의 소멸 시점이 존재한다 ) 함수에 매개변수를 넘겨주기 코드 실행 여러개의 값을 리턴하고자 할때 - 배열을 사용 매개변수의 갯수가 다르거나 가변적일 경우 함수에서 처리하는 방법 함수 표현식 익명함수 - 한번 사용되고 사라짐 ( 메모리공간에서 삭제 ) 일반 함수 - 선언되면 메모리 공간을 미리 잡아먹고 사용할때 꺼내서 쓴다 즉시 실행 함수 즉시 실행 함수 코드 실행 ★ 익명 함수 ★ 실습 예제 예제 풀이 코드 실행
[JavaScript] 조건문, 반복문 JavaScript if 문 사용 예시 코드 실행 ( else if 도 자바 문법과 동일하게 사용할 수 있다 ) switch-case 문 for 문 while 문 실습 예제1 예제 풀이1 예제 풀이1 실습 예제2 예제 풀이2 실습 예제3 예제 풀이3 실습 예제4 예제 풀이4 실습 예제5 예제 풀이5 예제 풀이5 실습 예제6 예제 풀이6 콘솔창과 alert 창 둘 다 출력
[JavaScript] 변수 선언, 형 변환, 연산자, 출력 JavaScript 변수 선언, console.log 로 확인 스크립트 태그로 자바스크립트의 코드를 작성 - 작은 따옴표, 큰 따옴표 모두 사용 가능 - 줄바꿈을 사용하면 세미콜론을 생략 가능 - 스크립트 언어는 한 줄 한 줄 코드를 실행하기 때문에 코드에 오류가 있어도 오류코드 직전까지는 작동 ( java 는 컴파일러가 코드를 모두 읽고 한번에 출력하기 때문에 오류코드가 있으면 아예 작동이 되지 않음 ) console.log() : 개발자 콘솔에 값을 출력 ( F12 눌러서 console 탭에서 값을 확인 ) document.write() : 값을 웹에 출력 prompt() : 입력을 받음 ` (backtick) 을 사용하면 ${변수명} 을 적어서 표현이 가능하다 ( 자바의 printf 와 비슷 ) 코..
[CSS] CSS 기초2 CSS margin : 바깥 쪽으로 밀어냄 padding : 안쪽으로 밀어냄 css3 박스 모델은 content, padding, border, margin으로 구성되어 있다 footer 지역입니다 그림자 옵션 글씨 그림자 : text-shadow 이미지 그림자 : box-shadow 내용이 들어옵니다~~~ 배치하기 1 2 3 배치하기 1 첫번째 두번째 3 position - static : 고정, 변경 불가 - relative : static 상태에서 top, right, bottom, left 값으로 위치를 변경 가능 - absolute : 웹 페이지를 기준으로 top, right, bottom, left 값으로 절대 위치를 설정 position span1 span2 span3 기본 값은 static..
[CSS] CSS 기초 CSS css 스타일 시트 표준안 웹 문서에 글꼴, 색상, 정렬과 각 태그의 배치 방법 등 디자인 적용 css구성 선택자(selector) : 디자인을 적용할 대상 지정 속성 : 어떤 디자인을 설정할지 속성 값 : 속성에서 선택한 디자인을 어떻게 반영할지 선택자 id 선택자와 class 선택자의 차이 - id 선택자는 id 선택자를 여러개 중첩하여 사용할 수 없다. - class 선택자는 여러 class 를 중첩하여 사용할 수 있다. id를 부여할 경우 문서 내의 유일한 값으로 사용 문서내에서 동일한 id를 부여하면 안된다 class는 다른 태그에서 사용해도 된다 여러개를 동시에 부여할 수 있다 id 선택자와 class 선택자의 차이 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자 - 하위 선택자..
728x90

티스토리툴바