<수업내용>
@배열
-> 다양한 타입의 데이터를 보관하는 변수의 모음
Java의 배열
int [] arr =[1,2,3,4,5];
String [] arr1 = ["abc", "Hello", "test"];
JavaScript 배열
var arr = [1,2, "Hi", [1,2,3]]
@배열의 선언
->비어있는 배열 선언하는 법
var arr =[ ];
var arr = new Array( );
var arr = new Array(5); (크기를 지정해주고 싶을 때)
@배열의 값 대입
->var arr = new Array();
arr [0]=1;
arr [3]=10;
@Array 객체 함수
indexOf("값") :배열에서 해당 값이 위치하는 인덱스를 리턴(없는 값 -1)
concat(배 열명) :배열을 결합할 때
(Concatenation)
join() :배열의 요소들을 결합하여 문자열 반환
[1,2,3,4] -> 1234
sort() :정렬
reverse() :배열 순서 뒤집기(반전)
push('값') :배열 맨 뒤에 요소 추가
pop() :배열 맨 뒤의 요소 제거
shift() :배열 첫 번째 요소 제거
unshift('값') :배열 앞에 새로운 요소 추가
toString() :배열을 문자열로 반환
slice(숫자, 숫자) : 배열의 요소 선택 후 가져오기
->원본 배열에 영향 없음
splice([index], 제거, 추가):배열의 index 위치의 요소 제거, 추가
@함수
-> 소스코드의 집합 메서드, 모듈, 기능, 프러시 저 등을 의미
-> function도 하나의 집합형
-> 함수는 인자 / 매개변수, 리턴 값을 가질 수 있음
@함수 선언 방법
function 함수명([매개변수]){
처리로직
[return 되돌려줄 값;]
}
@함수 호출
-> 함수는 반드시 정의가 되어야만 실행 가능
-> 함수명();
return 값이 없는 경우
-> 함수명();
return 값이 있는 경우
-> var 변수명 = 함수명();
@내장 함수(인코딩, 디코딩)
-> 웹 통신 시 유니코드 문자는 오작동을 일으킬 문제가 있어 인코딩을 필요로 함
escape()
-> URL로 보내는 문자열 중 알파벳, 숫자, @, *,-,_,+,.,/를 제외한 문자열을 인코딩
unescape()
-> escape로 만들어진 값을 디코딩
encodeURI()
-> 인터넷 주소에 사용되는 문자열 인코딩
-> (:,;,/,=,?,&)는 변환 안 함
decodeURI()
-> encodeURI()로 인코딩한 문자열을 디코딩
encodeURIComponent()
-> 알파벳, 숫자를 제외한 모든 문자 인코딩
decodeURIComponent()
-> encodeURIComponent()로 인코딩한 문자열을 디코딩
encodeURI > escape -> encodeURIComponent
#eval(String)
-> 문자열로 기술된 코드를 자바스크립트로 진행
#isFinite(number)
-> 숫자가 맞는지 확인(숫자가 맞으면 true)
-> 아무것도 없으면 true
#isNaN(number) - NaN -> Not a Number
-> 숫자가 아니면 true
<실습>
1. 배열
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button type="button" onclick="arrayTest();">배열 테스트</button>
<script>
function arrayTest(){
var arr = new Array();
arr[0] = 123;
arr[1] = 200;
arr[3] = 300;
console.log(arr);
var arr1 = [100,'홍길동',true,[1,2,3,4]];
console.log(arr1);
var arr2 = arr.concat(arr1);
console.log(arr2);
var arr3 = arr.concat(arr1,arr2);
console.log(arr3);
}
</script>
<br><br><br><hr><br>
<p> 다음 중 좋아하는 과일을 입력하세요 </p>
<p>바나나/포도/복숭아/수박</p>
<input type="text" placeholder="과일이름입력" id="fruit"><br><br>
<button type="button" onclick="indexTest();">결과 확인</button>
<script>
function indexTest(){
var fruit = document.getElementById("fruit");
var fruits =['바나나', '포도', '복숭아','수박'];
var value = fruits.indexOf(fruit.value);
if(value>=0){
alert("배열의"+value+"번째에 있습니다");
}else{
alert("입력하신 과일은 없습니다.")
}
}
</script>
<br><hr><br>
<button type="button" onclick="joinTest();">조인 테스트</button><br><br>
<button type="button" onclick="toStringTest();">toString 테스트</button><br><br>
<button type="button" onclick="reverseTest();">reverse 테스트</button><br><br>
<button type="button" onclick="sortTest();">sort 테스트</button><br><br>
<button type="button" onclick="pushTest();">push 테스트</button><br><br>
<button type="button" onclick="popTest();">pop 테스트</button><br><br>
<script>
function joinTest(){
var fruits =['바나나', '포도', '복숭아','수박'];
alert(fruits.join("/")); //구분자를 넣을수 있음
}
function toStringTest(){
var fruits =['바나나', '포도', '복숭아','수박'];
alert(fruits.toString());
}
function reverseTest(){
var fruits =['바나나', '포도', '복숭아','수박'];
console.log(fruits);
fruits.reverse();
console.log(fruits);
}
function sortTest(){
var arr =[1,5,2,6,10,22,4];
console.log(arr);
arr.sort(sortASC);
console.log(arr);
}
function sortASC(a,b){
return a-b;
}
function sortDESC(a,b){
return b-a;
}
function pushTest(){
var fruits =['바나나', '포도', '복숭아','수박'];
console.log(fruits);
fruits.push("사과");
console.log(fruits);
}
function popTest(){
var fruits =['바나나', '포도', '복숭아','수박'];
console.log(fruits);
fruits.pop();
console.log(fruits);
}
</script>
<br><hr><br>
<button type="button" onclick="sliceTest();">slice</button>
<button type="button" onclick="spliceTest();">splice</button>
<script>
function sliceTest(){
var fruits =['바나나', '포도', '복숭아','수박','사과'];
console.log(fruits.slice(2)); //2번부터 끝까지 (복숭아 수박 사과)
console.log(fruits.slice(1,2)); // 1번부터2번까지 (이상 미만)(포도)
console.log(fruits.slice(1,3)); // 1번부터3번까지 (이상 미만)(포도 복숭아)
console.log(fruits);
}
function spliceTest(){
var fruits =['바나나', '포도', '복숭아','수박','사과'];
console.log(fruits);
fruits.splice(1,1,"거봉"); //1번 인덱스 번호부터 1개를 지우고 거봉을 넣어라
// fruits.splice(1,3); //이때는 삭제만 됨
console.log(fruits);
}
</script>
<hr><hr>
</body>
</html>
2. 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//선언적 함수
// --> 만든 함수를 메모리에 바로 올려 놓고 사용함
// -->
//1. 매개변수도 없고, 인자값도 없는 함수
function test1(){
alert("버튼 클릭함!");
}
//2. 매개변수도 있고, 인자값도 있는 함수
function test2(data){
alert(data);
}
//3. 매개 변수는 없지만, 인자값은 있는 함수
function test3(data1,data2){
alert(data1);
alert(data2);
for(var i = 0; i<arguments.length; i++){
alert(arguments[i]);
}
}
function test4(){
var data = test5();
alert(data);
}
function test5(){
var data = document.getElementById("text1").value;
return data;
}
//익명함수
//--> 변수에 함수를 담아서 작성
//--> 함수 선언 이후 사용이 가능
//--> 변수에 담지 않는 경우 호출없이 스스로 동작하는 함수
//--> 스스로 동작하기 때문에
//--> 스스로 동작하기때문에 리턴을 할 수는 없음
// var test = function(){
// alert("익명함수입니다");
// };
//
// (function(){
// test();
// alert("자동으로 호출되는 함수");
//
// })();
</script>
<button onclick="test1();" type="button">함수1</button>
<button type="button" onclick="test2('매개변수전달');">함수2</button>
<button onclick="test3('이게','되나');" type="button" onclick="test3">함수3</button>
<br><br><br>
값 : <input type="text" id="text1"><p>값을 입력 후 아래 버튼을 눌러주세요.</p>
<button type="button" onclick="test4();">리턴 확인</button>
<br><hr><br>
<h2>escape / unescape</h2>
<p>버튼을 눌러 확인하세요</p>
<button onclick="original();">원본</button><br>
<button onclick="escapeTest();">escape</button><br>
<button onclick="unescapeTest();">unescape</button><br>
<script>
function original(){
var str = "http//www.naver.com?name=안녕";
alert(str);
}
function escapeTest(){
var str = "http//www.naver.com?name=안녕";
str = escape(str);
alert(str);
}
function unescapeTest(){
var str = "http//www.naver.com?name=안녕";
str = encodeURI(str);
str = decodeURI(str);
alert(str);
}
</script>
<br><br><hr><br><br>
첫번째 수 : <input type="text" id="number1"><br>
두번째 수 : <input type="text" id="number2"><br>
<button onclick="check();" type="button">숫자체크</button>
<button onclick="sum();" type="button">결과보기</button>
<p id="p1" style="border:3px solid red; height: 300px; width: 500px;"></p>
<script>
function check{
var num1 = document.getElementById("number1").value;
var num2 = document.getElementById("number2").value;
var result = document.getElementById("p1");
if(isFinite(num1) && isFinite(num2)){
result.innerHTML = parseInt(num1)+parseInt(num2);
}else if(isNaN(num1) || isNaN(num2)){
result.innerHTML = "숫자를 입력해주세요";
}
}
function sum(){
var str="";
str+="document.getElementById('number1').value + '+' +";
str+="document.getElementById('number2').value+'='+";
str+="(parseInt(document.getElementById('number1').value)+";
str+="parseInt(document.getElementById('number1').value))";
document.getElementById("p1").innerHTML = eval(str);
}
</script>
</body>
</html>'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글
| <이공계기술전문연수> 3. jQuery(3일차) (0) | 2019.09.26 |
|---|---|
| <이공계기술전문연수> 2. jQuery(2일차) (0) | 2019.09.25 |
| <이공계전문기술연수> 3. JavaScript(3일차) (0) | 2019.09.25 |
| <이공계기술전문연수> 1. jQuery(1일차) (0) | 2019.09.23 |
| <이공계전문기술연수> 1. JavaScript(1일차) (0) | 2019.09.22 |
