Script 언어란?
기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어
컴파일을 하지 않고 인터프리터(interpreter)를 통해서 코드를 바로 실행시킨다.
컴파일->코드를 한번에 기계어로 변환시켜서 컴퓨터가 이해할 수 있도록 하는 과정
인터프리터->한줄씩 코드를 읽어서 해석하는 기능(기계)
-스크립트 언어의 장점: 컴파일에 소요되는 시간이 없음(한줄씩 읽기 때문에)
-스크립트 언어의 단점: 프로그램 실행 시간이 컴파일 언어에 비해 상대적으로 느림
JavaScript란?
웹 브라우저(크롬, 엣지, 웨일, 파이어폭스 등)에서 주로 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어
객체지향프로그래밍 언어: 객체를 만들고 조작하며, 객체끼리 관계를 맺음으로써 다수의 객체가 함께 명령을 수행하는 것
\
JavaScript 코드 작성 방법
1)브라우저 개발자 도구(f12)의 console에서 직접 작성하기
2)HTML내부에 script 태그를 이용해서 작성하기(internal 방식)
<!--버튼이 클릳됐을 때 internalFn()함수가 호출된다(실행된다)--> <button type="button" onclick="internalFn()"> internal방식 확인</button> <script> // js 한 줄 주석 /*js 범위 주석*/ /*script 태그 js 코드를 작성할 수 있는 태그*/ function internalFn(){ alert("Internal 버튼이 클릭 되었습니다."); //alert:경고, 알리다의 의미. js에서는 알림창이나 대화상자를 의미함 } </script>
**3)HTML외부에 존재하는 .js 파일을 연결해 사용하는 방법(external 방식)
<button type="button" onclick="externalFn()">external 방식 확인</button>function externalFn(){ alert("외부 파일에 작성된 externalFn() 함수가 호출됨"); }
js 파일 연결은 body 태그의 바로 직전에 (모든 코드의 마지막 라인에) 작성한다.
<script src="../js/01_js개요.js"></script>
4)태그에 직접 js 코드를 작성(inline 방식, 권장x)
<button type="button" onclick="alert('inline 버튼 클릭됨')">inline 방식 확인</button>
변수와자료형
변수 (variable)란?
메모리에 값을 계속 바꿔가면서 저장할 수 있는 공간
*변수에 이름을 붙이고 원하는 값을 대입하면 필요한 곳에서 변수명을 호출하여 저장된 값을 사용할 수 있다
변수명 명명 규칙
-의미 있는 이름을 작성(대충 a,b 같이 짓는 것은 지양)
-대소문자를 구분
-특수문자는 _(언더바) 만 사용 가능(단, 첫 글자 제외)
-숫자 사용 가능(단, 첫글자 제외)
-카멜 표기법으로 작성
[카멜 표기법(Camel Case)]
문장, 여러 단어를 변수명으로 작성할 때, 이어지는 첫번째 단어를 대문자로 작성한다
//변수 선언
//메모리에 값을 저장할 공간을 만들고 이름을 붙이는 것
//작성법: 변수종류 변수명;
var number1;
//변수에 값 대입
//값 대입 : 선언된 변수에 값을 대입하는 것
//작성법: 변수명 = 값;
number1 = 4;
//콘솔에 number1값 출력하기
console.log(number1);
//변수의 선언 + 대입
var number2=4;
console.log(number2);
//number1와 number2의 합 출력하기
console.log(number1 +number2);
//변수에 대입한 값 변경하기
number1=300; //기존 변수의 값을 새로 재대입함(기존 값에 덮어쓰기됨)
number2=400;
//변경된 두 변수의 값 출력
//1)문자열 + 문자열/숫자/변수 ==> 두 단어가 이어쓰기됨
console.log("number1의 값 :" +number1);
console.log("100" +100); //100100이 출력됨
//2)괄호 내부에 , 를 작성해 각각의 값을 독립적으로 출력할 수 있음
console.log("number1 : " , number1, "/number2 :", number2);Javascript 변수의 종류와 특징
var
변수, 변수명 중복 가능(덮어쓰기)
함수 레벨 scope
let
변수, 변수명 중복 불가
블록{} 레벨 scope
const
상수, 변수명 중복 불가
블록{} 레벨 scope
함수 레벨 스코프(scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며, 함수 외부에서는 참조할 수 없다.
즉 함수 내부에서 선언한 변수는 지역변수(외부 선언 변수는 전역변수)
블록{} 레벨 스코프(scope)
모든 코드 블록 내에서 선언된 변수는 코드블록 내에서만 유효하며, 블록 외부에서는 참조할 수 없다
즉 코드 블록 내부에서 선언한 변수는 지역변수이다.
//함수레벨(var)
var test = 123; //전역변수
console.log(test); //123호출됨
{
var test=456; //함수 내부가 아님-> test 전역변수
}
console.log(test); //456이 호출됨
-----------------------------------
//블록 레벨( let, const)
let foo = 123; //전역변수
{
let foo=456; //지역변수
let bar=456;
console.log(foo); //456이 호출됨
}
console.log(foo); //123이 호출됨
//console.log(bar); //에러 뜸1순위 : const
(js는 특정 요소를 선택해서 사용하는 경우가 많기 때문에 const 상수에 고정시켜둠)
2순위 : let( 변수를 사용하는 경우 주로 사용한다)
3순위 : var 변수명 중복 허용이 가능하다는 점이 나중에 문제 많이 발생
//var, let, const의 차이점
//1. var (변수, 변수 선언 시 중복되는 변수명으로 선언 가능함)
// ->먼저 선언된 변수가 나중에 선언된 변수에 덮어 씌워짐
var menu ="삼겹살";
console.log("menu : "+menu);
var menu = "초밥";
console.log("menu : "+menu);
//초밥으로 변경되어 출력한다.
//이전에 선언했던 변수를 쓸 수 없게 되는 문제가 발생한다.
//-----------
//2. let(변수, var의 변수명 중복 문제를 해결함)
let number3=25;
//let number3=500;
//-> 에러가 뜨고 잇음(기존에 있던 변수에 새로운 값만 대입 가능함)
console.log("number3: ", number3);
//------------
//3. const(상수, constant, 항(상) 같은 수)
//한번 값이 개입되면 새로운 값을 대입할 수 없다
const PI = 3.141593;
//PI = 1.34;
//console.log(PI);로 콘솔 확인 시
//Uncaught TypeError: Assignment to constant variable.
//->상수에 새로운 값을 대입할 수 없는데 새로운 값이 대입되었다는 의미
자바스크립트의 자료형
자바스크립트는 변수 선언 시 별도의 자료형을 지정하지 않는다 ->자료형을 변수에 대입되는 값으로 구분한다.(literal로 구분)
-string(문자열)
-number(숫자) ->정수, 실수 모두 포함
-boolean(논리값) ->true/false
-object(객체) ->배열(Array), 자바스크립트 객체{k:v, k:v ..}
-function(함수)
-undefined(정의되지 않은 변수) ->변수가 선언만 됐고 값은 대입되지 않은 상태
(참고)
- null : 값이 지정되지 않음, 참조하는게 없음(리터럴의 개념이지 타입은 아니다)
ex) document.getElementById("오타씀") ->가장 흔한 경우
->id가 일치하는 요소가 없어서 참조 할 수 없는 상황
//typeof 연산자 : 변수나 값의 자료형을 출력하는 연산자
//undefined : 정의되지 않은 변수/ 값이 아직 대입되지 않았다
let undef; //변수 선언
console.log("undef: ", undef, typeof undef); //undef: undefined undefined 출력됨.(값과 타입이 호출되었다)
//string(문자열) : "" 또는 '' 내부에 작성된 값
const name1 = "홍길동";
console.log("name: ", name1, typeof name1); //name: 홍길동 string 출력됨
const phone ='010123412434'
console.log("phone: ",phone, typeof phone); //phone: 010123412434 string 출력됨
const gender ='M' // 한글자만 작성해도 문자열(string)임
console.log("gender: ", gender, typeof gender); //gender: M string 출력됨
//number (정수, 실수, 양수, 음수, 0 등 모든 숫자 의미함)
const age=43;
const height=178.9;
console.log("age: ", age, typeof age); //age: 43 number
console.log("height: ", height, typeof height); //height: 178.9 number
//boolean(논리값, true, false)
const isTrue =true;
const isFalse =false;
console.log("isTrue: ", isTrue, typeof isTrue) //isTrue: true boolean
console.log("isFalse: ", isFalse, typeof isFalse) //isFalse: false boolean
//object(객체)
//값을 여러개 저장할 수 있는 형태
// 1)배열(Array) : 여러 값이 나열되어 있는 것의 묶음
const numbers =[1,2,3,4,5,6];
console.log("numbers: ", numbers, typeof numbers); //numbers: (6) [1, 2, 3, 4, 5, 6] object 출력됨
console.log("numbers배열 값 중 0번째: ", numbers[0]); //numbers배열 값 중 0번째: 1 출력됨
//2)js 객체
//값을 k:v(map) 형식으로 여러개 저장하는 형태
// -> {k:v, k:v, ...}
//key : 값을 구분하는 이름(변수명 비슷)
//value : k에 대응되는 값(변수에 대입되는 값 비슷)
const user={id:"user01", pw:"pass01", username:"홍길동"};
console.log("user: ", user); //user: {id: 'user01', pw: 'pass01', username: '홍길동'} 출력됨
//객체에 존재하는 값 하나씩 얻어오기
//방법1: 변수명['key'] ->해당 key에 대응하는 value가 출력된다.
console.log("user['id']: ", user['id']); //user['id']: user01
console.log(user['pw']); //pass01
console.log(user['username'], typeof user['username']); //홍길동 string
//방법2: 변수명.key
console.log(user.id);함수(function)
//작성법
//const 변수명=funstion(){};
//(변수명==함수명)
const sumFn =function(a,b){return a +b }; //익명함수(함수의 이름이 대입 전까지 없었으니까//sumFn은 변수명이자 대입되는 함수의 함수명임
console.log(typeof sumFn); //function
console.log(sumFn(10,11)); //21
/*
function sumFn(a,b){
return a+b;
}
->이 작성법은 위의 익명함수와 같다.
*/연산자(operator)
산술연산자
산술연산자 종류 : +, -, *, %(modulo/mod:나머지 연산자), /
증가/감소 연산자(++, --)
-1씩 값을 증가/감소시키는 연산자
-합쳐서 증감연산자라고 부르기도 함
*전위 연산(어떠한 다른 연산자보다 제일 먼저 1 증가/감소)
++변수명, --변수명
*후위 연산(제일 나중에 1 증가/감소)
변수명++, 변수명--
JS에서 .value와 innerText의 차이점
.value는
- input과 같은 form의 요소를 가져오고 싶을 때 사용한다.
innerText는
- Element의 한 속성이다.
- 해당 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어온다.
- 내용에 연속되는 공백이 있다면 연속공백을 무시고 하나의 공백만 처리하여 보여진다.
- display : none; 한 값들은 불러들이지 않는다.
→ 입력태그(input, select, textarea 등)가 아닌 일반 태그들의 내부 값을 가져올 때는 value 가 아니라 textContent, innertext 속성을 사용한다.
