Javascript-2일차

1117실습문제 리뷰

//2. 폼단위
// document.querySelector("[name=purchaseFrm]");
// document.forms[0]
// document.forms.purchaseFrm
document.purchaseFrm.reset(); // 폼하위의 input태그 value속성 초기화

 

document 객체 중에 몇개는 이렇게 접근 가능하다.

document.forms[0];

 

document.네임값 

즉, document.purchaseFrm 

으로도 접근이 가능함. name만 가능하고, id는 불가능하다.

 

css	javascript
<style></style> <link rel="stylesheet"  href=">	<script></script> <script src=''></script>

 

-

javascript 페이지 호출 시 

처음부터 끝까지 코드를 읽은 후 화면에 출력되는지라 

button onclick=함수호출

함수선언

이런식이여도 오류가 발생하지 않는다.

(+ button의 onclick은 클릭해야 함수를 호출하는 기능이므로)

-

html사용시만 <br>

그외 js시엔 \n 으로 개행

---

1120 학습 목차

7.scope

8.casting

9.operator

10.api_string_math_date

11.array

---

7.scope

지역,전역변수

전역변수:함수 바깥쪽에 선언된 변수

지역변수:함수 내부에서 선언되고 사용되는 변수.

//전역
let a = 10;
console.log(a);
function foo()
{
    //지역
    let b =20;
    console.log(b);
    //전역변수 접근
    a = 30;

 }

const	블럭 스코프, 상수 (되도록 const 사용)
let	블럭 스코프, 변수 (for문의 가변변수 정도만 let사용)
var	함수 스코프(함수만 인정/if,for문 인정x),변수, deprecated

 

주의할 점 : 에러 가 난 라인 이후로는 실행되지 않기 때문에 최우선으로 에러라인 수정할 것.

 

 

8.casting

NaN 

숫자로 표현 못할 때 발생하는 오류 키워드. Type:Number

sql의 null처럼 NaN과 계산하면 모두 NaN이 된다.

아래의 표에서 string을 형변환하는데 실패하면 NaN이 됨.

산술 연산 시 주의 할 형변환

number + string = string

number - string  = number | NaN (Not a Number)

number * string = number | NaN

number % string = number | NaN

number / string = number | NaN

 

비교연산자	★엄격비교연산자
== 타입이 달라도 값(형변환 후)이 같으면 true	=== 값과 타입이 모두 같아야 true
!= 값이 다르면 true	!== 값 또는 타입이 달라야 true

 

console.log(3 == "3"); //true
console.log(3 != "3"); //false

console.log(3 === "3"); //false
console.log(3 !== "3"); //true

//사전등재순 ex) ㅎ는 ㄱ보다 크다
console.log("a" > "b"); //b는 a보다 크다
console.log("a" < "b");
console.log("a" >= "b");
console.log("a" <= "b");

 

숫자 형 변환
Number()	숫자로 변환	변환 불가한 문자가 하나라도 있으면 NaN반환
parseInt()	정수로 변환	변환 불가한 문자가 있기 전까지 반환
parseFloat()	실수로 변환	변환 불가한 문자가 있기 전까지 반환

 

function test3()
{
    const num = '123.456';
    console.log(Number(num)); //123.456
    console.log(parseInt(num)); //123
    console.log(parseFloat(num)); //123.456

    const num2 = '123.456원';
    console.log(Number(num2)); //nan
    console.log(parseInt(num2)); //123
    console.log(parseFloat(num2)); //123.456

    const num3 = '$123.456';
    console.log(Number(num3)); //nan
    console.log(parseInt(num3)); //nan
    console.log(parseFloat(num3)); //nan

    //숫자가 아닌 문자열 제거
    const _num3 = num.replace(/[^0-9.]/g,'');
    console.log(_num3); 
    console.log(Number(_num3)); //123.456
    console.log(parseInt(_num3)); //123
    console.log(parseFloat(_num3)); //123.456
}

 

input value

input의 type이 text,number,range 등등..그 어떤 것이든 결과값은 string형이다.

(type은 해당 타입 외의 다른 타입 입력을 방지하는 것일 뿐이다.)

Infinity(무한수)

type:number

