Javascipt: document.write / console.log / alert / prompt / confirm

자바의 기초중에 기초이다

 

document~ : 많이 쓰지 않는다

 

console..log() : 창을 띄어서 확인하기 좋다

 

 

---

1. document.write()

html 문서에서 직접 출력

 

 

 

2.console.log

 

데이터를 받아서 왔을때 오류가 있는지 등을 확인하기 위해서 사용을 많이한다

 

 

 

 

3.alert

우선 순위가 가장 높다

알림 팝업창을 통해서 출력한다

 

 

 

 

---

console log 비슷한 개념

잘 사용 x

 

 

---

promt / confirm

promt : return 타입이 모든 integer, 내용들은 string으로 받는다

 

confirm : 리턴타입이 boolean이다

 

핵심

return타입이 어떤것인지 파악하는것!!!!

 

 

prompt 를 이용하면, 형변환을 많이 사용하게 된다

입력창을 통해서 데이터를 입력받는 prompt >> 리턴타입 String

 

confirm : 확인 및 취소를 통해 데이터를 입력받는 confrim() >> 리턴타입 Boolean

 

confirm("삭제하시겠습니까?")

 

 

자바는 예전언어이다 보니,  할당이 필요하므로, 정수형을 만들때도 int 라고 하는데

 

자바스크립트는

파이선과 자바의 중간과 같은 느낌으로 변수를 선언하게된다

이떄에는 자바스크립트 당시 컴퓨터 사양들도 많이 좋아졌기 때문이다

 

 

 

자바와 vs Javascript 차이

 

 

 

TypeScript 

요즘 급부상하고 있는 언어

자료형을 명시해준다, 개발을 편리하고, 정확성을 높인다

자바스크립트는 오류를 알려주지 않지만, 타입스크립트는 정확히 알려준다

 

 

변수 사용

 

 

 

자바스크립트 최대 단점 

변수 중복 가능

 

그래서 변수에서는 다음과 같이

var, let, const

가 사용된다

 

가장 많이 사용하는 것

let, const

 

그중 가장 많이 사용하는 것

const

중요한 내용, 변경될 수 없는 내용에 주로 사용

 

var

은 오픈소스에서 많이 사용된다

 

 

자바에서는 자료형에서 정수와 실수를 구분하지 않는다

자바스크립트도 마찬가지이다

 

자료형

 

undefined 

null 은 원리적으로 서로 다른데

보통, 비어있다라고 생각하면 편하다

(정말 나중에 이 둘의 차이를 활용하는 시점이 올 것~)

 

자바에서는 single cotation , 작은 따옴표는 문자를 의미하는데

자바스크립트에서는 작은따옴표, 큰 따옴표 구분하지 않고 문자열로 받아들인다

파이선이랑 비슷하다

 

 

 

연산자

자바에서는 /   몫

% 나머지를 의미한다

 

하지만, 자바스크립트에서는

/ 나누기이며

몫을 구하려고 하면 , 나머지를 빼줘야한다

 

=== 타입이 같은지 비교하는 구문

 

숫자를 문자로 비교했으므로 자동 형변환이 일어난다 = 동등연산자

 

정확한 값과 자료형 비교하는 것으로 일치연산자

 

자바에서는 일치연산자가 없는 이유?

처음에 만들때부터 형태를 정해주가 때문에

 

이미, 숫자랑 문자랑 다른지 알고 있기에, 보통의 경우에는 일치연산자를 사용하지 않는다 

 

 

---

예제 1

 

777을 백의 자리로 나눴을때 십의 자리 이하를 버리고 보여주기

 

예제 2

 

777을 백의 자리로 나눴을때 십의 자리 이하를 버리고 보여주기 , 다른 방법 

Tip : 몫을 활용하기

 

 

 

---

형변환

3.14를 정수, 실수형변환을 통해 console 창에 띄우기

 

 

number 

실수 정수를 가리지 않고 그냥 숫자로 처리하는 방법

toString

2,10,16 진수등으로 변경할 수 있게, 숫자를 넣어준다

 

String

 

 

예제 3

100 + 200 더하기

---

코드 해석

 

map에서 도큐멘트가져오자

 

mapoption에

center에 다음과 같은 옵션을 주고

level 3을 줘서 지도를 확대하고

---

코드를 작성하는 방법은 3가지가 있다

 

내부, 외부, 인라인 방식

---

 

파일을 내부 작성 방법으로 작성하는 경우

 

확장성이 떨어진다

---

파일 공유를 막는 방법, 외부 Javascript

 

1) 관리가 편하다

2) 소스를 숨길 수 있다

3) 재사용할 수 있다

 

인라인 Javascript

자주사용되지는 않는다

빠르게 수정하거나 기한이 급한 일들을 처리해야할때, 내부 스크립트를 분석해보지 않고 실행하는 방법이다

 

 

 

보통 우리가 일반적으로 자바스크립트를 공부할때는 내부 Javascript를 사용한다

---

조건문

 

 

예제1

코드

 

 

 

추가 개념 : jquery 는 이렇게 쓴다!!

 

 

 

---

예제2

두 개의 숫자를 입력받아 그 범위에 해당하는 숫자의 합을 구하시오

prompt와 consol log 사용하기

우선 콘솔 로그 작성하는 방법

 

