0727. Javascript

Javascript

0727. Javascript

삼월은마치 2023. 7. 27. 18:50

클라이언트 - 웹표준

html, css, js(javascript)

웹서버

jsp(java)

데이터베이스

interpreter(통역) vs compiler(번역)

한 줄 씩 동시에 vs 한번에 모두

script 언어(text) vs 0101 이진수 기계어

python vs java, c

Javascript

대소문자 구분 안 함

콘솔창(F12)켜고 새로고침 누르면서 프로그래밍 해야 오류를 알 수 있다.

디버그도 브라우저에서 해야한다.

노란 형광펜 부분은 생략가능(자바스크립트만 남아서) / 그림에서 경로는 상대경로. / js문법이라고 박스 친 부분은 html이 아닌 js 방식으로 써야함!

1. 프로젝트 시

2. 공부할 때

3. 비권장(inline 헷갈리니까..)

예시

<title>Document</title>

name = prompt("당신의 이름을 입력하세요");

console.log("당신이 입력한 이름은" + name + "입니다.");

</script>

</head>

<body>

</body>

새로고침하면 다시 왼쪽으로 돌아간다.

console 이하의 글(log)을 작성하라.

입력값은 + name + << 문장을 연결하는 기능을 한다.

단, 위와 같은 경우 <script>태그가 위에 있으면 아래 버튼을 알지 못 하는 상태이므로 뒤에 두기도 한다.

<title>Document</title>

</head>

<body>

<h1>자바스크립트</h1>

name = prompt("당신의 이름을 입력하세요");

console.log("당신이 입력한 이름은" + name + "입니다.");

</script>

</body>

하지만 개발자가 보기엔 전자가 낫다.

❤️오류 보는 법(오타)

검사창 켜서 [소스] 보기.

🖤 주석 표기법

[ ctrl + / ]

// 슬래시 뒤쪽으로만 주석

or

/* 여기가 주석 */

대입연산자

변수 = 값, 함수, 수식 등

a = b

b값을 a에 대입(assign)=저장하겠다. 대체하겠다!

: 같다

color : red

컬러는 레드와 같다.

변수

var(variable)

var name

var name;

name = prompt("당신의 이름을 입력하세요");

console.log("당신이 입력한 이름은" + name + "입니다.");

</script>

이렇게 미리 변수라고 메모하는 게 권장사항

입력 promt(), 출력 alert()

<body>

<h1>자바스크립트</h1>

//입력

today = prompt("오늘은 무슨 요일인가요?");

//출력

window.alert("오늘은" + today);

alert("반갑습니다");

//window객체는 생략 가능(웹브라우저를 뜻함--크롬,웨일 등), window.에서 .은 소속(of)을 뜻한다.

</script>

</body>

최종 출력 화면

ram 내의 저장공간과 변수선언

여기서 이름인 age 부분을 정하는 게 중요하다. "값의 의미"

항상 최근에 대입한 값을 저장하게 된다.

주의사항

숫자의 경우 y=x+1로 할 때 x값을 정의해 주지 않으면 에러 발생

- var 변수 : 중복이 발생하는 예전 방식 (소문자)

- const 상수 : 처음 선언한 게 있다고 에러를 알려 줌. 고정된 값을 바꿀 수 없음. 배열에서 [ ]안에 구성 내용은 변경 가능

(대문자로 씀)

- let : 밑에서 다시 선언하여도 개발자 스스로 컨트롤할 수 있으므로 하단에는 let으로 다시 선언하지 않는다.

딱 한 번만 선언 가능! (소문자)

https://bbeeyaks-moment.tistory.com/entry/%EB%B3%80%EC%88%98%EB%9E%80-%EB%B3%80%EC%88%98%EC%9D%98-%EC%84%A0%EC%96%B8%EC%B4%88%EA%B8%B0%ED%99%94%ED%95%A0%EB%8B%B9

변수란? 변수의 선언/초기화/할당

오늘은 내가 매일같이 쓰는 단어인 '변수', 그리고 변수의 '선언/할당/초기화'에 대해 간단히 정리해보자. 변수의 선언이 실행 컨텍스트와 연관지어 이해할 수 있다는 것을 처음 알았다! 깊이 있

bbeeyaks-moment.tistory.com

