JavaScript practice_240402
배열의 기능
- 값이 존재하는지 검색 : indexOf(찾을 값);//0번째 방부터 검색 수행.
- var 변수명 = 배열명.indexOf(찾을 값)
//찾을 값에 대한 인덱스가 반환, 값이 없다면 -1을 반환.
- 삭제 : splice(시작인덱스, 삭제할 방의 수)
- 배열명.splice(시작인덱스, 삭제할 방의 수)
- 배열 합치기 : ...배열명
- var 배열명 = [값,,,...배열명];
- 배열에 가장 마지막에 추가 : push(추가할 값)
배열명.push(...배열명);
이차원 배열
이차원 배열은 제공되지 않으나 일차원 배열을 사용하여 이차원 배열을 만든다.
행과 열로 구성된 배열
이차원 배열의 한 행은 일차원 배열로 이루어져 있다.
1. 생성 : 일차원 배열을 생성
var 배열명 = new Array();
2. 방에 일차원 배열을 생성 //이차원 배열이 된다.
배열명[방의 번호] = new Array(); //배열에 할당된 값을 모를 때
배열명[방의 번호] = [값,,,]; //배열에 할당된 값을 알 때
3. 값 할당
배열명[행의 번호][열의 번호] = 값;
//행(바깥 일차원배열의 방의 번호)
//열(안쪽 일차원배열의 방의 번호)
4. 값 사용
배열명[행의 번호][열의 번호]
일괄처리)
for( var i=0; i<배열명.length; i++){
for( var j=0; j<배열명.length; j++){
배열명[i][j]
}
}function(함수)
자주 사용될 기능을 미리 구현하여 필요한 곳에서 사용하기 위해.
중복코드를 줄일 수 있다.
업무를 구분하여 작성할 수 있다.
함수명은 하나로 만들어서 사용.
built-in function, user define function으로 구분한다.
호출하여 사용한다.
반환형이 없다.(개발자가 데이터형을 지정할 수 없기 때문에 반환형을 설정할 수 없다.)
기명함수와 무기명 함수 두가지로 작성가능.
- 기명함수
function 함수명(매개변수,,,){
return 값;
}
호출)
함수명(값,,,)- 무기명 함수 : 함수를 변수에 할당하여 사용한다.
(함수가 값으로 취급된다. : first class function)
선언)
이름이 없으므로 직접 호출은 불가능, 변수 또는 매개변수에 할당될 수 있다.
var 변수명 = function(매개변수,,,){
return 값
}
호출)
변수명(값,,);* 사용자의 동작에 따른 함수 호출
HTML 태그의 onXxx="" 속성을 사용하여 사용자의 동작을 감지하고, 자바스크립트의 함수를 호출한다.<td onXxx="">
onXxx = "자바스크립트 함수 또는 코드 기술"
* 클릭 / onclick
모든 태그에 적용 가능.
<input type="button" onclick="자바스크립트 코드">
<img src="" onclick=""/>
* 더블클릭 / ondblclick
<input type="button" ondblclick="자바스크립트 코드">
* 로딩 / onload
<body>에만 정의할 수 있다.
로딩될 때 실행 - 웹 브라우저가 실행된 후 HTML을 요청하고 응답받고 body를 그리기 시작할 때
팝업창 띄울 때
* 키가 눌릴 때 / onkeydown & 키가 올라올 때 / onkeyup
키 입력이 가능한 태그
<input type="text,password">, <textarea>
<input type="text" onkeydown="자바스크립트코드"/>
<input type="text" onkeyup="자바스크립트코드"/>
* 값이 변경될 때 / onchange
<select>, 키 입력이 가능한 태그
<select onchange="자바스크립트코드">
: 이전에 선택한 옵션과 다른 옵션이 선택되면 동작
<input type="text" onchange="자바스크립트코드">
: 커서가 들어갔을 때의 값과 커서가 빠져나왔을 때의 값이 다르면 동작
* 커서가 빠져나올 때 / onblur
커서를 가질 수 있는 태그
<input type="text,password">, <textarea>,
<input type="text" onblur="자바스크립트"/>
* 마우스포인터가 올라갔을 때 / onmouseover
* 마우스포인터가 빠져나갔을 때 / onmouseout
모든 태그
<div onmouseover="자바스크립트"></div>
<img src="" onmouseout="자바스크립트 코드"/>HTML영역을 JavaScript영역으로 변경
HTML태그의 속성의 값을 정의하는 부분은 HTML영역이므로 HTML관련 코드만 작성가능.
<태그명 속성="값"/>//HTML영역이므로 HTML관련코드만 작성가능
- HTML영역을 Javascript영역으로 변경
JavaScript; 을 붙여주면 자바스크립트 영역을 변경.
<a href="javascript; 자바스크립트 코드 정의">//HTML영역에서 JS영역으로 전환.- ES6에서는 매개변수에 초기값을 설정할 수 있다.
arguments를 입력하지 않으면 설정된 값이 입력된다.
function 함수명( 매개변수명 = 초기값,,,){
}
호출)
함수명()
함수명(값)
내장함수
수학함수
Math.abs(), Math.round(), Math.ceil(), Math.floor(), Math.random(),,,
-
정수가 아닌 값을 정수로 변환.
parseInt(값) -
실수를 정수로 변환
var val=parseInt(4.2); -
문자열 정수로 변환
var val=parseInt("2024"); -
innerHTML
JS에서 발생한 값을 HTML태그 안쪽에 생성할 때 사용하는 속성
동적으로 화면을 변경할 때 사용.
사용법
1. 디자인 적용할 태그를 찾기
var tag = document.getElementById("아이디");
2. 찾을 태그에 디자인을 적용
tag.innerHTML = "HTML생성하여 추가";
문자열
문자열의 길이는 length keyword로 얻는다.(함수가 아님)
문자열.length => 함수로 지원하지 않는다. ()를 사용하면 error발생
-
제공함수 : toUpperCase(), toLowerCase(), indexOf(), lastIndexOf(), substring(), trim(), startsWith(), endsWith(), concat(), charAt(), split(), replaceAll()
-
같은지를 비교할 때에는 == 연산자로 비교한다.
function useString(){
var msg = "asSDHdDFHwetf";
var output="<ul>";
//length는 키워드이므로 ()를 붙이지 않는다.
output += `<li>${msg}의 글자수 ${msg.length}</li>`;
//대문자 변환
output += `<li>${msg}의 글자수 ${msg.toUpperCase()}</li>`;
//소문자 변환
output += `<li>${msg}의 글자수 ${msg.toLowerCase()}</li>`;
//문자열에 문자열이 존재하는지 : 존재하면 시작인덱스, 존재하지 않으면 -1
output += `<li>${msg}의 'wet'가 존재 ${msg.indexOf("wet")}</li>`;
//문자열에 문자열이 존재하는지 : 존재하면 시작인덱스, 존재하지 않으면 -1
output += `<li>${msg}의 'k'가 존재 ${msg.indexOf("k")}</li>`;
msg='javascript';
output += `<li>${msg}의 indexOf'j'가 존재 ${msg.indexOf("j")}</li>`;
output += `<li>${msg}의 indexOf 'a'가 존재 ${msg.indexOf("a")}</li>`;
output += `<li>${msg}의 lastIndexOf 'a'가 존재 ${msg.lastIndexOf("a")}</li>`;
//substring(시작문자열, 끝문자열+1)
output += `<li>${msg}의 4~9번째 사이의 문자열 ${msg.substring(4,10)}</li>`;
//substring(시작문자열)
output += `<li>${msg}의 4번째에서 끝까지 사이의 문자열 ${msg.substring(4)}</li>`;
//charAt(인덱스) : 해당인덱스의 문자열
output += `<li>${msg}의 2번째 인덱스의 문자열 ${msg.charAt(2)}</li>`;
//trim() : 앞뒤 공백을 자르기
msg=" java script ";
output += `<li>[${msg}의 앞뒤 공백 제거 [${msg.trim()}]</li>`;
//replaceAll() : 치환 replaceAll('찾을 문자열', '변경할 문자열')
output += `<li>[${msg}의 a를 찾아서 k로 변경 [${msg.replaceAll("a","k")}]</li>`;
//concat() : 문자열을 붙일 때
var msg2 = msg.concat("ABCDE");
output += `<li>[${msg2}]</li>`;
msg="JavaScript";
//== : 같은지 비교
output += `<li>${msg}가 \"JavaScript\"과 같은지 ${msg=="JavaScript"}</li>`;
//startsWith() : 문자열로 시작하는 지? startsWith(문자열)
output += `<li>${msg}가 \"Java\"로 시작하는지 ${msg.startsWith("Java")}</li>`;
output += `<li>${msg}가 \"java\"로 시작하는지 ${msg.startsWith("java")}</li>`;
//endsWith() : 문자열로 끝나는 지? endsWith(문자열)
output += `<li>${msg}가 \"t\"로 끝나는지 ${msg.endsWith("t")}</li>`;
msg="java,Oracle,JDBC,HTML,CSS,JavaScript";//CSV
//split() : CSV데이터를 구분하여 일차원 배열로 만들 때
var subject = msg.split(",");
output += `<li>${msg.length}개</li>`;
for (var i=0; i<subject.length; i++){
if(subject[i] == "JDBC"){
output += `<li>${subject[i].toLowerCase()}</li>`;
}else{
output += `<li>${subject[i]}</li>`;
}
}
output += "</ul>";
var divNode = document.getElementById("output");
divNode.innerHTML=output;
}