console.log('%d는 숫자 %s는 문자열', a, b); // C 언어처럼 로그

 

 

내코드

 

다른 코드 1

---

자바스크립트 배열 특징

자바와 파이선의 중간점

길이를 가지고 .length

대입이 된다 =

데이터 삽입이 가능하다 append(파이선) > push

데이터 타입 지정X

 

자바스크립트는 배열의 길이를 지정할 수 있다

추가로, 대입할 시 길이가 증가할 수 있다

실습 코드

 

배열의 선언 방식

배열의 선언 방식

배열의 생성 방식

배열의 생성 방식

배열의 데이터 추가

배열의 데이터 추가

배열의 길이를 구할떄

배열의 길이를 구할떄

예제

1차원 정수형 배열을 선언한 후 원하는 값으로 생성합니다

배열의 값 중 홀수인 값이 몇 개인지 출력하는 프로그램을 작성하세요

우선 사용해야하는 기능은

alert 이다!!

 

 

 

에러 코드

---

에러 코드

모범코드

새로운 인덱스를 만드는 것은 부담되기에 아래방법을 선호한다

 

---

push, pop, unshift, shift

배열의 맨 마지막 인덱스에 데이터를 추가

배열의 맨 마지막 인덱스에 데이터를 삭제

배열의 맨 첫번째 인덱스에 데이터를 추가

배열의 맨 첫번째 인덱스의 데이터를 삭제

 

내장함수 & 캡슐화

alert는 따로 사용자가 만든 것이 아닌, 자체적으로 갖는 기능이다

 

 

자바스크립트 함수 사용 / 목적

어떠한 실행코드를 묶어서 실행하기 위함

중북되는 코드 최소화

코드 블록화 > 코드 조각화

매개변수와 입력값의 데이터 타입이 동일한지 검사하지 않는다

왜? 데이터 타입을 검사하지 않는다

매개변수와 입력값의 개수가 같은지 확인하지 않는다

왜? 내부적으로 argument 객체가 호출되어 인자들을..

입력값의 개수가 매개 변수의 개수보다 적다면 매개 변수의 값은 undefined로 설정된다

 

TypeScript 언어가 나온 이유?

이러한 undefined 와 같은 에러가 나지 않는, 좀 빡센 규칙을 적용하는 언어이다

최근 엄청난 인기를 구가하며 상승중인 언어이다!!

 

함수만들기 실습

 

 

함수만들기 실습 2

결과값이 뜨질 않는다

왜냐하면 minus 함수에 대한 값이 return 타입을 통해서 저장이 되었지만, 출력이 되지 않았기 때문이다.

 

객체 > 배열 사용 빈도수

객체안에는 배열도 넣을 수 있고, 함수도 넣을 수 있어서, 정말 활용도가 높다

자바에서도

 

 

객체 기본 구조

꺼내올때는 .을 찍어서 가져온다

 

키값을 쓰는 이유

명시하기 위해서

 

함수명이 빠진 이유는 skill이라는 값으로 불러올 것이기 때문에

 

skill은 함수를 호출하는 것이기 떄문에

이렇게 쓰지말고

이렇게 쓴다

키값을 추가할 수 있다

하지만 키값을 추가하는 것은 좋지 않기 떄문에, const를 이용한 객체 생성을 한다

 

 

객체 가져오기

 

---

 

 

---

가장 중요한 파트 다음 시간에

html 문서 읽는 방법

 

webbrowser -> web reading -> create dom -> page loading complete

 

 

DOM Structure

최상위 객체 document 에 내가 보는 모든 데이터가 담겨있다

 

align 같은 속성을 갖는 후손 등등..

태그따로, 글자따로, 속성따로 존재하는 것이 바로 DOM 구조이다

 

 

왜 굳이 이렇게 분리 해놓을까?

접근하기 쉽게

 

 

요소란?

태그와 컨텐츠를 합친 것

<p>안녕하세요</p>

 

getElement, getElements 의 차이?

 

id : 한 페이지에 한개만 존재한다

elements : class는 이름을 부여하는 기능은 아이디와 같지만, 복수 가능하다.

 

return type 이 서로 다르다

getElementByID(id) : 단수개의 데이터를 요청한다

getElementsByClassName(class) : 배열 형태로 데이터가 생성, 인덱스 형태로 활용하기

 

HTMLCollection : 유사배열이다. 길이와 인덱스를 활용할 수 있지만, 배열은 아니다

 

---

innerText, innerHTML

 

 

버튼을 클릭했을때, p태그 안에 존재하는 내용(컨텐츠)를 수정

innerText 수정을 할때는 =(대입)을 통해서 수정가능!

innertext, innerhtml 차이는 태그의 지원여부가 차이점!

보통 가지고 올때는 innerText / 수정할때는 innerHTML 사용한다!

 

---

DOM 실습 1

javascript 

태그를 생성하는 버튼을 클릭했을 때, 다음과 같은 내용이 출력되는 페이지를 만드시오

처음에 들고왔을떄

html에는 아무내용도 없는 상태임

 

 

안에 글자를 쓸때 바깥쪽이 큰 따옴표인 경우, 안에는 작은 따옴표 , 그 반대의 경우에도 가능

 

값이 누적이 되야 하므로

 

전체 코드

 

 

간결하게 하는 방법은

이 방법을 이용하면

 

 

결과화면

---