https://velog.io/@tess/%EB%B3%80%EC%88%98-%EC%84%A0%EC%96%B8-%EC%B4%88%EA%B8%B0%ED%99%94-%ED%95%A0%EB%8B%B9

변수 선언, 초기화, 할당

자바스크립트 어플리케이션에서 값에 상징적인 이름으로 변수를 사용합니다. 변수명은 식별자(identifier)라고 불리며 특정 규칙을 따릅니다.\- MDN 문법과 자료형변수는 쉽게 말해 프로그램 실행

velog.io

https://stay-present.tistory.com/23

javascript - const/ let / var 차이점 (재선언, 재할당, 유효범위, 호이스팅의 관점에서)

자바스크립트에서는 const , let , var 를 통해 변수를 선언한다. 일부 교육 자료들에서는 변수선언을 var 키워드로만 하는데 이는 const와 let이 2015년 ES6를 통해 생긴 새로 생긴 변수 선언자이기 때문

stay-present.tistory.com

문자열 string : 글자 ' '

숫자도 ' ' 로 묶이면 문자열이다.

//변수(저장공간) 선언하고, 값 할당

var name = "홍길동";

age = 10;

age = 20; //값 재할당 가능 O

var tel = "010111222";

var tel = "021112222"; //재선언 가능 O

console.log("내 전화번호는" + tel); //휴대폰?

let phone = "0101112222";

//let phone = '0311112222' // 에러! X

phone = "013335555"; //재할당만 가능 O

console.log("내 전화번호는" + phone); //휴대폰 번호

const PI = 3.14;

//const PI = 3.14 //재선언 불가능 X

//PI = 3.15; //재할당 불가능 X

</script>

연산자

산술연산자

연산자, operator

두 개 이상의 연산 대상자(=피연산자, operand)가 필요함.

두 개의 피연산자 >> 이항연산자

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_operators#%EC%82%B0%EC%88%A0_%EC%97%B0%EC%82%B0%EC%9E%90

표현식과 연산자 - JavaScript | MDN

이번 장에서는 JavaScript의 표현식과 함께 할당, 비교, 산술, 비트 계산, 논리, 문자열, 삼항 등 다양한 연산자를 살펴보겠습니다.

developer.mozilla.org

비교연산자(Boolean)

문자열과 숫자를 == 로 비교할 때 데이터 타입을 무조건 숫자로 바꾸므로 같다고 인식할 수 있다.

=== 는 데이터 타입이 다르면 false

그러므로

1, '1' 이 있을 경우는

=== 를 쓰는 걸 권장한다.

!= 과 !== 도 마찬가지로 !== 를 권장한다.

1+'2' >> 12 >> '1' + '2' 문자열

'2'-1 >> 1 >> 2-1 숫자

문자열과 숫자가 같이 나타날 때

다른 연산자들은 다 숫자로 바꾸나, + 연산자는 문자열로 바꾼다.

*자바에서도 이와 같이 작동한다.

그렇다면 1 + '2' 가 3으로 나오게 하려면?

1 + parseInt('2')

논리연산자

조건/반복문

값 교체하기

temp : 임시저장소(백업)

let x = 100;

let y = 200;

// x와 y의 값을 교체하세요

let temp = x; //백업

x = y; // x의 예전 값은 잃어버림

y = temp; // 백업 데이터에서 가져옴

console.log("x : " + x); // x : 200

console.log("y : " + y); // y : 100

</script>

⭐대입을 하면 예전값은 잃어버린다!

예제

let price = 1000 은 항상 동일한 값인 1000이 나온다.

이런 것은 변수로서의 의미도 없고 "하드코딩"이라고 한다.

여기서 가로 사이즈는 100으로 입력하더라도 따옴표 안에 있으므로 문자열로 취급한다. 3번째 줄 parseFloat 가 실수로 변환하란 뜻.

이렇게 어떤 값이 나올지 알 수 없어야 "변수"라고 할 수 있다.

Int 정수

Float 실수

parseFloat 같은 것은 함수(function)으로 분류된다.

row = prompt("가로를 입력하세요");

column = prompt("세로를 입력하세요");

result = parseFloat(row) * parseFloat(column);

alert("사각형의 면적은" + result.toFixed(1) + "입니다.");

</script>

