학원/복기 (172) 썸네일형 리스트형 [JavaScript] 전역변수와 지역변수 전역변수와 지역변수 전역변수(Global Variable)는 함수 외부에서 선언된 변수이며, 모든 함수에서 사용이 가능하다. 지역변수(Local Variable)는 함수 내부에서 선언된 변수이며, 선언된 함수에서만 사용이 가능하다. 전역변수는 모든 함수에서 사용이 가능하다. var globalVar=100;//전역변수 function display1() { alert("display1 함수에서 사용하는 globalVar 변수값 = "+globalVar); globalVar=200;//함수에서 전역변수에 저장된 값 변경 } function display2() { alert("display2 함수에서 사용하는 globalVar 변수값 = "+globalVar); } display1();//display1 함.. [JavaScript] 함수(Function) / 선언함수와 익명함수 / 화살표함수 함수(Function) 함수는 매개변수로 값을 전달받아 가공처리하여 결과값을 반환하는 기능을 제공한다. 자바스크립트에서는 함수를 선언해야지만 함수를 호출하여 함수에 작성된 명령을 실행해 결과값을 반환받아 사용할 수 있다. 자바스크립트에서는 함수 선언방법에 따라 선언함수와 익명함수로 구분할 수 있다. 선언함수는 함수명을 명시하여 선언하는 함수이고, 익명함수는 함수명을 명시하지 않고 선언하는 함수이다. 선언함수 함수명을 명시하여 함수를 선언한다. 여기서 함수명은 함수를 구분하기 위한 식별자를 뜻한다. 형식) function 함수명(매개변수, 매개변수, ...) { 명령; 명령; ... } → 함수명은 내부적으로 변수로 처리되어 선언함수를 값으로 저장한다. (함수명에 함수가 저장된다.) function dis.. [JavaScript] 제어문 자바스크립트 제어문 제어문 : 프로그램의 흐름을 변경하기 위해 사용하는 명령 선택문 - if, switch 반복문 - for, while 기타 - break,continue 예제1) 사용자로부터 숫자값을 입력받아 숫자값에 대한 제곱근을 계산하여 출력 → 숫자형이 아닌 값을 입력한 경우 에러메세지 출력 var num=prompt("숫자값을 입력해 주세요."); alert(num*num); //num은 string 이지만 * 연산을 하면 숫자값으로 자동 형변환된다. if(isNaN(num)) { alert("입력값이 숫자가 아닙니다."); } else { alert(num*num); } prompt(message[, value]) : 입력창을 제공하여 사용자로부터 값을 입력받아 문자값으로 반환하는 함수 is.. [JavaScript] 연산자 / 형변환(자동 형변환, 강제 형변환) 자바스크립트 연산자 연산자 우선 순위에 의한 분류 최우선 연산자 : (), [], {}, . 단항 연산자 : +, -, ++, --, !, new, typeof new : 객체 생성하기 위한 연산자 typeof : 변수의 자료형을 알아내기 위해 사용하는 연산자 산술 연산자 : *, /, %, +, - 관계 연산자 : >, >=, [JavaScript] JavaScript 명령 소스 제공 / onclick 이벤트 / 함수 호출 모든 웹문서에 공통적으로 제공해야하는 JavaScript 명령을 소스로 제공해 줄 수 있다. 01_hello.js alert("JavaScript Source File에 작성된 자바스크립트 명령"); script 태그를 이용해 JavaScript Source File을 불러와 HTML 문서에 포함시킬 수 있다. →사이트를 구성하는 모든 웹문서에 동일한 기능(함수)을 제공하기 위해 사용한다. button 태그의 type 속성값을 [button]으로 설정하면 버튼만 출력되어, 이벤트가 발생되지 않는다. 버튼을 눌러보세요. html 태그의 onXXX 속성은 이벤트 리스너 속성으로, 이벤트 처리 명령을 설정값으로 설정할 수 있다. 이때, 이벤트 처리 명령을 JavaScript를 통해 만든다. 버튼을 눌러보세요... [JavaScript] 자바스크립트란? / window.alert() / console.log() 자바스크립트(JavaScript) 자바스크립트는 웹페이지에서 발생된 이벤트를 처리하기 위한 기능을 제공하는 스크립트 프로그래밍 언어이다. 여기서 스크립트 프로그래밍 언어란 컴파일을 하지 않아도 동적으로 실행될 수 있는 프로그램 언어를 뜻한다. 자바스크립트는 클라이언트에서 해석되어 실행되며, 자바스크립트를 이용해 동적인 페이지를 만들 수 있다. 자바스크립트 표준 규약은 ES15(ECMAScript15)까지 구현되었으나 일반적으로 ES6(ECMAScript6)을 이용하여 작성한다. 태그로 종료된 곳까지를 스크립트 영역이라고 한다. 자바스크립트의 주석문은 자바와 동일하다. //주석처리 /* 주석처리 */ 자바스크립트는 한 줄에 작성된 코드를 하나의 명령으로 인식하여 처리된다. 따라서 명령 마지막에 ; 생략이 .. [CSS] 애니메이션 관련 스타일 속성 / 반응형 웹디자인 애니메이션 관련 스타일 속성 animation은 animation-* 속성과 애니메이션의 중간상태를 정의할 수 있는 @keyframes로 구성되어 있다. @keyframes : 애니메이션의 이름과 상태에 따른 스타일 변화를 정의하기 위한 시스템 속성 → 상태(백분율 또는 키워드 - from, to)에 따른 CSS 스타일을 정의하여 애니메이션 효과를 제공할 수 있다. → 반드시 시작상태(from)와 종료상태(to)를 포함하여 2개 이상의 상태를 작성해주어야 한다. /* 시작상태 */ from { top: 0; left: 10px; background: url("images/f1.png") no-repeat center; } /* 종료상태 */ to { top: 0; left: 600px; backgroun.. [CSS] 트렌지션 효과(Transition Effect) 트렌지션 효과(Transition Effect) : 시간 경과에 따른 박스모델의 스타일 변경 기능 제공 transition-property : 트렌지션 효과를 제공할 스타일을 속성값으로 설정 transition-duration : 트렌지션 효과의 제공 시간(효과가 나타나는데 걸리는 시간)을 속성값으로 설정 transition-timing-function : 트렌지션 효과의 제공 속도를 속성값으로 설정 → 속성값 ease(기본값) : 느리게 시작하여 점점 빨라졌다 느려지면서 종료 linear : 시작부터 종료까지 일정하게 ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 서서히 ease-out : 빠르게 시작해서 점점 느려짐 ease-in-out : 느리게 시작하여 빨라지다가 느려지면서.. 이전 1 ··· 13 14 15 16 17 18 19 ··· 22 다음 목록 더보기
