웹페이지
- HTML
- CSS
- JS: 웹 동작 구현
자바스크립트
- 객체 기반 스크립트 언어
- 동적 및 인터프리터 언어
- 객체 지향형+함수형
자바스크립트의 동작
- HTML의 내용 변경
- HTML의 속성 변경
- HTML의 스타일 변경
자바스크립트의 문법
- 리터럴: 값
- 식별자: 변수 혹은 함수의 이름
1. camel case: firstVar
2. Underscore case: my_first_javascript
- 키워드: 어떠한 역할 수행을 위함, 식별자 사용 금지
- 주석: c와 동일
자바스크립트의 적용
1. 내부 자바스크립트 코드로 적용
<script> 태그로 HTML 문서 안 삽입
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
</head><body>
<p> 자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근 가능 </p>
<button onclick="printDate()"> 현재 날짜와 시간 표시 </button>
<p id="date"></p>
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
</body>2. 외부 자바스크립트 코드로 적용
js확장자 파일 생성 -> <script> 태그로 파일 포함시키기
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script src="/examples/media/example.js"></script>
</head>function printDate(){
document.getElementById("date").innerHTML=Date();
}
자바스크립트 자료형 타입
1. 원시 타입(primitive)
숫자: 매우 크거나 작은 수는 e 사용
var firstNum=10;
var secondNum=10e6; // 10000000
문자열: 따옴표로 둘러싸인 문자의 집합
var firstStr = "문자열";
var secondStr = "나는 '문자열'";
//숫자와 문자열 합치기, 숫자가 문자열로 자동 변환
var num=10;
var str="JavaScript";
document.getElementById("result").innerHTML = (num + str); //10JavaScript
불리언(boolean)
var firstNum=10;
var secondNum=11;
document.getElementById("result").innerHTML = (firstNum == secondNum); //false
심볼:ECMAScript 6부터 제공
유일하며 변경할 수 없는 타입 -> 객체의 프로퍼티를 위한 식별자로 사용
var sym = Symbol("javascript"); //symbol 타입
var symObj=Object(sym); //Object 타입
undefined
null: object 타입, 값이 정해지지 않은 것
undefined: '타입'이 정해지지 않음
var num; //undefined
var str = null; //object의 null동등연산자(==)과 일치연산자(===) 구분
null == undefined; //같은 의미
null === undefined; //타입 다름, 일치 X
2. 객체 타입
객체: 여러 프로퍼티나 메소드를 같은 이름으로 묶어놓은 일종의 집합체
*프로퍼티: 다른 값과 연관된 값
const str='문자수';
console.log(str.length);위 예시에서 문자열에 length라는 프로퍼티 존재, object의 특징
*메소드: 객체가 가지고 있는 동작, 프로퍼티로 정의된 함수
'security: study > 시큐어코딩' 카테고리의 다른 글
| [JS] raw SQL vs query builder vs ORM (0) | 2024.01.06 |
|---|---|
| 자바스크립트 난독화(Javascript Obfuscation) (0) | 2024.01.05 |
| 자바스크립트 시큐어코딩 가이드: 시간 및 상태~ API 오용 (0) | 2023.12.30 |
| 자바스크립트 시큐어코딩 가이드: 입력값,보안기능 (0) | 2023.12.29 |