너무 큰 숫자는 표현되지 못하고 Infinity로 대체된다.

function test4()
{
    console.log(10/0); //Infinity
    console.log(10/0 === Infinity); //true
}

 

논리형으로의 자동 형 변환
모든 자료형은 boolean으로 평가 될 수 있다.
true(값이 있는 것)	123, 45.5, -100, "apple", [] , {} , Infinity
false(값이 없는 것)	0, 0.0, "", undefined, null, NaN

 

 

9.operator

짧은 조건문
실행문에 return은 작성 불가(if문을 사용할 것)
(조건식) && (실행문)	true 일때만 실행
(조건식) || (실행문)	false 일때만 실행

-prompt : input과 마찬가지로 string을 반환함.

 

  /**
     * true && true ->우항검사
     * true && false ->우항검사
     * false && true
     * false && false
     * ===========================
     * true || true 
     * true || false 
     * false || true ->우항검사
     * false || false ->우항검사
     * 
     * 위의 성질을 이용한 조건문
     */
    num % 2 == 0 && alert("짝수 입니다!");
    num % 2 == 0 || hol();

    if(num % 2 == 0)
        alert("짝수입니다.");
    else
        alert("홀수입니다..");


    //foo라는 id로 검색
    //foo가 없으면 body밑에 태그를 추가하시오.
    //null || (실행문)
    //false || (실행문)
    //두 번째 실행 때는 이제 foo가 존재하므로 또 추가되진 않음.
    //연산자우선순위 때문에 괄호처리할것.
    document.querySelector("#foo") || 
    (document.body.innerHTML +='<div id="foo">🍗🍗🍗🍗🍗🍗</div>');

 

 

10.api_string_math_date

String

"",'',``로 리터럴을 감싸서 표현한다.

String 내장객체에서 제공하는 api를 사용한다.

 

자바스크립트에서도 자바와 마찬가지로 charAt 기능을 제공함. str.charAt(i)

자바와 마찬가지로 불변성을 지님.

substring(start,end)	start포함 end미만까지 ex)str(1,3): 1,2만 출력
substr(start,length)	start부터 길이만큼. deprecated

replace(search,newStr)	str.replace('Apple','사과'); //맨 첫번째것만 변환
replaceAll(search,newStr) ecma2021에 추가됨	str.replaceAll('Apple','사과');//모두 변환

 

function test2()
{
    //@실습문제:사용자 입력값에서 알파벳 개수 세기
    /**
     * prompt를 통해 임의의 문자열을 받고 알파벳 개수 출력
     */
    const str = prompt(`문자열을 입력해주세요`);
    const newStr = str.replace(/[^a-zA-Z]/g,'');
    console.log('알파벳은 ',newStr.length,'개입니다.');

    //====================================================
    if(!str)
    {
        //아무것도 입력안하거나 취소 누르면.
        alert("유효한 문자열을 입력해주세요.");
        return;//짧은조건문에 사용못함.
    }
    let cnt = 0; //상수로 선언x 계속 변화(누적)하는 변수니까..
    for(let i=0;i<str.length; i++)
    {
        //console.log(str[i]);
        //java처럼 알파벳==아스키코드 이런게 없어서 범위 연산을 해야한다.
        if(str[i]>="A" && str[i] <="Z")
            cnt++;
        if(str[i]>="a" && str[i] <="z")
            cnt++;
    }
    alert(`입력하신 문자열 ${str}에서 알파벳의 개수는 ${cnt}개 입니다. `);
}

 

난수

Math.random() : 0.0 이상 1.0 미만 실수 반환

Math.random()*경우의 수 + 최소값

java:(int) Math.random()*경우의 수 + 최소값 

js:(Math.trunc(Math.random()*경우의 수 + 최소값 ))

ceil	올림
round	반올림
floor	내림
trunc	소수점 이하 버림

 

Date

날짜/시각을 관리하는 객체.

기본적으로 시스템 시각을 읽어와서 사용함.

console.log(now.getFullYear());
console.log(now.getMonth()+1);//0~11이라 사용하려면 +1
console.log(now.getDate());
console.log(now.getHours());
console.log(now.getMinutes());
console.log(now.getSeconds());

