개발(차근차근 기초)/Javascript (12) 썸네일형 리스트형 [Javascript] 배열 또는 문자열에 값 여부 확인(indexOf, includes) indexOf 는 찾고자 하는 값이 있을 경우 시작인덱스를, 없을 경우 -1을 리턴 includes 는 찾고자 하는 값이 있을 경우 true, 없을 경우 false를 리턴 let a = "김치만" let b = [1,2,3,4,5] a.indexOf("치만") => 1 // 시작인덱스인 1을 리턴 a.indexOf("치치") => -1 //정확히 일치하지 않으므로 -1을 리턴 b.indexOf("3") => 2 // 시작인덱스인 2를 리턴 b.indexOf("6") => -1 //정확히 일치하지 않으므로 -1을 리턴 a.includes("치만") => true // 정확히 일치하므로 true a.includes("치치") => false // 정확히 일치하지 않으므로 false b.includes("5".. [Javascript] 배열에서 특정 객체(아이템) 찾기 let estimateInquiryList = [ ... ]// 견적서 배열 let estimateInquiry // 견적서배열(estimateInquiryList)에서 찾고자 하는 견적서 아이템 빨간색 : List들을 순환하는 item들 파란색 : 내가 찾고 싶은 것 주황색 : 찾아진 index let i=this.estimateInquiryList.findIndex(function(item){ return item.idx === estimateInquiry.idx // 조건(idx가 같은 것을 찾고 싶어요) }) this.estimateInquiryList[i].processingStatus="Y" [Javascript] 입력 양식 제어하기 Javascript를 통한 css에 접근 3초마다 이미지가 바뀌는 예제 Javascript로 name이 html, css, js인 css태그에 접근하기 - form 객체의 하위 객체에는 css의 name 속성을 통하여 접근할 수 있다.점수 입력 받고 총점, 평균 내는 코드 HTML CSS Javascript 총점 평균 둘리 [Javascript] 클래스 (Class) 클래스 ES6 버전부터 신규로 추가된 객체 설계 문법. Prototype이 발전된 형태로 보면 된다. 객체 (Object) 사전적 의미 : 어떠한 물건이나 대상 프로그래밍에서의 의미 : 프로그램에서 표현하고자 하는 기능을 묶기 위한 단위 객체를 구성하는 단위 객체를 이루는 것은 데이터와 기능이다. 데이터는 변수로 표현된다. 객체 안에 포함된 변수를 멤버변수 혹은 프로퍼티라 한다. 기능은 메서드(=함수)로 표현된다. 클래스 (Class) 객체의 설계도 역할을 하는 프로그램 소스 공장에서 하나의 설계도를 사용하여 여러 개의 제품을 생산할 수 있는 것처럼 하나의 클래스를 통해 동일한 구조를 갖는 객체를 여러 개 생성할 수 있다. 1) 클래스의 가장 기본적인 코드 형식 클래스 이름은 명사들의 조합으로 이루어지며.. [Javascript] Prototype Prototype // 화살표 함수 안됨 객체지향 언어는 클래스 기반과 프로토타입 기반으로 구분되는데 자바스크립트는 이 중에서 프로토타입 기반에 속한다. 프로토타입 기반이란 객체의 원형이 되는 형태를 먼저 정의해 놓고 추가적인 기능을 점차 확장하면서 기능을 구성하는 형식이다. //상속이 필요 없다. 상속의 원 기능이 클래스의 확장이기 때문에... #01. 생성자 함수 함수를 new 연산자로 호출할 경우 객체를 만들기 위한 함수로 분류된다. 이러한 함수를 생성자(Constructor)라고 한다. 생성자에서 this 예약어를 통해 정의한 변수는 객체의 멤버변수 역할을 한다. 단, 화살표 함수 형식은 생성자로 사용할 수 없다. 1) 생성자 정의하기 function User(){ this._id = null; .. [Javascript] 자바스크립트 함수와 축약 함수 자주 사용되는 구문을 그룹화 한 형태. f(x) = x+1; 키워드: f 조건값: x 수식: x+1 f(5) -> 6 f(10) -> 11즉, f라는 키워드로 x+1이라는 수식을 재사용할 수 있다. 프로그래밍에서의 함수는 자주 사용되는 구문을 재사용을 목적으로 그룹화 한 형태로 이해할 수 있다. #01. 자바스크립트 함수 정의 1) 함수 정의하기 function 키워드를 명시하고 함수의 이름을 지정한 후 괄호 ()를 명시한다. 그 뒤에 구문을 그룹화 하기 위한 블록 {}을 갖는다. function sayHello(){ console.log("Hello javascript."); console.log("안녕하세요 자바스크립트."); } 2) 함수 호출하기 함수는 정의하는 것 만으로는 아무런 동작을 하.. [Javascript, jQuery] "$" 객체의 사용 1. "$" 객체의 사용 ("$"는 객체다!) jQuery의 모든 기능은 $라는 객체의 하위로 포함되어 있다. "$"는 jQuery의 모든 기능을 담고 있는 객체이자 함수이다. 1. jQuery함수를 사용하여 크로스 브라우징을 지원하는 load 이벤트 처리가 한번에 가능하다. function a(){ ... $를 사용하여 jQeury의 기능 호출 ... } jquery(a);2. 아래에 jQuery(foo)를 해줬고, foo함수의 파라메터로 $를 해줬기 때문에 함수내에서 $를 통한 jQuery 기능 사용이 가능하다는 것을 확인할 수 있는 예제이다. function foo($){ $를 이용하여 jQuery 기능 사용 가능 var h1 = $("#hello") //document.getElementById를.. [Javascript, Sublime Text] javascript를 위한 Build System 설정하기 Tools > Build System > New Build System\을 선택하여 새로운 실행 규칙 파일을 생성하고 아래와 같이 작성한다. { "shell\_cmd": "node ${file}" } 작성한 파일을 다음의 경로로 저장한다. 일반적으로 Sublime 상에서 `Ctrl + S`를 누르면 제시되는 기본 경로에 바로 저장하면 된다. C:\users\{사용자계정명}\appdata\roaming\sublime text3\ package\user\mynode.sublime-build 파일을 저장한 후 Sublime Text 3에서 Tools > Build System > myNode를 선택하고 js 파일을 열어 둔 상태에서 Ctrl + B를 눌러 실행 결과를 확인한다. 실행 완료 후 결과 창은 Esc.. 이전 1 2 다음