쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/html에 올려두었습니다.
배열의 초기화( 기본형 형식의 사용 )
var 배열명 = [값, ... ];
배열의 기능
* 검색
배열명.indexOf( 찾을값 ); // 0번째 방부터 검색 수행
// 찾을 값에 대한 인덱스, 값이 없다면 -1이 나온다.* 삭제 - 배열방을 삭제
배열명.splice( 시작인덱스, 끝인덱스 )// 끝인덱스 - 삭제할 방의 갯수
* 배열 합치기 - ...배열명
let 배열명=[값, …배열명];
이차원 배열( 일차원 배열을 사용하여 이차원 배열을 만든다. )
- 행과 열로 구성된 배열
- 이차원 배열의 한 행은 일 차원 배열로 이루어져 있다.
// 1. 생성
var 배열명=new Array();
// 2. 방에 일차원 배열을 생성 – 이차원 배열
배열명[방의번호]=new Array();// 배열방에 할당될 값을 모를 때
배열명[방의번호]=[값1, 값2, ...];// 배열방에 할당될 값을 알고 있을 때
// 3. 값 할당
배열명[행의번호][열의번호] = 값;
// 4. 값 사용
배열명[행의번호][열의번호];
// 일괄처리
for( var i = 0; i < 배열명.length; i++){ //행을 돌리기 위함
for( var j = 0; j < 배열명[i].length; j++ ){ //열을 돌리기 위함
배열명[i][j];
}
}
function ( 함수 )
- 업무를 구분하여 작성할 수 있다.
- 중복코드를 줄일 수 있다.
- 자주 사용될 기능 미리 구현하여 필요한 곳에서 호출하여 사용하기 위함
- built-in function( 자바스크립트에서 제공하는 함수 ),
user define function( 개발자가 작성하는 함수 )로 구분
- 호출하여 사용한다.
* 사용자 정의함수
// 기명함수
// 선언 - 반환형이 없다.( 개발자가 데이터 형을 지정할 수 없기 때문에 )
function 함수명( 매개변수, ... ){
return 값;
}
// 호출
함수명( 값, ... );
// 무기명함수( 익명함수 )
// ( 함수가 변수로 할당될 수 있다. – first class function )
// 선언 - 이름이 없기 때문에 변수에 저장한다.
var 변수명 = function( 매개변수, ... ){
return 값;
}
// 호출
변수명( 값, ... );
사용자의 동작에 따른 함수 호출
- HTML태그의 onXxx="속성"은 사용자의 동작을 감지하여 자바스크립트의 코드를
실행하기 위한 속성
- onXxx=“자바스크립트 영역” ( 자바스크립트 코드 기술, 함수를 호출 )
| 사용자동작 | 속성 | 주 적용 태그 및 사용법 |
| 클릭 | onclick | 모든 태그에 적용할 수 있다. <input type="button" onclick="자바스크립트 코드">,<button> |
| 로딩 | onload | <body>태그에만 정의할 수 있다. 로딩 - 브라우저가 실행된 후 HTML파일 요청하여 응답 받고 그리기 시작할 때 <body onload="자바스크립트코드"> |
| 키가 눌릴 때 | onkeydown | 키 입력이 가능한 태그 <input type="text,password">, <textarea> <input type="text" onkeydown="자바스크립트 코드"/> <input type="text" onkeyup="자바스크립트 코드"/> |
| 키가 올라올 때 | onkeyup | |
| 값이 변경될 때 | onchange | <select>, 키 입력이 가능한 태그 <select onchange="자바스크립트 코드"> - 직전 선택한 옵션과 다른 옵션이 선택 될 때 동작한다. <input type="text" onchange="자바스크립트 코드"> - 커서가 들어왔을 때 값과 커서가 빠져나갔을 때의 값이 다르면 동작. |
| 커서가 빠져 나갔을 때 |
onblur | 키 입력이 가능한 태그 <input type="text,password">,<textarea> - 커서가 빠져나가면 호출된다. <input type="text" onblur="자바스크립트 코드"/> |
| 마우스 포인터가 올라왔을 때 |
onmouseover | 모든 태그 <div onmouseover="자바스크립트 코드"></div> <img src=" " onmouseover="자바스크립트코드"> |
| 마우스 포인터가 빠져 나갔을 때 |
onmouseout | |
| 더블 클릭 | ondblclick | 모든 태그에 적용할 수 있다. <input type="button" ondblclick="자바스크립트 코드"> |
HTML태그의 속성
- HTML 태그의 속성값은 HTML영역의 값이므로 HTML영역에 관련된 코드만
작성할 수 있다.
<태그명 속성="HTML영역">( HTML 속성값만 사용가능 )
HTML영역을 JavaScript 영역으로 변경
- javascript:자바스크립트 영역으로 변경
<a href="javascript:자바스크립트 내용"></a>
ES6에서는 매개변수에 초기 값을 설정할 수 있다.
// 함수를 호출할 때 매개변수를 생략하면 초기값으로 설정된 값이 입력된다.
function 함수명( 매개변수=초기값, ... ){
}
내장함수
- 수학함수
Math.abs(), Math.round(), Math.ceil(), Math.floor(), Math.random()...
- 정수가 아닌 값을 정수로 변환
parseInt( 값 );
let val = parseInt( 3.25 );// 실수를 정수로 변환
let val = parseInt(“3.25”);// 문자열을 정수로 변환
- 문자열
길이 - keyword( 함수가 아님 )
"문자열".length;( ()를 붙일 수 없다. )
- 그 외의 함수들( Java 문자열 시간에 배움 )
toUpperCase(), toLowerCase(), indexOf(), lastIndexOf(), substring(),
trim(), replace(), split(), startsWith(), endsWith() , concat(), charAt(인덱스)
JavaScript의 값을 HTML tag로 출력
- 찾아낸 tag에 innerHTML 속성을 사용
- 태그명, class명 - 여러 개의 태그가 찾아진다.
- id명 - 하나의 태그가 찾아진다.
// <body>가 로딩된 이후에 사용되어야 한다.
// id를 가진 태그를 얻는다.
var tag = document.getElementById( "아이디명" );
tag.innerHTML = "태그에서 보여줄 값";
날짜
- Date클래스를 사용.
- 접속자의 컴퓨터의 날짜 정보가 얻어진다.( 모든 접속자가 동일한 날짜정보가 아닌
다른 날짜정보가 얻어 질 수 있다. )
// 객체생성 – 접속자 컴퓨터의 설정된 날짜정보가 얻어진다.
var date = new Date();
// 함수 호출
var year = date.getFullYear();
// 월은 0월부터 시작된다.
var month = date.getMonth() + 1;
'성장 일기 > 쌍용교육센터' 카테고리의 다른 글
| 0224/JavaScript (0) | 2023.02.24 |
|---|---|
| 0223/JavaScript (0) | 2023.02.23 |
| 0221/JavaScript (0) | 2023.02.22 |
| 0220/JavaScript 연산, 조건문 (0) | 2023.02.20 |
| 0217/CSS (0) | 2023.02.20 |
