😀
😀
* 자바스크립트(JavaScript)?
- 정적인 웹이란 개념이 나왔는데 텍스트나 이미지를 사용해서 사용자에게 정보를 보여주기만 하는 웹을 가리킴.
즉, 회사 소개 사이트나 개인 프로필 사이트처럼 화면에 보여주는 것이 전부인 웹 사이트를 말함.
- 이런 정적인 웹에서 자바스크립트는 간단한 애니메이션이나 동적인 효과를 보여 주기 위한 용도로 사용이 되었음.
- 자바스크립트는 HTML 페이지와 어울어져서 웹 페이지 내의 여러가지 요소를 다이나믹하게 제어하는 기술을 말함.
- 자바스크립트는 개발자가 만든 문서에 방문자가 방문하여 어떤 동작을 취했을 때 그 동작에 대하여 반응이 일어날 수 있도록 해 주는 언어.
- 자바스크립트는 웹 브라우저에서 사용하기 위해서 만들어진 프로그래밍 언어.
이 언어는 1990년대부터 주로 웹 브라우저 상에서 UI를 동적으로 보여주기 위해서 사용해 왔음.
기존에는 브라우저에서만 사용해 왔던 언어인데,
이제는 단순히 웹 페이지 에서만 국한되지 않고 서버 쪽에서도 사용되는 언어로 발전하고 있음.
- 웹이 계속 발달할수록 자바스크립트의 역할은 점점 더 커지고 자바스크립트에 새로운 기능도 더 많이 추가되고 있음.
* 서버 쪽 주요 언어
- ASP, PHP, JSP, Spring 등등
* 클라이언트 쪽 주요 언어
- HTML : 홈페이지를 구현하기 위한 뼈대가 되는 핵심적인 기술의 마크업 언어.
- 자바스크립트 : 로컬 브라우저에서 실행되는 인터프리터 방식의 프로그래밍 언어.
- CSS : HTML은 뼈대이고, 자바스크립트가 기능이라면, CSS는 꾸미기 위한 옷의 기능.
- JQuery : 자바스크립트 코드가 길어지면 사용이 복잡해 지는 단점을 파격적으로 개선한 자바스크립트 기반의 라이브러리.
* 자바스크립트 언어의 특징.
1. 자바스크립트는 인터프리터 언어이다. (@한문장씩 실행)
- 코드가 작성된 순서대로 맨 윗줄부터 순차적으로 구문을 분석하여 실행을 함.
- 코드에 문제가 생기면 에러가 발생한 이전까지만 구문을 분석하여 실행을 하고,
에러가 발생한 다음줄 부터는 구문을 분석하지 않음.
2. 자바스크립트는 클라이언트 스트립트 언어이다.
- 자바스크립트는 서버에서 실행되는 것이 아니라, 사용자(방문자) 컴퓨터에서 실행이 됨.
따라서 서버의 부하를 줄여줄 수 있음.
3. 객체 기반 언어이다.
- 자바스크립트는 객체를 기반으로 한 언어임.
다양한 객체가 존재하며, 그에 해당하는 다양한 기능(메서드-함수)들이 존재함.
4. 공개된 언어이다.
- 최근에 자바스크립트의 활용 범위가 넒어지면서 이미 개발된 코드를 단순히 복사하고 붙여 넣는 것이 아니라,
검색을 하면 다양한 소스들이 오픈이 되어 있음.
5. 다양한 라이브러리를 활용할 수 있음.
- 자바스크립트의 대표적인 라이브러리 언어는 제이쿼리(JQuery)임.
자바스크립트를 이용하여 다양한 기능들을 쉽게 구현할 수 있도록 만들어 놓은 함수들의 집합을 이용하면
쉽게 구현이 가능함.
// 자바 스크립트에서 한 줄 주석
/*
자바 스크립트에서 여러 줄 주석
- 주석은 프로그램 코드를 설명할 때 사용하며,
프로그램 실행에는 전혀 영향을 주지 않음
*/
console.log("Hello, JavaScript!")
/*
console.log()는 주로 디버깅 시에 필요한 정보를 출력할 때 사용함
==> 디버깅 도구
- 디버깅 : 개발 시 문법적으로 보면 전혀 문제가 없는데도
어떠한 경우에는 정삭적으로 동작을 하고,
어떤 경우에는 동작이 제대로 안 되는 경우가 발생함
프로그램에서는 이런 것을 논리적인 오류인 버그라고 부름.
이러한 버그를 찾아서 없애는 작업을 하는 것을 디버깅이라고 말함.
- console.log() 기능을 크롬과 사파리 브라우저에서만 사용이 가능함.
*/
<!-- 외부에 있는 자바스크립트 파일을 불러와서 실행하는 방법 -->
<script type="text/javascript" src="../js/console.js"></script>
/*
자바스크립트에서 데이터를 출력시키는 방법 - 3가지
1. console.log() 를 이용하는 방법
2. document.write() 를 이용하는 방법
3. alert() 를 이용하는 방법
*/
/*
2. document.write() 를 이용하는 방법
==> HTML의 body 태그에 괄호 안의 내용을 출력해 주는 함수
웹 브라우저 화면에 출력해 주는 함수
*/
document.write("<h2>안녕하세요</h2><br>");
/*
3. alert() 를 이용하는 방법
==> 웹 브라우저 화면에서 간단한 알림 내용을 표시할 때 사용하는 함수
*/
alert("하이");
/* 키보드로 입력받는 방법(prmopt) , 자료형은 데이터가 들어와야지 잡힘*/
<body>
<script type="text/javascript">
var name = prompt("이름을 입력하세요");
document("<b>" + name + "</b>님 환영합니다");
</script>
/*
* 자바스크립트에서의 변수와 상수
- 변수 : 데이터를 저장하는 공간. 데이터가 변할 수 있음.
물건을 보관했다가 필요할 때 다시 꺼내 사용하는 일종의 창고라고 생각하면 됨.
보관하는 내용이 물건이 아니라 데이터라는 점.
※ 특히 자바스크립트는 변수에 숫자와 문자 뿐만 아니라 함수와 클래스까지 저장이 가능함.
- 상수 : 데이터를 저장하는 공간. 데이터가 변할 수 없음.
* 변수를 선언하는 방법
형식) var 변수명 = 값; (variable)
// var의 의미 : 자바스크립트에서 변수 선언을 의미하는 키워드.
let 변수명 = 값;
// ECMA ES6 이후 버전부터 사용함.
* 상수를 선언하는 방법
형식) const 상수명 = 값;
* 자바스크립트에서의 자료형
- 숫자형(number) : 숫자를 표현하는 자료형.
숫자 안에서도 정수, 실수로 구분이 되는데
자바스크립트에서의 숫자 자료형은 그 종류들을 하나로 총괄함.
십진수와 실수형은 일반적으로 사용하는 숫자.
하지만 16진수는 글자색이나 배경색을 나타낼 때 사용함.
예) var age = 17;
var color = 0xF00; (빨간색)
- 문자형(string) : 홑따옴표 또는 쌍따옴표를 양 끝에 두고,
그 안에 한 글자 이상의 문자가 있는 자료형을 문자형이라고 함.
예) var name = "홍길동";
- 논리형(boolean) : 참(true) 또는 거짓(false) 두 가지 값을 가지는 자료형.
- typeof 연산자 : 해당 변수의 자료형을 알려주는 연산자.
- 함수형(function)
- 클래스(class)
- undefined : 일반적으로 변수를 만든 후 초기화하지 않은 상태를 말함.
예) let data;
alert("data >>> " + data);
- null : 아무 것도 참조하고 있지 않다는 의미.
비어 있는, 존재하지 않는 값을 의미함.
주로 객체를 담을 변수를 초기화할 때 많이 사용이 됨.
- NaN : Not A Number.
즉, 숫자가 아닌 데이터를 숫자처럼 사용할 때 나타나는 자료형.
변수를 선언만 하고 값이 할당되지 않은 상태에서
그 변수를 더하거나 빼는 연산에 사용이 되면 나타남.
* 변수명 작성 규칙
1. 영문 대/소문자, 숫자, _ 또는 $ 만을 사용할 수 있음.
2. 변수명의 첫 글자로 숫자가 오면 안 됨.
3. 변수명은 대소문자를 구별함.
==> SUM과 sum은 다른 변수명으로 인식.
4. 변수명 작성 시 소문자로 시작.
5. 공백이 들어가면 안 됨.
6. 변수명을 사용 시 되도록 의미를 부여해서 작성하는 것이 좋음.
7. 자바스크립트 예약어를 사용할 수 없음.
예) document, do, for, var 등등
8. 두 단어 이상을 결합해서 변수명을 사용 시 낙타봉 표기법 (CamelCase)을 권장함.
*/
/*
변수 재선언 및 재할당
- var를 사용한 변수는 재선언과 재할당을 할 수 있음
- 간단한 소스라면 변수를 모두 기억할 수 있지만,
수천 줄이나 수만 줄의 소스를 작성하다 보면 실수로 같은 이름을 가진 변수를 다시 선언할 수 있음.
이러한 작업을 여러 사람들과 공동으로 작업을 한다면 더욱 위험해 질 수 있음
*/
var x = 10;
var sum = x + y;
var y = 20;
console.log("sum >>> " + sum);
/*
호이스팅(hoisting)
- '끌어 올린다' 라는 뜻
- 상황에 따라 변수의 선언 부분을 가장 위쪽으로 끌어올리는 것을 말함.
- 자바스크립트 해석기가 함수 소스를 훑어보면서 변수는 따로 기억을 해 둠.
즉, 변수를 사용하기 전에라도 '이런 변수가 있구나' 라고 기억을 해 둠.
변수가 선언되기만 하고 값이 할당되지 않은 상태에서 sum 변수에서 사용이 된다면,
NaN이 나타나게 됨
*/
let str = "홍길동";
// let str = 178; // 변수명 중복 error 발생
console.log(str);
/*
자바에서의 입력 대화 상자 - 3가지
1. alert() : 알림(경고) 창
- 특정 정보를 사용자에게 메세지 창으로 알려 주기 위해 주로 사용됨
예 ) window.alert("알림 내용 또는 경고 내용");
alert("알림 내용 또는 경고 내용");
2. confirm() : 확인 창
- 확인 또는 취소 버튼이 나타나는 알림창
예) window.confirm("문자열");
confirm("문자열");
3. prompt() : 입력 창
- 키보드로 데이터를 입력받을 때 사용하는 알림창
예) window.prompt("문자열", [초기값 - 생략 가능]);
prompt("문자열", [초기값 - 생략 가능]);
*/
let ampm = confirm("지금은 오전입니까?");
console.log(ampm); // true or false값 반환
/*
Number() 함수
- 괄호 안에 값을 넣어 주면 숫자로 변환해 주는 함수
parseInt() 함수
- 괄호 안에 값을 넣어 주면 숫자로 변환해 주는 함수
*/
let x = prompt("당신의키는?);
document.write(Number(x));
let y = parseInt(prompt("당신의키는?));
document.write(y);
/*
템플릿 리터럴 방식
- 템플릿 리터럴은 문자열과 변수, 식을 섞어서 하나의 문자열로 만드는 표현 방식을 말함
- 템플릿 리터럴 이전에는 문자열 부분을 큰 따옴표로 묶은 후에 연결 연산자인 '+'를 사용하여 식이나 변수와 연결하였음.
하지만, 변수나 식이 많아질수록 오타가 나올 확률이 많게 됨
- 템플릿 리터럴은 백틱(``)을 이용해서 문자열을 만듦
- 템플릿 리터럴 안에 변수나 식이 들어간다면 ${} 로 묶어서 처리하면 됨
*/
document.write(`나의 키는 ${x} 입니다`);
/*
관계(비교) 연산자
- >=, >, <=, <, ==, !=, ===
- 관계연산자의 결과값은 항상 boolean형으로 나온다
*/
/*
==(동등연산자)
- 동등연산자는 비교 대상 값의 자료형이 다른 경우 강제로 형을 바꾼 뒤에 비교를 함
- 좌변항과 우변항을 비교하여 값이 자료형과 상관없이
내용이 같다고 한다면 true값을 반환, 내용이 틀리면 false값을 변환함
*/
let su3 = "1000", su4 = 1000;
document.write(`${su3 == su4}`);
==> true
/*
===(일치연산자)
- 일치연산자는 좌변항과 우변항의 내용이 정확하게 같을 때 true, 다르면 false값을 반환
- 좌변항과 우변항의 값이 같고, 좌변항의 자료형과 우변항의 자료형이 일치하면 true,
일치하지 않으면 false값을 반환
- 즉 내용 뿐만 아니라 자료형까지 일치해야 true값을 반환
*/
let su3 = "1000", su4 = 1000;
document.write(`${su3 == su4}`);
==> false
😀
//논리연산자(&&, ||, !)
조건식에서 ==> 0은 false 그 외의 정수는 true로 판별됨
// 단항(증감)연산자 (++,--)
/*
자바스크립트에서 제어문의 종류
1. 조건문 : if문, if~else문, 다중if~else문, switcha~case문
2. 반복문: while문, do~while문, for문
*/
// 조건식에 0, null, "", undefined ==> false
'JAVA Script' 카테고리의 다른 글
| 23.02.20 (노드찾기, 노드 중간 삽입, 노드복사, 노드이동) (0) | 2023.02.20 |
|---|---|
| 23.02.17 (DOM 요소 만들고 추가하기, 수정하기, 없애기, 스타일, onsubmit) (0) | 2023.02.17 |
| 23.02.16(화살표함수, 내장객체, DOM, 선택자 접근) (0) | 2023.02.16 |
| 23.02.15(함수(무명,callback, 타임아웃,인터벌), 객체) (0) | 2023.02.15 |
| 23.02.14(반복문, 난수, 배열) (0) | 2023.02.14 |
댓글