❤️.toFixed(1) : 소수점 첫째자리까지만 표시해라. (result 값에 대해서만 소수점 자리를 조정한다!)

Javascript 제어문

순차 / 조건 / 반복

순차문

입력 - 처리 - 출력

조건문 if

입력 - 참/거짓 - 처리 - 출력

if (식) { 참일 때

} else { 거짓일 때

}

confirm

alert

let food = confirm("아침을 먹었나요?");

alert("입력받은 값은" + food);

//참, 거짓일 때 각각 다르게 처리해 보자.

</script>

여기까지는 창에서 확인-> true , 취소 -> false 가 뜬다.

prompt

input, console.log

let password = "1234"; // DB에 저장된 나의 비밀번호

let input = prompt("비밀번호를 입력하세요.");

//입력한 비밀번호가 맞으면 로그인 성공 출력, 아니면 로그인 실패 출력

if (password === input) {

console.log("로그인 성공");

} else {

console.log("로그인 실패");

}

prompt &&

1 어떤 사이트? [ ] >> 2 무슨색이군요 >> 3 아이디 입력 [ ] >> 4 암호 입력 [ ] >> 5 입력한 값 창 >> 6 로그인 성공 실패 여부

site = prompt('당신은 어떤 사이트를 많이 가나요?'); << 1

if (site === '네이버') {

alert('초록색을 보시겠군요.'); << 2

} else {

alert('다른 색을 보시겠군요');

}

//1. id와 pw를 입력해보자.

id = prompt('아이디를 입력'); << 3

pw = prompt('암호를 입력'); << 4

alert(id + ' ' + pw); << 5

//id는 root, pw는 1234

//2. id, pw가 맞는지, 틀린지 확인해보자.

if (id === 'root' && pw === '1234') {

alert('로그인 성공'); << 6

} else {

alert('로그인 실패');

}

</script>

if (id === 'root' && pw === '1234') 괄호 안에 조건식은 무엇이든 설정할 수 있다.

이런 연산자가 올 수도 있고, 그냥 변수명 하나만 올 수도 있다.

null과 undefined (아직 정리 안 함)

document (document.write)

body 태그를 통제할 수 있는 태그! 콘솔이 아닌 브라우저에 나타난다.

// 자바스크립트로 브라우저에 글자 나타내기

// <b>는 bold체 -- 잘 쓰진 않음

document.write('<b><font color=red>내가 브라우저에 써져요..!<font></b>');

</script>

다중 if문

else if

location.href

// location.href = "https://www.naver.com"

site = prompt('어디 사이트를 자주 가나요?');

//네이버이면 네이버로 이동

//네이버가 아니면 다음 사이트로 이동

if (site === '네이버') {

location.href = 'https://www.naver.com';

} else if (site === '구글') {

location.href = 'httpS://wwww.google.com';

} else if (site === '티스토리') {

location.href = 'httpS://wwww.tistory.com';

} else if (site === '') {

location.href = 'httpS://wwww.daum.net';

}

</script>

아무것도 입력 안 하고 확인이나 취소 누를 시, daum.net으로 간다.

중첩 if문 etc,,,,,

🖤boolean type이 아닌 값에 boolean 성질 주기

0만 false 이고 나머지는 음수 상관없이 모두 true.

문자열에서는 공백(띄어쓰기)이 아닌 그냥 빈 문자만 false로 인식하고 공백 자체, 문자 하나라도 있으면 true.

true : 1, -1, " ", 띄어쓰기 *공백문자도 인정한다

⭐false : 0, ''", null, undefined, boolean 타입에서의 false

반복문 for

입력 - 조건 - 처리, 처리

for (초기식; 조건식; 종결식) {

}

초기식 : 변수선언 - 딱 한 번 실행

조건식 : 변수에 대한 검사(참 거짓 판별)

참 : 참 문장으로

거짓 : 빠져 나감

종결식 : 참 문장에서 온 값이 종결식에서 실행되어 다시 조건식으로 감. >> 참인 동안 계속 실행되어야 하므로.

for, ++

for (let i = 0; i < 5; i++) {

//alert('환영합니다.' + i)

document.write('환영합니다.' + i + '<br>');

}

//ㅁ(미음) + 한자: 기호가 뜬다.

