티스토리 뷰
Javascript?
🙾 동적 움직임 담당
- 프로그래밍 언어
- 스타일 선택, 변경, 생성, 수정, 삭제 (= DOM 조작)
- 백엔드(서버)에서도 작업 가능
- 변수, 함수, 반복문, 조건문 기타 등등
🙾 세미콜론(;)이 있으면 문장
- 하나 이상의 표현식이 모인 것
- 문장 끝에는 세미콜론(;)을 적어서 문장의 끝을 알림
ex) 546; , 20 + 34 *2; , var test=“Test”+”One”; , alert(“Hello JavaScript !!”);
🙾 식별자
- 변수명과 함수명과 같은 이름을 붙일 때 사용하는 단어
- 한글, 한자, 일본어 같은 모든 언어 사용 가능
- 규칙
① 키워드와 공백 문자를 사용할 수 없음
② 숫자로 시작할 수 없음
③ 특수문자는 _과 $만 허용
🙾 하이픈이 있는 CSS속성은 하이픈을 없애고 대문자로 붙여씀
🙾 자바 스크립트 실행: 태그에 직접 실행 (= inline script)
🙾 이름있는 함수에는 arrow function 사용 불가
🙾 글씨: 대상.innetText = '값'; (= 대상.textContent)
🙾 태그: 대상.innerHTML = '값';
🙾 Template Literal
- var / let은 초기화 (= 새로 생성)
- `${ }`
🙾 <script></script> 태그는 어디에 있어도 상관없음
- head에 작성 시 JS에서 가장 먼저 작성해야 할 일: 문서의 모든 내용을 로드
document.addEventListener(DOMContentLoaded, function(){});- head, body 어디든 상관없음 (끝만 아니면 됨)
- body 닫히기 전에 있는 것이 가장 바람직
ex) script가 한 페이지에서 작업 될 때
<body>
<h1>자바스크립트 기초</h1>
<button>버튼</button>
<!-- <button onclick="alert('반갑습니다')">버튼</button> -->
<script>
let button = document.querySelector('button');
console.log(button);
button.addEventListener('click',function(){
alert('반갑습니다');
})
</script>
</body>ex) script가 다른 페이지에도 공통으로 작업 될 때
<body>
<h1>자바스크립트 기초</h1>
<button>버튼</button>
<!-- <button onclick="alert('반갑습니다')">버튼</button> -->
<script src="00_basic.js"></script>
</body>
variant (변수)
🙾 어떤 값을 넣을 수 있는 저장소 (= 데이터를 저장하는 그릇)
🙾 변수의 문법
- var 변수명 = 값;
- 값에는 숫자, 문자, Boolean(true,false), 함수, 배열, underfined, null가 있음
- 변할 수도 있는 값
- 문자는 반드시 따옴표 안에 써야 함 (" ", ' ')
- 숫자는 따옴표 없이 써야 함
<body>
<h1>변수</h1>
<script>
var _new = "기본";
document.write(_new);
document.write(_new);
document.write(_new);
var num = 30;
document.write(num);
num = 40;
document.write(num);
var bool = true;
console.log(_new);
</script>
</body>➡ 변수는 한 번 지정하면 끝이 아니라 다시 지정 가능 (ex. num으로 기본에서 30,40으로 변경함)
➡ 값을 확인하는 방법: console.log(_new);
F12 -> console에서 확인 가능
🙾 산술연산자
<script>
var num1 = 100;
var num2 = 30;
console.log(num1+num2);
console.log(num1-num2);
console.log(num1*num2);
console.log(num1/num2);
console.log(num1%num2);
console.log(5%2);
</script>➡ / (= 나누기)와 %(= 나누고 나머지 값)은 다름
🙾 문자열 더하기
<script>
var str1 = '자바스크립트';
var str2 = '기초';
console.log(str1+str2);
console.log(10+20);
console.log('문자'+20);
console.log('문자'+20+30);
console.log(10+'문자');
console.log(10+'20');
console.log(10*'20');
</script>➡ 문자는 숫자와 산술하지 못함
➡ 문자 뒤의 숫자와 산술하면 숫자가 문자로 인식 됨 (= 타입으로 지정 됨)
➡ 숫자가 들어갈 경우 덧셈만 문자로 인식되어 산술이 안 되고 나머지 연산자들은 숫자로 인식되서 산술이 가능
🙾 증감 연산자
<script>
var i = 1;
// i++; // i = i + 1;
console.log(i++);
console.log(++i);
console.log(i);
console.log(i);
</script>➡ i++ : 후치, 실행되는 시점에서는 변화가 X, i가 뒤에 바뀜
➡ ++i: 선치, i가 바로 바뀜
🙾 복합 대입 연산자
<script>
var a = 10;
a+=10; // a = a + 10;
a*=2;
console.log(a);
</script>
function (함수)
🙾 함수의 문법
- 새 함수를 생성 : function 함수명() { 할일 };
- 함수 실행 : 함수명();
<script>
function send() {
alert('경고');
}
send();
</script>
🙾 함수의 구조
<script>
/* 입력, 할일, 출력
function 함수명(파라미터) { 할일 }
함수명 (10); 10 = 인수 */
function greeting(msg) {
alert(msg);
}
greeting('반갑습니다');
// msg (= parameter: 매개변수)
// greeting(= argument: 인수, 전달인자)
function add(a,b){ // 입력값 a,b
var sum = a+b; // 할 일 덧셈
return sum; // 출력
}
let result = add(10,30);
console.log(result);
</script>➡ let result = add(10,30,40);
만약 숫자를 3개 입력 했을 시 a,b 두 개만 입력 했기 때문에 똑같이 두 개까지만 출력됨
let result = add(10,20); // 호이스팅=hoisting=끌올
console.log(result);
function add(a,b){ // 입력값 a,b
var sum = a+b; // 할 일 덧셈
return sum; // 출력➡ hoisting = 호이스팅 = 끌올
🙾 변수의 호이스팅
<script>
console.log(num);
var num = 5;
</script>➡ 이름이 있는 함수는 어디서든 호출이 가능
➡ hoisting은 되었지만 값을 지정하지 않았으므로 출력 불가
<script>
let num2 = 5;
console.log(num2);
</script>➡ let으로 생성한 변수는 hoisting 불가
<script>
const num3 = 3;
num3 = 5;
</script>➡ constance = 상수 = 변하지 않는 값
➡ const으로 생성한 변수는 hoisting 불가
🙾 익명함수
<script>
var sum = function(x,y){
var z = x+y;
return z;
}
console.log(sum(10,20));
</script>➡ 익명함수는 지정한 이름이 없기 때문에 호이스팅 불가
🙾 즉시 실행 함수
<script>
/*
(function(매개변수){
})(인수);
*/
var result2 = (function(a,b){
return a+b;
})(10,30);
document.write(result2);
</script>
Atrribute (속성)
| 메소드 | 리턴타입 | 설명 |
| setAttribute(String name, Object value) | void | 이름이 name인 속성의 값을 value로 지정합니다. |
| getAttribute(String name) | Object | 이름이 name인 속성읠 값을 구합니다. 지정한 이름의 속성이 존재하지 않을 경우 null을 리턴합니다. |
| removeAttribute(String name) | void | 이름이 name인 속성을 삭제 합니다. |
| getAttributeNames() | java.util Enumeration |
속성의 이름 목록을 구합니다. |
'JavaScript' 카테고리의 다른 글
| Timer & Math (0) | 2023.06.05 |
|---|---|
| 문자열 (IndexOf, Search / concat / replace / slice / split / length) (0) | 2023.06.05 |
| 반복문 (for / while / do while / forEach / for in / for of ) (0) | 2023.06.05 |
| 조건문 (비교연산자 / 타입비교 / 중첩조건문 / 논리연산자 / switch) (0) | 2023.06.02 |
| Object(객체) / Array(배열) (0) | 2023.06.02 |