[JavaScript] 간단 정리

▶︎ 아주 기본적이고, 많이 쓰이는 함수

document.write() : 웹페이지에 출력

alert() : 알림창 (개인적으로 응용범위가 많아 좋아함)

document.querySelector() : 괄호안의 선택자를 만족하는 문서 내 ‘첫번째 태그 하나’를 리턴.

document.querySelectorAll() : 괄호안의 선택자를 만족하는 문서 내 ‘모든 태그’를 리턴.

 

 

▶︎ 자료형

• 기본 자료형
• Boolean
• Null
• Undefined
• Number
• String
• Symbol
• Object

 

▶︎ 자바스크립트 깨알 정리

 

▪︎ 자바스크립트에서 변수를 다룰 땐 var 를 이용함.

 

▪︎ 문자열을 감쌀 때 php와 마찬가지로, ‘’로 감싸던 “”로 감싸던 상관없음.

 

▪︎ 태그의 onclick 속성값에는 무조건 자바스크립트가 들어감.

+onclick안의 자바스크립트에서 참조하는 this는 해당 태그를 의미함. 

 

▪︎ 자바스크립트에서는 비교연산자 ==가 ===임. (세개)

자바, C, C++ 등에서는 ==, SQL에서는 =, 자바스크립트에서는 ===

-> 이에 대해 더 알아보니, 자바스크립트에서는 다른 언어들과 달리 ==와 === 가 둘다 존재한다고 함.

==는 비교 시 피연산자들을 비교할 수 있는 형태로 형변환 시키는데에 반해

===는 비교 시 피연산자들을 형변환 시키지 않는다고 함.

그리고 가능한 ===을 통한 순수 비교를 권장.

[ 참고 정리 ]

velog.io/@jakeseo_me/자바스크립트-개발자라면-알아야-할-33가지-개념-5-vs-3분만에-배우기-번역

자바스크립트 개발자라면 알아야 할 33가지 개념 #5 == vs === 3분만에 배우기 (번역)

 

 

▪︎ php에서

<?
echo “<br>”;
?>

처럼 javascript에서도

<script>document.write(“<br>”); </script>

를 사용함. (출력문 안에 태그를 넣어서 HTML 문법을 실행시킬 수 있음)

 

▪︎ 자바스크립트 배열 예제

var arr = [“one”, “two”, “three”];

arr.add(“four”);

-> 다른 언어들의 기본 배열들보다 동적인 것을 알 수 있음.

 

▪︎ 한 페이지 내에서 스크립트를 여러번 열고 닫는 것에 상관없이 다 자바스크립트 데이터는 연관되어있음

(<script>var hello=“hi”;</script> 하고, 나중에 <script>document.write(hello)</script> 해도 된다는 것.)

 

▪︎ 자바스크립트에서의 함수를 정의할 때 function이라는 키워드를 붙인다.

function 함수이름(매개변수들) {

// return or not.

}

 

+ 자바스크립트에서는 매개변수를 선언할 때 그냥 변수이름만 넣어줌

ex) 

function hello(z) {

}

+ 자바스크립트에서는 리턴값 유무에 상관없이 함수 헤드를 작성하고, 함수 안에서 return을 이용해 리턴시키면 됌. 매우 간단.

 

▪︎ 자바스크립트에서 객체 선언

var hello = {

id:”hevton”,

job:”developer”,

print:function() { }

};

값을 꺼내 쓸 때 -> hello.id 또는 hello[“id”] 이용.

함수를 사용할 때 -> hello.print();

 

+ hello.phonenumber = “010-xxxx-xxxx” 로 새로운 변수에 대해 값도 추가할 수 있음.. 참 유별난 javascript.

마찬가지로 hello.func = function() {

} 정의를 통해 함수도 넣어줄 수 있음…

 

▪︎ 이건 다른 언어들과 공통적일 수 있는 부분.

객체 안에 정의된 변수 = property

객체 안에 정의된 함수 = method 라고 부름.

 

▪︎ 자바스크립트의 재사용성을 위해 파일로 분리하는 방법

CSS에서 style 태그 안의 코드들을 모두 복사해서 .css파일로 옮긴 뒤, <link rel="stylesheet" href="파일명.css">

형태를 취한 것처럼, script 태그 안의 코드들을 모두 복사해서 .js 파일로 옮긴 뒤에 <script src=“파일명.js”></script> 형식으로 참조한다.

 

+ 이렇게 파일로 분리하는 것이, 웹서버의 트래픽 상에서는 좋지 않아 보일 순 있으나 사실상 ‘캐싱’ 이라는 기능 덕분에 js파일이 변하지 않는 한 웹브라우저는 한번 다운로드해놓은 파일을 추가 다운로드 없이 계속 이용하기 때문에 웹서버도, 클라이언트도 비용을 절감할 수 있다.(css파일도 마찬가지. 내생각엔 html에서 참조하는 추가 파일들은 알아서 캐싱하는듯?)

 

▪︎ jQuery 라이브러리를 사용하면, 자바스크립트 코드를 매우 간결하게 줄일 수도 있다.

(파이썬이 라이브러리가 너무 많기 때문에 코드가 매우 짧은 이유처럼..)

 

▪︎ 더욱 알아갈 내용

document : 태그에 관해 다룰때나, 기본적인 기능들.

DOM : document보다 큰 범위.

window : 웹 페이지가 아닌 웹 브라우저에 대해 다룰 때.

ajax : 웹페이지를 리로드하지않고 정보를 변경할 때.

cookie : 웹페이지가 리로드되어도 현재상태를 유지하고 싶을 때.

 

 

▶︎ 느낀점

일반적인 객체지향 언어들과 달리 클래스와 객체의 개념이 모호한 것 같음.. 약간 압축시킨 느낌? 이해에 다소 헷갈림이 있음.

자바가 파이썬화 되는 느낌. 속상하다.

 

 

수업의 출처 : opentutorials.org 이고잉님.