본문 바로가기

Front-End: Web/JavaScript

(97)
[생활코딩: JavaScript] 2. HTML과 JavaScript의 만남 script 태그 기본적으로 JavaScript는 HTML위에서 동작하는 언어이다. 따라서 HTML언어 위에 다른 언어인 JavaScript를 함께 사용하는지 알아보자. html hello world 1+1 이벤트 button : onClick 이벤트 Console을 이용하여 자바스크립트 파일을 만들지 않고도 자바스크립트를 실행할 수 있다. ex) 개발자 모드 > Elements 에서 esc한번 누르면 아래에 console이 뜬다. 이곳에 자바스크립트로 작성한 코드를 입력하게 되면 현재 웹페이지 정보를 불러와서 자바스크립트를 실행시킬 수 있다. 즉, 이미 만들어진 웹사이트에 필요에 따라 간단한 자바스크립트 코드를 작성하여 문제를 해결할 수 있다.
[생활코딩: JavaScript] 1. Intro html은 정적이다. 하지만 사람들은 동적으로 사용자와 상호작용할 수 있는 웹페이지를 만들고 싶었다. 이런 배경에서 탄생한 것이 JavaScript이다. 목적 웹페이지의 야간모드/주간모드 버튼을 통해 모드를 변경한다. - 사용자가 누르는 버튼으로 인해 웹페이지의 상태가 변화 (상호작용) - 개발자 모드 > Elements의 코드가 변화 ex)
자바스크립트와 웹 애플리케이션 개발 자바스크립트는 클라이언트 사이드에서 웹 애플뢰케이션을 개발하는데 많은 도움을 주는 언어이다. 클라이언트 사이드에서 자바스크립트는 주로 HTML, CSS와 결합하여 Ajax라는 기술을 통해 동적인 웹 페이지를 만드는데 사용된다. HTML과 CSS HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만드는 방법을 제공한다. 또한 웹 페이지 콘텐츠 안의 에 둘러싸인 태그로 구성된다. HTML을 중심으로 자바스크립트 코드와 CSS코드를 불러온다. Ajax Asynchronous JavaScript and XML. 즉, 클라이언트 측에서 비동기 웹 애플리케이션을 개발할 수 있는 웹 개발 기술이다. 이를 사용하면 웹 애플리케이션 ..
클로져(Closure) 자바스크립트사 가진 특징이자 Node.js가 높은 효율성을 가지게 해주는 근간. 유효 범위 체인 함수 단위의 범위(Function Scope). 전역 변수(a)는 함수 안이나 어느 곳에서든지 사용할 수 있지만, 함수 안에서 선언한 변수(b)는 함수 블록 밖에서 사용할 수 없다. 클로져를 이용한 체인 깨기 클로져? 자신의 범위 밖에 있는 변수에도 접근할 수 있는 함수 위 그림에서 함수 N()는 상위에 있는 변수 a와 b를 사용할 수 있지만, 함수 F()는 함수N()에 있는 변수를 참조할 수 없다. 클로져는 이러한 문제를 해결할 수 있다. function f() { var b = "b"; return function() { return b; } } 함수 f()에 선언된 b는 함수 밖에서 사용될 수 없다. 하..
내장형 객체 Built in Object. Object, Number, Array, String, Boolean, Function RegExp : 정규식을 위한 객체 Math : 수학과 관련된 각종 값과 메서드를 내장한 객체 Date : 날짜와 시간에 관련된 메서드를 가진 객체 Error : 자바스크립트에서 발생하는 에러를 처리하기 위한 객체
자바스크립트에서의 객체: Constructor 컨스트럭터 함수 자바스크립트에서 객체를 생성하는 방법 중 하나. function SoccerPlayer() { this.position = "Forward"; } var VanPersie = new SoccerPlayer(); VanPersie.position;//Forward 이의 장점은 새로운 객체를 만들 때 초깃값을 전달하여 생성할 수 있다. function SoccerPlayer(name, position) { this.name = name; this.position = position; this.whatIsYourName = function() { return "My name is " + this.name; }; this.whatIsYourPosition = function() { return ..
객체지향 자바스크립트 자바스크립트는 객체지향(OOP: Object Oriented Programming) 언어이다. (코틀린도 이에 해당) 객체지향이란? 클래스(Class)와 객체(Object/Instance) = 메서드(Method) + 속성(Property) 캡슐화, 집합, 재사용, 상속, 변형 객체(Object/Instance) 어떤 것. 예를 들어 축구선수를 하나의 존재를 객체로 생각해보자. - 속성(Property): 객체의 특성. (ex)이름, 나이, 키, 몸무게, ... - 메서드(Method): 대상의 동작. (ex)드리블, 슛, 패스, 태클, ... var park_ji_sung = { name: "Park Ji Sung",//method: properties age: 31, height: 178, weigh..
자바스크립트의 기초 기본 문법 ;로 문장이 종료되어야 한다. 변수 이름의 시작은 항상 알파벳이나 _여야 한다. 대, 소문자를 구별한다. *예약어는 변수 이름으로 사용될 수 없다. {중괄호}를 이용해 구역을 나눈다. C/C++과 같은 구조의 조건문과 반복문을 가진다. *예약어: break, case, catch, continue, default, delete, do, else, false, finally, for, function, if, in, instanceof, new, null, return, switch, this, throw, true, try, typeof, var, void, while, with 연산자 조건 연산자: (조건)? A:B / 조건이 참일 경우 A, 거짓일 때 b를 수행함 ... 데이터 타입 Str..

반응형