728x90

javascript 또한 객체지향(java도 객체지향)적이고 별도의 컴파일 작업을 수행하지 않는다.

 

src와 type사용해서 script를 선언 가능하다.

<script src="hello.js" type="text/javascript">

 

javascript는 변수를 만들 때 타입을 따로 지정해주지 않아도 자동으로 지정된다.

 

function hellojs(name){
	alert("내 이름은 "+name+"입니다");
    console.log(`내이름은 ${name}입니다);
 }
 hellojs("dropdew");

++를 이용하여 변수를 사용하지 않고 ``백틱 사용하면 문자열 내에서 ${변수}로 활용 가능하다.

 

css는 style태그와 Link태그를 구분(내부/외부)하지만, script는 태그 내에서 처리를 다 하기 때문에

만약 외부의 js를 가져다 사용할거면 body내에는 아무것도 적으면 안된다..!

<script src="">여기에 아무것도..!</script>\
<script></script>

대신 또 다른 script생성해서 거기에 적어주면 해결할 수 있다 !

html구조에서 <body>안의 끝부분에 script 넣어주는 것을 권장

 

document.querySelector("#btn").addEventListener("click",function(){
	alert("버튼눌렀어요");
});
window.onload = function(){
    document.querySelector("#btn").addEventListener("click",function(){
        alert("버튼눌렀어요");
    });
};

onload의 경우 window가 끝까지 잘 읽혔다면 실행해달라는 뜻

 

변수가 숫자형이든, 문자열이든, 모두 var를 사용한다.

 ▶️ ES6에서 let과 const가 생겼답니다 !!

변수 = 형용사/동사, 함수 = 동사 사용

var myName;
var selected = false;

 

원시타입(5가지)

1. 숫자 number

2. 문자열 String

3. boolean boolean

4. undefined undefined

5. null object

cf) undefined: 변수가 선언되었지만 초기화 되지 않은 경우

 

js는 0으로 나누어도 exception발생하지 않고 infinity라는 값 가지게 된다.

NaN = 계산식의 결과가 숫자가 아님을 나타내는 상수

 

숫자형으로 바꾸는 방법엔 parseInt와 nuw Number가 있음

console.log(parseInt("30"));	//30
console.log(new Number("40A"));	//40
console.log('문자열 안에 포함된 \'작은따옴표\' 표현');
//문자열 안에 포함된 '작은따옴표' 표현

 

비어있는 문자열, null, undefined, 숫자 0은 false로 간주

null은 값이 없거나 비어있음을 뜻한다.

undefined = 값이 초기화되지 않았음(정의되지 않았음), 코드에 오기 전에 시스템 레벨에서 undefined로 초기화된다. 만약 값이 없을 때에는 undefined=null이라고 명시를 해주어야 한다!

 

문자열 + 숫자 = 문자열

- 는 숫자와 숫자 사이에서만 사용 가능

+ 는 숫자의 +가 아니라 append의 성질을 가진다(문자열)

console.log("1.1"+"1.1"); 	//1.11.1
console.log((+"1.1")+(+"1.1")); //2.2
console.log("3"-"1")	//2

 

var test;
console.log(typeof test) //undefined
test = null;
console.log(typeof test) //object
test = {};
console.log(typeof test) //object

 

변수 호이스팅

var 키워드 사용한 변수는 중복 선언 가능하다(전역변수의 성질을 가짐)

var선언문이나 function선언문은 어디에 있어도 맨 위에 올라가는 것과 같음 = 호이스팅

cf) 변수의 생성

   1. 선언 단계 : 변수 객체에 변수 등록

   2. 초기화 단계 : 변수 객체에 등록된 변수 메모리에 할당. undefined로 초기화됨.

   3. 할당 단계 : undefined로 초기화된 변수에 실제 값 할당

변수 선언이 콘솔보다 아래에 있어도 에러가 아니라 undefined 출력되는 게 이와 같은 논리

console.log(test);	//undefined

var test = 10;
console.log(test); //10

var test = 20;
console.log(test); //20

이를 해결하기 위해선 const와 let사용해서 해결 가능하다.

상수의 표기법은 모든 문자를 대문자로 사용.

단어 사이는 _로 표기

ES6에서 const는 상수를 지원한다(값이 재할당될 수 없음)

var THIS_IS_NUMBER = 10;

 

키워드 구분 선언위치 재선언
var 변수 전역 스코프 가능
let 변수 해당 스코프 불가능
const 상수 해당 스코프 불가능 
function(){
	{
    	var val = 10;
        //let val = 20;
        const con = 10;
        //con = 20;
    }
    {
    	alert(val);	
        alert(con);	
    }
    alert(val);
}

//var val: 항상 실행
//let val: error
//const con: error

 

삼항연산자

(A > B ? "true" : "false")

 

forEach문

var alphabet = ["a","b","c","d"];
areas.forEach(function(area){
	console.log(alphabet);
});

 

객체(Object)

: 이름(key)과 값(value)으로 구성된 프로퍼티의 집합

함수는 일급객체이므로 값으로 사용 가능하다.

1. {} 사용해서 객체를 생성

var obj = { name:"dropdew" }

2. object생성자 함수

var obj = new Object();
obj.name = "dropdew";

 

⭐️⭐️⭐️⭐️⭐️

 

function내부에서 선언된 this.변수의 경우 선언된 function내부에 변수가 없을 경우 상위에서 변수를 찾는다.

(this.name 등으로 사용 가능)

화살표함수 내의 this.변수의 경우 함수 내에 변수가 없으면 상위에서 찾는게 아니라 window로 넘어가서 변수를 찾는다.

(전역으로 넘어감)

console.log(areas.name);
console.log(areas["name"]);
console.log(areas["user-name"]);

속성값 조회 시 areas.name뿐만 아니라 areas["name"]으로도 조회 가능하다.

속성값에서 연산자 포함시 [] 표기법만 사용가능

 

var middle = employee['middle_name'] || 'none'

객체 속성값 조회시 || 연산자 사용 가능하다.

'none'과 같이 default값 설정 가능하다.

 

function

함수는 일급객체

함수를 변수, 객체, 배열 등에 저장할 수 있고 다른 함수에 전달하는 전달인자(콜백함수)또는 리턴 값으로 사용 가능하다.

함수는 프로그램 실행 중에 동적으로 생성 가능하다.

함수의 정의 방법은 함수선언문, 함수표현식, function생성자(constructor)함수 세가지 방식 제공

//함수 선언문
function 함수이름(매개변수1, 매개변수2, ... ){}

//함수 표현식(익명함수)
var 함수이름 = function(매개변수1, 매개변수2, ...){}

//function 생성자 함수
var 함수이름 = new function("매개변수1","매개변수2",..);

//함수 호출
함수이름(매개변수1, 매개변수2, ...);

함수 또한 호이스팅 된다. (함수선언문 일 때만)

단, 함수표현식의 경우 변수 호이스팅이 된다. ▶️ 표현식으로 만들었을 경우 함수 아래에 선언해줘야함 (console 같은거..)

 

콜백함수: 함수를 명시적으로 호출X, 특정 이벤트 발생 시 호출되는 함수로 매개변수로 들어가는 함수(function안에 function)

ex) addEventListener, setTimeout..

728x90

'BE' 카테고리의 다른 글

[Java] 오버로딩(Overloading) vs 오버라이딩(Overriding)  (2) 2024.03.12
[Java] 추상화(Abstraction)의 개념과 예제  (1) 2024.03.11
[Java] 상속(Inheritance)의 개념과 예제  (1) 2024.03.11
[Java] 캡슐화(Encapsulation)의 개념과 예제  (0) 2024.03.11
[Javascript] js remind  (0) 2022.12.13

티스토리툴바