console.log(Date.now()); //UTC time/초(Epoch Time)
const date = new Date(Date.now()); //UTC time으로 Date객체 생성.
console.log(date);

//특정 날짜 & 시각 객체
const someday = new Date(1999,8,9,12,30); //8월x 9월임. 0-based
console.log(someday);

 

11.array

Array

js의 배열은 타입지정이 없고, 크기도 제한이 없음.

java의 ArrayList<Object>와 비슷함.

const arr1 = [1,2,3]; //리터럴로 생성
const arr2 = new Array(1,2,3); //new 연산자로 생성

 

배열 사이즈 외의 인덱스를 참조시 undefined반환 (오류나지는 않음)

단, 해당 인덱스의 속성을 참조하면 에러가 발생한다.

Cannot read properties of undefined (reading 'abc');

undefined의 속성을 읽을 수 없다.==nullPointException

자바와 비슷하게 없는애를 확인하면 null로뜨는데

null인 애의 무언가를 참조하려고 하면 오류발생함(java의 nullstr.length()와 유사)

 

반복문

for
for in	각 속성명(index)을 매턴에 반환 객체 순회에 적합하다.
for of	각 속성값을 매턴에 반환

 

전개 연산자(Spread Operator)

const arr = [1,2,3];
const arr2 = ['가','나','다'];
const arr3 = [...arr,...arr2];
console.log(arr3);
for(let index in arr3)
{
      console.log(index,arr3[index]);
}

 

유사배열(가짜배열)

array 객체를 상속하지 않은, 배열모양만 흉내낸 객체.

index, length 속성만 있다.

array 객체가 제공하는 다른 메소드는 사용불가.

ex)

getElementalsByTagName

getElementalsByClassName

getElementalsByName

querySelectorAll

array가 아닌 객체는 array속성이 아님

//가짜배열을 진짜배열로 변환하기
//1.전개연산자
[...buttons].map(function(b) {console.log(b)});
//2.Array.from
Array.from(buttons).map(function(b){console.log(b)});

 

indexOf	해당 요소의 인덱스를 반환 존재하지 않을 시 -1 반환
lastIndexOf	마지막 요소 인덱스 반환
find	조건에 만족하는 최초의 요소를 반환
findIndex	조건에 만족하는 최초 요소의 인덱스를 반환
concat	두 배열 연결 (불변성) 원본은 그대로 유지 (concat은 한번에 2개만 연결 할 수있지만 전개 연산자는 여러개 가능)
join	<>split 해당 배열에 있는 요소들을 하나의 문자열로 합침(구분자는 아무거나 사용) ex)array.join(+);
sort	오름차순 정렬 (mutable)
reverse	리버스 (mutable)

 

//내림차순 정렬(또는 커스텀 정렬) - 정렬 기준함수를 같이 전달해야함
    console.log(nums.sort(function(a,b){
        return b-a; //내림차순 (기존은 return a-b;)
    }));

    //문자열 정렬
    console.log('홍길동'-'고길동'); //nan
    //연산하려고 하면 자동으로 홍길동과 고길동을 숫자로 변환시킨 후 
    //계산하려고 하는데 둘다 숫자로 바꿀 수가 없어서 NaN가 나옴

    console.log('홍길동'>'고길동'); //true
    console.log(names.sort(function(a,b){
        if(a>b) return -1; //자리교환
        if(b<a) return 1;
        return 0;
    }));

 

push	마지막에 요소 추가
pop	마지막 요소 제거 (반환)
unshift	0번지에 요소 추가
shift	0번지의 요소 제거(반환)
slice(start,end)	immutable start부터 end전까지[미만] 제거  end 생략시 start부터 끝까지 start,end 생략시 전체복제(0부터 끝까지) number | undefined =>숫자가 올수도있고 안올 수도있다.[생략 가능하다]
splice (start, delCnt, newItem1, newItem2,....)	mutable start부터 delCnt개를 삭제하고 새 요소들을 추가. 그리고 삭제 된 요소는 배열로 반환됨. 요소를 삭제하고 싶지 않다면 delCnt를 0으로 한다.
toString	java처럼 override 된 toString으로 배열을 문자열로 출력 가능.