JS - JavaScript
자바 스크립트
- JS는 프로그래밍 언어~
- 모카가 나왔을 때 java가 인기가 엄청 많았던 시기이다.
- 라이브 스크립트라는 이름이었는데 java의 인기 떡밥 얻기 위해js로.
- java와 JS의 연관성은 – 김치와 김 // 햄스터와 햄의 상관관계
- 전~혀 상관없다.
# Check Point
- 원하는 요소를 가져와서, 원하는 동적인 작업을 할 수 있게 해 준다.
- 스타일 , 이벤트 , 데이터 처리
- CSS 공부할 때 keyword는 선택자와 / 스타일이었다.
- JS 공부할 때 키워드도 비슷하다
# JS의 기본 문법 check
- 주석처리는 java와 동일 [ // , /**/ ]
- < script 태그 > 안쪽에 작성하면 됨
- < script 태그 >는 <head>에 있어도 되고, <body>에 있어도 되고, 외부에 있어도 됨
- [ ' ' ] 와 [ " " ] 구분 없이 사용 - 단, 같은 곳에서 사용할 때는 번갈아가면서 사용
# 이번 시간 실습해 볼 내용
- 출력문
- 변수
- 연산자
- 제어문(조건문, 반복문)
- 배열
실습 시작
1. 출력문 : console.log(" ");
- console.log(”hello world“); == syso(“hello world“)
1-1 메시지 : alert ( " " )
- alert(“hello world ~~~~~ !”);
1-2 입력받기 : prompt(" " )
- JAVA - Scanner( )와 같은 역할 – window.prompt
- 그냥 prompt( " " ) 사용 가능
2. 변수
- 타입이 없다. 기본으로 var로 사용
- 심지어 var 없이 x=10 사용해도 된다.
- 불안정성 높아서 최근에는 타입을 지정해주자 해서 타입 스크립트 나와서 인기 사용
2-1 변수 출력 테스트
2-2 실행 순서 체크
- 알람 띄울 때 멈춰있어 가지고 다음 작업들 실행 안되고 있다가
- 확인 버튼 누르니 다음 작업 실행되었다.
- var로 선언한 변수를 또 선언해서 사용해도 문제없이 실행된다.
2-3 ES6 추가된 타입 – let / const 타입 사용 가능
- 에크마 스크립트 6에 맞춰서 JS를 배운다.. / ES5까지는 var만 사용
2-4 let 으로 만든 변수는 – 재선언 불가능하다. / 재할당 가능
> 만들어놓은 변수 사용하는 것은 OK <
2-5 const 으로 만든 변수는 - 상수로 선언 – 재선언 불가능 / 재할당 불가능
2-6. JS 변수는 모두 참조변수 - 어떤 타입이던 넣어줄 수 있다.
> 타입 확인 <
3. 연산자
- 산술 / 비교 /논리 / typeof 다 똑같다.
- 값을 비교하고 싶을 때는 [ == ] 연산자
- 값과 타입까지 비교하고 싶으면 [ === ] 연산자 사용
- js에서는 == 처리할 때 if문이 엄청 사용되어있다.
- a=b / a=c / b!=c / 로 처리될 수도 있다..
3-1 여러 가지 연산 작업 결과 확인
4. 조건문
- java에서 사용하던 조건문 형식과 동일하게 사용
- if(){} else if(){} else{}
5. 반복문
- JAVA에서의 반복문 형태와 동일 [ for , while , do-while ]
- +@ < script > 태그 여러 번 사용 가능
6. 배열
- 비어있는 배열 var a = []; 만들어도 가능
- 배열의 요소 값 순서대로 안 채워줘도 가능하다. => a[2] 다음에 a[5] 넣어도 가능
- >> .length 사용 가능
- >> 값없는 배열 인덱스 요소 출력하면 – undefined 출력
- >> 초기화 값없으면 undefined로 출력된다. ( null이랑은 다르다 )
- >> JS에서는 null이라고 표시해주려면 null값을 입력해주어야 한다.
6-1 출력해서 확인해보기
>> 초기화 값 없으면 undefined 출력 ( null이랑은 다르다 ) <<
>> JAVA의null 개념이 JS에서는 endifined <<
>> JS에서는 비어있다는 것을 표시하기 위해 null이라는 값을 넣어줘야 한다 <<
>> [ 배열 ] <<
-전체 출력 / -길이 출력 / -요소 출력 / -요소 값 비교 / -요소 타입 비교
6-2 배열에 여러 가지 함수 사용해보기 - test ↓↓↓
[ JS ] [ 배열 ] 함수 사용해보기
JS [ 배열 ] 에 여러 가지 함수 적용해서 사용해보기 1. concat( ) 배열에 문자열 이어주기 - 추가하기 2. indexOf( ' ' ) 배열에서 특정 문자열의 인덱스 찾기 2-1 indexOf( ' c ', 3 ); 파라미터 check a[ ]에..
giggs.tistory.com
7. 문자열
- 문자 배열도 문자들의 배열 – 배열과 다를 것이 없다.
7-1 여러 가지 문자열 함수 사용해보기
- charAt() / concat() / endsWith() / startsWith() / substr() / substring() / split()
8. 함수
8-1. 함수 호출 방법
#1. 기본적인 함수 호출 방법
#2. js파일로 호출 하는 방법
# js파일 만들고 src로 불러와서 사용
8-2 여러가지 상황에서 함수 호출 테스트
8-3 함수 지향 프로그래밍
- JS에서는 함수도 1급 객체로 취급하기 때문에 – 변수에다가 담아줄 수 있다.
- 함수를 변수에 넣어줄 수 있다.
- 변수에 함수를 넣어줄 수 있다.
다만 이렇게 변수에 함수를 담아서 만들어준 함수는 -
function을 이용해서 만든 함수와
함수 호출 가능 위치에 차이 발생
함수 호출 가능 위치에서 차이
- function으로 만든 함수는 만들어만 놓으면 ----- 어느 위치에서든 함수 호출 가능
- 변수에 함수를 넣어주는 방식으로 만든 함수는 ----- 함수 선언 밑에서 사용 가능
8-4 return 타입 불필요
- 애초에 타입이 없다 – 함수에 return 타입 지정 불필요
- JAVA에서는 return 값이 있으면 그에 맞는 반환 타입 지정 필요했지만
- JS는 return값이 있어도 불필요!
review
드디어 기다리던 JavaScript 시작!
java와의 상관관계는 0이라는 부분도 흥미로웠다.ㅎㅎ
<head> / <body> / 외부 위치에 상관없이
<script> 태그 안에서 사용 가능!
1. 기본적으로 변수의 타입도 없고
( let, const 생겼지만 )
2. 함수의 호출 시 매개변수도 상관없고.
(정확한 계산 위해선 맞춰주어야 하지만 )
3. 함수의 return 값이 있어도 return타입 지정 필요 없고
정말 열려있는 언어구나 느꼈다.
다만, 나중에 문제가 생기면 어떻게 찾을지?
원하는 대로 결과가 나오지 않으면
어느 부분을 처리해야 하는지?
알아내기가 힘들 것 같고
어떤 의미로 사용했는지
어떤 값을 가지고 있는지 확인하기도 번거롭고 힘들 것 같다.
JAVA가 벌써 보고 싶어지는..
연산자, 제어문, 배열은
java와 사용법이 비슷해서 어렵진 않았다.
타입이 없어서인지 java collection 함수들을
그냥 다 사용할 수 있는 편리함? 도 느꼈다.
그냥 이렇게 사용하면 될 거 같은데? 하면
다 사용 가능한 듯
제일 난해했던 부분은
변수에 함수를 넣어줄 수 있다는 부분.
그 변수를 또 다른 변수에 대입해서 사용 가능 부분 ㅎㅎ
이 부분은 인정? 해주고 이해해야 할 듯하다.
이제 시작한 JS 화이팅!!
'Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원 > 6월' 카테고리의 다른 글
| 22. 06. 24 - [ JS ] 실습 문제들 풀이 (0) | 2022.07.06 |
|---|---|
| 22. 06. 23 - [ JS ] 객체, 요소선택, window 객체 (0) | 2022.07.01 |
| 22.06.21 - [ CSS 스타일 ] 반응형, 애니메이션, 부트스트랩, flex (0) | 2022.06.28 |
| 22. 06. 21 - [ CSS 레이아웃 ] 내가 만든 웹페이지 발표 (0) | 2022.06.26 |
| 22. 06. 20 - [ CSS 레이아웃 ] 웹페이지 구현 발표 준비하기 + [ 상담 ] (0) | 2022.06.23 |