//아래에다가 @, ⭐, ☎️를 100개 프린트해 보세요.

for (index = 0; index < 100; index++) {

document.write(index + ': 전화를 걸어요 ☎️ <br>');

}

</script>

❤️` 백틱

템플릿 문자열

백틱을 사용하면 ${}를 사용해서 문자열과 변수를 적절히 같이 사용할 수 있다.

for (let i = 0; i < 5; i++) {

//alert('환영합니다.' + i)

//document.write('환영합니다.' + i + '<br>');

document.write(`환영합니다. ${i}<br>`); // 템플릿 문자열 : 변수i값을 저 $위치에 넣어라.

}

https://velog.io/@stay_gold94/%EB%B0%B1%ED%8B%B1%EC%9D%B4%EB%9E%80

백틱이란?

키보드 탭 위, 1의 왼쪽, '~'(물결표) 쯤에 있는 '와 비슷하게 생긴 문자다.백틱을 사용하면 ${}를 사용해서 문자열과 변수를 적절히 같이 사용할 수 있다.이전 코드문자열과 변수, 큰 따옴표와 작

velog.io

parseInt 문자를 정수로 바꾸는 것처럼 그 반대인 숫자를 문자열로 하는 법은?

12 를 '' + 12 로 쓰면 '12' 문자열로 바뀐다.

for, count, prompt

let count = prompt('몇 번 환영해 줄까요?');

count = parseInt(count);

for (let i = 0; i < count; i++) {

// document.write('환영합니다' + 1 + '<br>');

document.write(`환영합니다. ${i}<br>`); // 템플릿 문자열

}

</script>

더하기를 제외한 다른 모든 연산자는 숫자형으로 형태가 자동 변환된다.

그래서

count = parseInt(count);

이 부분이 없어도 정상 작동한다.

그렇다면 숫자가 아니라 문자를 섞어서 이상하게 입력되는 경우에는 어떻게 해야할까?

백틱으로 템플릿 문자열로 바꿔주자~

console.log(`count: &{count}`);

let count = prompt('몇 번 환영해 줄까요?');

count = parseInt(count);

console.log(`count: ${count}`);

값을 "34ㅇ라허" 입력하면 34로 바꿔준다.

그러나, "dfsdgf35" 이렇게 문자가 먼저 나오면 안 된다.

NaN (Not a Number) 숫자가 아니라는 값만 콘솔에 나옴.

+) 이미지 반복문 출력방법

for (let i = 0; i < count; i++) {

// document.write('환영합니다' + 1 + '<br>');

document.write(`<img src="haeundae.jpg" width="10px"><br>`); // 템플릿 문자열

}

</script>

🖤작은 따옴표 쓰는 이유

큰 따옴표는 저렇게 겹쳐서 역슬래시로 데이터를 구분해 줘야 한다.

반복문 while

while( ) {

}

함수

function off( ) {

alert("off");

}

[함수의 정의]

function : 함수임을 나타냄 - 괄호가 같이 있으면 함수, 없으면 변수.

off : 함수명, 동사형 "기능을 일반화시켜야 한다", "1가지 기능(SRP)*만 해야한다." *single responsible principle

() : 변수명- 데이터의 성격, 명사형 - 소문자, camel case형식(함수도!)(imOnTheNextLevel - 첫시작만 소문자)

*const 상수는 대문자를 쓰므로 언더바(snake case)로 구분한다. NEXT_LEVEL

{} : 함수의 시작과 끝

num-age-xxx : cabop 케밥 표기법 (HTML같은 프로그래밍 아닌 언어에서 씀)

NextLevel : Pascal 표기법 - class 표기법 : 객체 이름 "첫자는 다 대문자)

function off() {

alert('off');

} //여기까지 함수의 정의, 실행된 건 아니므로 창에 아무 것도 없다.

//콘솔창에서 off 입력하면 무엇인지는 말해 줌.

실행시키려면,

함수 호출 Call

off(); //함수 호출

괄호를 꼭 붙여야 한다.

*새로고침 상태에서 16열 호출 전 출력 >> alert 팝업의 확인버튼 클릭 시 12열, 18열 순서로 호출

target

let age = 10;

//target: 매개변수(parameter, agument)

function off(target) {

// 기능을 일반화시킨다. 끈다면 전등, 선풍기, TV 다 끄도록.

alert(target + 'off');

}

off('전등'); //함수 호출

off('선풍기');

off('TV');

</script>

다 alert 창이 뜨면서 끈다고 세 번 나옴.

https://bigtop.tistory.com/34

[JavaScript] 자바스크립트 함수(Function) 이해하기

프로그램을 작성하다 보면 일정한 동작들을 여러 번 반복해야 될 때가 있다. 한 순간에 똑같은 동작을 반복해야한다면 반복문을 활용하면 되지만, 특정한 지점에서 필요할 때 순간순간 동작하

bigtop.tistory.com

return 을 명시적으로 써야 하는 경우

더하기한 결과(값)를 명시해야 하는 경우

이 값은 해당 함수를 호출한 곳에서 사용한다.

⭐함수 호출이 끝나면 return값으로 대체가 된다.

함수실행이 끝나면 return값으로 대체되고 이후 연산은 그 변경된 상태로 진행되는 걸 숙지.

result가 버려지지 않고 나오는 법

function cook(x, y) {

return x + y;

}

let result = cook(10, 20); // cook 함수 호출

console.log('요리가 끝났습니다.');

</script>

cook(10, 20); // cook 함수 호출

console.log('요리가 끝났습니다.', result);

</script>

function cook(x, y) << x,y는 매개변수

return x + y; >> return 오른쪽 데이터는 리턴값

변형

let result = cook(10, 20) + 40;

// result = 우측 함수인 +40까지 다 처리한 후 최종 70이 result에 저장됨

cook(10,20)이 30으로 대체된 후 40을 더해서 최종 값이 70으로 result에 저장됨.

함수(목적어)

주어 보어

js파일로 연결하기 (외부스타일)

<title>js파일로가즈아</title>

let result = cook(10, 20) + 40;

// result = 우측 함수인 +40까지 다 처리한 후 최종 70이 result에 저장됨

console.log('요리가 끝났습니다.' + result);

</script>

</head>

js 폴더의 js 파일로 cook함수를 연결해 주었다.

여기서 html 파일의 <script>는 헤드나 바디나 여러 번 어디에 넣어도 실행이 되지만,

관리가 힘들고 가독성이 떨어지므로 비추천.

사용자가 요구했을 때 함수가 실행되도록 만들기

onclick

value의 property(속성)의 값이 없다. => 리턴값이 null

이 코드의 테스트 버튼을 안전하게 실행하기 위해 어떻게 해야하는가?

타입 변환 후 검사

==
!=

타입 검사 후 내용검사(권장)
===
!==

function test() {

console.log('테스트');

// el : element를 뜻함

let el = document.getElementById('id');

if (el) {

//if (el) {

let id = el.value;

console.log('당신이 입력한 id는' + id);

}

https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById

Document.getElementById() - Web API | MDN

Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을

developer.mozilla.org

https://moalgong.tistory.com/21

function test() {

console.log('테스트');

// el : element를 뜻함

let el = document.getElementById('name');

if (el != null) {

//윗줄은 if (el) { 와 같은 의미

console.log(el);

let value = el.value;

console.log('당신이 입력한 value는' + value);

}

<body>

[내가 이해한 원리]

1) value 값을 지정해 줘야한다. 속성이 없어서 null로 나와버렸기 때문.

이 value의 속성은 새로운 변수로 지정해 주면 되는데, 그 때 정한 변수명이 "el"

2) el 이란 변수명은 getElementById에서 따온 것이다.

브라우저에 보여주기 위해 document가 붙은 것이고

여기서 .getElementById('id') 는 이런 사용법인데 ⬇️

text 창에 나타날 name의 id 선택자로 작용한다.

3) if (el != null) {

이러한 방어코드는 null값이 나올 수 있으므로(실제로 null로 뜸) 오류를 방지하기 위해 != 로 지정해 준다.

el 변수는 null값과 같지 않다고!

4) 이제 value란 변수를 name이란 속성이 부여된 el.value와 같다고 지정해 주자. let value = el.value;

근데 왜 el.value 이렇게 el 뒤에 또 value가 올까?

console.log('당신이 입력한 value는' + value);

이렇게 보여주기 위한 문자열이기 때문이다.

5) console.log가 올바르게 출력된다.