-
0727. JavascriptJavascript 2023. 7. 27. 18:50더보기
클라이언트 - 웹표준
html, css, js(javascript)
웹서버
jsp(java)
데이터베이스
SQ
더보기interpreter(통역) vs compiler(번역)
한 줄 씩 동시에 vs 한번에 모두
script 언어(text) vs 0101 이진수 기계어
python vs java, c
Javascript
대소문자 구분 안 함
콘솔창(F12)켜고 새로고침 누르면서 프로그래밍 해야 오류를 알 수 있다.
디버그도 브라우저에서 해야한다.
노란 형광펜 부분은 생략가능(자바스크립트만 남아서) / 그림에서 경로는 상대경로. / js문법이라고 박스 친 부분은 html이 아닌 js 방식으로 써야함! 1. 프로젝트 시
2. 공부할 때
3. 비권장(inline 헷갈리니까..)
- 예시
<title>Document</title><script>name = prompt("당신의 이름을 입력하세요"); <!--name은 변수로 값이 고정되어 있지 않다.-->console.log("당신이 입력한 이름은" + name + "입니다.");</script></head><body><button onclick="javascript.alert('나는 버튼이에요')">나를 눌러요</button></body>
빈칸에 이름을 입력해야 우측 화면의 버튼이 나온다. 새로고침하면 다시 왼쪽으로 돌아간다.
console 이하의 글(log)을 작성하라.
입력값은 + name + << 문장을 연결하는 기능을 한다.
단, 위와 같은 경우 <script>태그가 위에 있으면 아래 버튼을 알지 못 하는 상태이므로 뒤에 두기도 한다.
<title>Document</title></head><body><h1>자바스크립트</h1><button onclick="javascript.alert('나는 버튼이에요.')">나를 눌러요</button><script>name = prompt("당신의 이름을 입력하세요");console.log("당신이 입력한 이름은" + name + "입니다.");</script></body>하지만 개발자가 보기엔 전자가 낫다.
❤️오류 보는 법(오타)
검사창 켜서 [소스] 보기.
🖤 주석 표기법
[ ctrl + / ]
// 슬래시 뒤쪽으로만 주석
or
/* 여기가 주석 */
대입연산자
변수 = 값, 함수, 수식 등
a = b
b값을 a에 대입(assign)=저장하겠다. 대체하겠다!
: 같다
color : red
컬러는 레드와 같다.
변수
var(variable)
var name
<script>var name;name = prompt("당신의 이름을 입력하세요");console.log("당신이 입력한 이름은" + name + "입니다.");</script>이렇게 미리 변수라고 메모하는 게 권장사항
- 입력 promt(), 출력 alert()
<body><h1>자바스크립트</h1><button onclick="javascript.alert('나는 버튼이에요.')">나를 눌러요</button><script>//입력today = prompt("오늘은 무슨 요일인가요?");
//출력window.alert("오늘은" + today);alert("반갑습니다");//window객체는 생략 가능(웹브라우저를 뜻함--크롬,웨일 등), window.에서 .은 소속(of)을 뜻한다.</script></body>
최종 출력 화면
ram 내의 저장공간과 변수선언
여기서 이름인 age 부분을 정하는 게 중요하다. "값의 의미"
항상 최근에 대입한 값을 저장하게 된다.
주의사항
숫자의 경우 y=x+1로 할 때 x값을 정의해 주지 않으면 에러 발생
- var 변수 : 중복이 발생하는 예전 방식 (소문자)
- const 상수 : 처음 선언한 게 있다고 에러를 알려 줌. 고정된 값을 바꿀 수 없음. 배열에서 [ ]안에 구성 내용은 변경 가능
(대문자로 씀)
- let : 밑에서 다시 선언하여도 개발자 스스로 컨트롤할 수 있으므로 하단에는 let으로 다시 선언하지 않는다.
딱 한 번만 선언 가능! (소문자)
변수란? 변수의 선언/초기화/할당
오늘은 내가 매일같이 쓰는 단어인 '변수', 그리고 변수의 '선언/할당/초기화'에 대해 간단히 정리해보자. 변수의 선언이 실행 컨텍스트와 연관지어 이해할 수 있다는 것을 처음 알았다! 깊이 있
bbeeyaks-moment.tistory.com
변수 선언, 초기화, 할당
자바스크립트 어플리케이션에서 값에 상징적인 이름으로 변수를 사용합니다. 변수명은 식별자(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 : 글자 ' '
숫자도 ' ' 로 묶이면 문자열이다.
<script>//변수(저장공간) 선언하고, 값 할당var name = "홍길동";age = 10;age = 20; //값 재할당 가능 Ovar tel = "010111222";
var tel = "021112222"; //재선언 가능 Oconsole.log("내 전화번호는" + tel); //휴대폰?
let phone = "0101112222";//let phone = '0311112222' // 에러! Xphone = "013335555"; //재할당만 가능 Oconsole.log("내 전화번호는" + phone); //휴대폰 번호
const PI = 3.14;//const PI = 3.14 //재선언 불가능 X//PI = 3.15; //재할당 불가능 X</script>
연산자
산술연산자
연산자, operator
두 개 이상의 연산 대상자(=피연산자, operand)가 필요함.
두 개의 피연산자 >> 이항연산자
표현식과 연산자 - 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')
정수 2로 바꿔주세요 
x, y 앞에 let 써 주는 게 좋다. 논리연산자
조건/반복문
- 값 교체하기
temp : 임시저장소(백업)
<script>let x = 100;let y = 200;
// x와 y의 값을 교체하세요
let temp = x; //백업x = y; // x의 예전 값은 잃어버림y = temp; // 백업 데이터에서 가져옴
console.log("x : " + x); // x : 200console.log("y : " + y); // y : 100</script>⭐대입을 하면 예전값은 잃어버린다!
- 예제
let price = 1000 은 항상 동일한 값인 1000이 나온다.
이런 것은 변수로서의 의미도 없고 "하드코딩"이라고 한다.
여기서 가로 사이즈는 100으로 입력하더라도 따옴표 안에 있으므로 문자열로 취급한다. 3번째 줄 parseFloat 가 실수로 변환하란 뜻. 이렇게 어떤 값이 나올지 알 수 없어야 "변수"라고 할 수 있다.
더보기Int 정수
Float 실수
parseFloat 같은 것은 함수(function)으로 분류된다.
<script>row = prompt("가로를 입력하세요");column = prompt("세로를 입력하세요");result = parseFloat(row) * parseFloat(column);alert("사각형의 면적은" + result.toFixed(1) + "입니다.");</script>❤️.toFixed(1) : 소수점 첫째자리까지만 표시해라. (result 값에 대해서만 소수점 자리를 조정한다!)
Javascript 제어문
순차 / 조건 / 반복
순차문
입력 - 처리 - 출력
조건문 if
입력 - 참/거짓 - 처리 - 출력
if (식) { 참일 때
} else { 거짓일 때
}
- confirm
alert
<script>let food = confirm("아침을 먹었나요?");alert("입력받은 값은" + food);//참, 거짓일 때 각각 다르게 처리해 보자.</script>여기까지는 창에서 확인-> true , 취소 -> false 가 뜬다.
1 
2 
3 - 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 로그인 성공 실패 여부
<script>site = prompt('당신은 어떤 사이트를 많이 가나요?'); << 1if (site === '네이버') {alert('초록색을 보시겠군요.'); << 2} else {alert('다른 색을 보시겠군요');}
//1. id와 pw를 입력해보자.id = prompt('아이디를 입력'); << 3pw = prompt('암호를 입력'); << 4alert(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 태그를 통제할 수 있는 태그! 콘솔이 아닌 브라우저에 나타난다.
<script>// 자바스크립트로 브라우저에 글자 나타내기// <b>는 bold체 -- 잘 쓰진 않음document.write('<b><font color=red>내가 브라우저에 써져요..!<font></b>');</script>-
- 다중 if문
- else if
location.href
<script>// 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, ++
<script>for (let i = 0; i < 5; i++) { <!-- 여기서 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
<script>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 표기법 : 객체 이름 "첫자는 다 대문자)
<script>function off() {alert('off');} //여기까지 함수의 정의, 실행된 건 아니므로 창에 아무 것도 없다.//콘솔창에서 off 입력하면 무엇인지는 말해 줌.실행시키려면,
확인 누르면 undefined로 나와줌 - 함수 호출 Call
off(); //함수 호출괄호를 꼭 붙여야 한다.
호출되는 실행 라인 구분 주의 *새로고침 상태에서 16열 호출 전 출력 >> alert 팝업의 확인버튼 클릭 시 12열, 18열 순서로 호출
순서 - target
<script>let age = 10;
//target: 매개변수(parameter, agument)function off(target) {// 기능을 일반화시킨다. 끈다면 전등, 선풍기, TV 다 끄도록.alert(target + 'off');}
off('전등'); //함수 호출off('선풍기');off('TV');</script>다 alert 창이 뜨면서 끈다고 세 번 나옴.
[JavaScript] 자바스크립트 함수(Function) 이해하기
프로그램을 작성하다 보면 일정한 동작들을 여러 번 반복해야 될 때가 있다. 한 순간에 똑같은 동작을 반복해야한다면 반복문을 활용하면 되지만, 특정한 지점에서 필요할 때 순간순간 동작하
bigtop.tistory.com
- return 을 명시적으로 써야 하는 경우
더하기한 결과(값)를 명시해야 하는 경우
이 값은 해당 함수를 호출한 곳에서 사용한다.
⭐함수 호출이 끝나면 return값으로 대체가 된다.
함수실행이 끝나면 return값으로 대체되고 이후 연산은 그 변경된 상태로 진행되는 걸 숙지.
result가 버려지지 않고 나오는 법
1
<script>function cook(x, y) {return x + y;}
let result = cook(10, 20); // cook 함수 호출console.log('요리가 끝났습니다.');</script>2
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><script src="js/out.js"></script><script>let result = cook(10, 20) + 40;// result = 우측 함수인 +40까지 다 처리한 후 최종 70이 result에 저장됨console.log('요리가 끝났습니다.' + result);</script></head>js 폴더의 js 파일로 cook함수를 연결해 주었다.
더보기여기서 html 파일의 <script>는 헤드나 바디나 여러 번 어디에 넣어도 실행이 되지만,
관리가 힘들고 가독성이 떨어지므로 비추천.
사용자가 요구했을 때 함수가 실행되도록 만들기
- onclick
value의 property(속성)의 값이 없다. => 리턴값이 null
이 코드의 테스트 버튼을 안전하게 실행하기 위해 어떻게 해야하는가?
더보기타입 변환 후 검사
==
!=타입 검사 후 내용검사(권장)
===
!==<script>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
<script>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><input type="text" id="name" value="손석구" /><button onclick="test()">테스트를 해보자!</button><br />[내가 이해한 원리]
더보기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가 올바르게 출력된다.
'Javascript' 카테고리의 다른 글
0728. Javascript (0) 2023.07.28