Day 31 - javascript
1. javascript 사용방법
- inline 방식 : tag 속성에 이벤트를 작성 <li 작성></li>
- embedded 방식 : document에 작성하는 방식(어느 위치든 작성해도 동작), <script>작성</script>
- linked 방식 : 외부에 javascript파일을 연결하여 사용 <script type="text/javascript" src="./js/js_001.js>"
- 방식에는 우선순위가 있음
2. javascript 탐색
- function 함수명() { 실행시킬 것 작성}
- "함수명();"을 찾아서 실행하면 된다.
- <button onclick = "함수명()"></button>
3. javascript의 실행순서
- link와 embedded는 작성 순서에 따라 실행되는 순서가 정해진다
- link로 작성하고 defer를 선언하면 가장 마지막에 실행한다.
- link의 window.onload는 화면이 다 구성된 이후 마지막에 실행한다.
4. 변수의 범위
- 전역변수 : window 객체 포함되는 변수, 다른 함수들에서 공용으로 사용(값이 유지됨)
- 지역변수 : 함수나 객체 내부에 선언되고 실행이 종료되면 사라짐
- 전역변수는 지역변수에서 다시 정의하면 지역변수가 됨
innerHTML : mark up 의 시작과 종료 tag 사이의 영역을 HTML로 인식시켜서 넣는다
textContent : mark up 의 시작과 종료 tag 사이의 영역을 문자로 인식시켜서 넣는다
5. window 객체에서 제공하는 대화형 함수 : alert,prompt, confirm
- alert : 화면에 출력하고 끝
- prompt : 텍스트 박스 제공, 확인 취소 제공
- confirm : 확인 취소 제공, 따라서 ture/false
console.log(); 콘솔에서 로그 확인
/**
* undefined 미정의되어 있다
* 변수는 선언되어 있으나 값이 없는 경우
*/
//변수의 사용 영역
function variable_Scope(){
// alert('작동');
// var a;
// alter(a);
// console.log(a);
// aler(b);
var a =10;
if(true){
var b = 100;
var b = 200;
b = 300;
for(var c=0; c<5; c++){
console.log('c='+c);
}//for문
console.log('for문 밖의 c='+c);
}
console.log('if문 밖의 b='+b);
const PI = 3.14; //ES6추가된 문법 상수와 변수를 상수화
// PI = 10.1; //CONST는 변수를 상수로 만들기 때문에 console에서 로그 확인해야함
for(let i=0; i<3; i++){//ES6추가 var를 local variable로 변경시켜줌
console.log(i);
}
console.log(i); //var변수와 다르게 외부(사용 function 내부)에서 사용할 수 없다
}
//function
//변수의 범위
//1. 전역 변수 모든 function에서 사용 가능
var variable = 10;
function global_Variable(){
console.log('작동');
variable = variable + 3;
var doc = document.getElementById('v1');
doc.textContent = '<b>'+variable+'<b>';
}
function local_Scope(){
//전역 변수의 선언은 지역변수에서 다시 정의하면 지역변수 된다
alert(variable);//지역scope와 variable 없기 때문에 undefined가 ㅅ된다
var variable = 5;//지역 scope 선언
alert(variable);// 위의 지역 scope를 사용 5출력
}
//innerHTML : mark up 의 시작과 종료 tag 사이의 영역을 HTML로 인식시켜서 넣는다
//textContent : mark up 의 시작과 종료 tag 사이의 영역을 문자로 인식시켜서 넣는다
function local_Variable(){
let variable02 = variable + 99;
document.getElementById('v2').innerHTML = '<b>'+variable02+'<b>';
}
function variableType(){
var var02 = 5; //정수 -> 숫자 number
var var03 = 3.14;//실수 -> 숫자 number
console.log(typeof var03);
console.log(typeof var02);
var var04 = '문자';
console.log(typeof var04);//string
var var05 = [1,3,5,7];
console.log(typeof var05);//배열(array) -> object
var var06 = false;
console.log(typeof var06);//boolean false: 0 true :1
console.log(true + 11);//javascript에서 boolean연산의 값으로 변환
var var07 = null; //null타입 -> object
console.log(typeof var07);
var var08 = function(id){//function 이름이 없는 함수(익명함수)
alert('값='+id);
}
console.log(typeof var08);
var08('금요일');
var var09;//선언만 되어 있는 변수는 undefined
console.log(typeof var09);
var var10 = document.getElementById('val');
console.log(typeof var10); // dom탐색의 결과 ID가 val인 node는 없음
}
6. javascript 함수의 사용
- 명시적 함수 : 이름이 있음
- 익명적 함수 : 이름이 없음 변수에 담겨 있음 (var)
- 함수 리터럴 : 값의 역할을 하는 function 사용
label은 for를 통해서 id를 부여받은 곳과 연결해줌
//명시적 함수 : 이름을 가지고 있는 함수
function function01(){
console.log('명시적 함수 : function 함수명()')
}
//익명적 함수: 함수인데 함수명을 가지고 있지 않고 변수에 담겨 있음
var function02 = function (){
console.log('익명적 함수 : 이름이 없는 함수')
}
// 함수의 리터럴
// 즉, 변수에 담겨져 있는 function이 아닌 값의 역할을 하는 function을 사용함
function literalFn(literal){
literal("안녕하세요 리터럴입니다.")
}
function function03(){
literalFn(function(msg){alert(msg);});
}
// var literal = function(msg){alert(msg);};
// literal("안녕하세요 리터럴 입니다")
//
function valueArguments(){
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
console.log(arguments[3]);
console.log(arguments[4]);
var val = '';
//javascript에서의 향상된 for문은 두개(in, of)의 연산자를 가지고 있음
//in은 Array의 index번호를 반환
//of는 Array의 값을 반환
for(var iter in arguments){
console.log(arguments[iter]);
}
for(var iter of arguments){
console.log("＃"+iter);
val += iter;
}
console.log(val);
}
//클로저(closure)함수
function closureFn(val){
function addVal(msg){
alert(val+":"+msg);
}
return addVal;
}
var amEdu = closureFn("database");
var pmEdu = closureFn("javascript")