728x90 반응형 전체 글136 [javascript]함수(function( )) 함수 (기능적인 얘들, 동사) 프로그램으로 작성할 때 반복적으로 수행하는 일을 함수로 만든다. 서브 프로그램 프로그램안에서 각각의 기능을 수행함 input을 받아서 잘 처리한 다음 output을 리턴해줌 변수에 담을 수 도 있고 함수를 리턴할 수도 있다 function은 object이다. 예시) 기능(딸기와 빵을 빵기계에 넣으면 딸기 빵).... ▶함수 구성요소 1. 함수 이름 2. 괄호 안 쉼표(,)로 구분되는 매개변수(parameter) 3. 중괄호{}로 둘러싸인 실행 ▶문법 ↓(밀가루가 들어가는 투입구(input))↓ function 함수 이름(매개변수 1, 매개변수 2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문; return(output) a(딸기) + b(빵); } !!!함수에는 .. 2022. 12. 4. [javascript]반복문2(for, for-in, for-of, .forEach) 1. for for문은 실생활에서 제한횟수가 있는 곳에 사용됨 for(초기값; 조건; 증감) { 반복할 코드 } 예시) for (let i = 0; i < 10; i++) { console.log(i) // 0 ~ 9 까지 콘솔에 출력됨 } 2. for-in 문 객체에 사용할 수 있음 객체의 key값과 value값을 반환하는데 유용함 for(key in 객체) { 객체의 프로퍼티의 갯수만큼 반복됨 } ▶ 프로퍼티는 객체의 key - value 임 예시) let object1 = { name: "룰루", age: 27, job: student } for(let a in object1) { console.log(a) } name age job //key값 출력됨 3. for- of 문 컬렉션 전용임 모든 객.. 2022. 12. 4. [javascript]반복문1 (while, do-while) 1. while 사용되는 예시: 제한횟수가 없음 false가 나올때 까지 반복 while(true) { 실행 } 예시) let i = 0 // i 변수 선언 및 0값 할당 while(i = 11) { // 조건 : i 값이 11과 같거나 클 경우 break; // 멈춤 } } 주의!!! while문에 증감연산자를 사용하지 않을 경우 무한 반복함 2. do while do { 실행문 } while(표현식) 예시) let x = 3 do { console.log("먼저 실행됩니다"); //먼저 콘솔에 출력 x++; // x값 +1증가 } while (x >.. 2022. 12. 4. [javascript]조건문(if, switch) 1. if 조건문 if(표현식) { 표현식이 true 면 실행 } 예시) let x = 3; if(x > 0) { //조건: x가 0보다 크면!!! console.log("true") //실행: 콘솔에 true를 출력하라 } true //x > 0이라는 조건이 맞기때문에 true가 출력됨 2. else 문 if (표현식) { 표현식이 true 면 실행 } else { 표현식이 false면 실행 } 예시) let x = 3; if(x < 0) { //조건: x가 0보다 작으면!!! console.log("true") //실행: 콘솔에 true를 출력하라 } else { //위 조건이 맞지 않다면!!! console.log("false") //실행: 콘솔에 false를 출력하라 } false //if문에서 .. 2022. 12. 4. [javascript]연산자 1.산술 연산자 + , - , * , / , % , ** 2.증감, 감소연산자 ++(변수값을 1씩 증가 시킴) --(변수값을 1씩 감소 시킴) ++number 전위증감연산자(전위형) let x = 0; let y = ++x // x 전위형을 y 로 넘겨줬을 때 console.log(x , y); //x = 1, y = 1 number++후위증감연산자(후위형) let x = 0; let y = x++ // x 후위형을 y 로 넘겨줬을 때 console.log(x , y); //x = 1, y = 0 3. 복합할당(대입)연산자 x= x + 1 => x += 1 //덧셈 할당 x= x - 1 => x -= 1 //뺄셈 할당 x= x * 1 => x *= 1 //곱셈 할당 x= x / 1 => x /= 1 //.. 2022. 12. 4. [javascript]형변환 1. 암시적 형변환 문자열로된 숫자 / 숫자 했을경우 자동으로 숫자형으로 변환됨(+는 제외한 나머지 연산들은 가능) ex) "6" / 2 = 2(숫자형으로 값이 나옴) "6" + 3 = '63' //문자열로 더해짐 "6" - 3 = 3 // 숫자형 자동변환 "6" * 3 = 18 // 숫자형 자동변환 "6" / 3 = 2 // 숫자형 자동변환 2. 형변환 + 연산자 1) number 타입으로 변환하기 ∵ number() let x = "3"; Number(x); 3 // 숫자형으로 변환됨 ∵ parselnt() let x = "112s"; let i = "s112"; let z = 3.1415; parseInt(x); 112 // 숫자형으로 값이 나옴 parseInt(i); NaN //NaN으로 값이 나.. 2022. 12. 4. [javascript]데이터 타입 기본형(primitive) 타입 1. number(숫자형) 정수 및 부동소수점 숫자를 나타냄 범위는 -2/53-1 ~ 2/53-1 타입 결과값을 확인하기위해 콘솔창에 출려해봄!!!! console.log(typeof(3)) //콘솔창에 타입 확인해봄 "number" 2. biglnt let number1= 2132143254353453453n; n을 붙이면 bigInt 로 변함 타입 결과값을 확인하기위해 콘솔창에 출려해봄!!!! console.log(typeof(2132143254353453453n)) 3. string(문자열) 1) let str = "a" 큰따옴표 2) let str = 'a' 작은따옴 →자바스크립트에는 문자열을 표현할 때 큰따옴표 작은따옴표 상관없이 사용해도됨 타입 결과값을 확인하기.. 2022. 12. 4. [javascript]변수와 상수 엄ㅁㅁㅁㅁㅁ청 자주봄 거의 가족!!! 변수: 데이터를 담는 값(변하는 값) 상수: 변하지 않는 값을 가진 변수 (변하지 않음) ·변수 키워드 var(요즘에는 잘 사용 안한다함) let(자주 사용함) ·상수 키워드 const(자주 사용함) 변수 선언!! 1. var var a = "Hello World" function(함수) 단위의 scope(변수의 유효범위: 해당 변수가 접근할 수 있는 변수, 객체, 함수) 같은 변수명 여러번 쓸 수 있지만 다양한 사람들과 공유하다보면 헷갈려서 오류발생함 (요즘에는 자주 사용 안함) 호이스팅: 제일 위로 끌어올림(코드내에서)!!!!!! 블록안에 var변수 있을경우 블록 밖에서 호출하면 응답함. 다른변수(let,const) 불가능 위에서 호출하고 바로아래 var코드써서 .. 2022. 12. 4. [javascript]화면에 나타내기(호출/출력) 자바스크립트 화면에 나타내는방법(호출/출력) 1. window.alert(), alert() 경고창으로 나타냄 alert("경고창입니다"); See the Pen Untitled by namminimi (@namminimi) on CodePen. 2. document.write() 사이트에 나타냄 document.write("안녕") See the Pen Untitled by namminimi (@namminimi) on CodePen. 3. console.log() 사이트 콘솔창에 나타냄 -- (자신이 작성한 코드 확인하기 위해 자주 사용) console창 띄우는법 : 1)화면 우클릭 해서 검사 > console클릭 / 2) F12/ 3) ...세로정렬 클릭> 도구 더보기> 개발자 도구(크롬) cons.. 2022. 12. 4. [javascript]HTML 내용, 속성, 스타일 변경하기 1. html의 내용 변경 .innerHTML = "" 예를 들어 html로 div안에 홍길동이라는 이름을 화면에 출력되있음 홍길동 홍길동을 이순신으로 바꿔서 출력하고 싶을때는 document.getElementById("id명").innerHTML = "이순신"; document.querySelector("div(태그명)").innerHTML = "이순신"; el.innerHTML => 태그를 포함하여 수정 el.innerTEXT => 글자만 수정 See the Pen Untitled by namminimi (@namminimi) on CodePen. 2. html 속성변경 document.getElementById("id명").src = 'pic.gif'; document.querySelector(".. 2022. 12. 3. [javascript]html컬랙션 과 노드리스트 차이 & 배열과 유사배열의 차이 현재 글은 전 자료에서 이어짐 2022.12.03 - [javascript/DOM] - 자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력 솔직히 자세히는 모르겠다... ㅠㅠ 아직 지식이 별로 없어서... 찾아본 정보들과 배운 자료들로만 정리해봄 HTMLCollection은 복수선택할 수 있는 document.getElementByclassName("class명") - html 컬렉션(유사배열) document.getElementByTagName("tag명") - html컬렉션(유사배열) 에서 확인할 수 있다 HTMLCollection은 유사 배열 형태이긴 한데 제공하는 모든 메서드(함수)는 없음 배열에 사용되는 .forEach나 .map 등등 사용하면 오류 발생함 메서드를 사용할 방.. 2022. 12. 3. [javascript]자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Document 박스1입니다. 박스2입니다. 박스3입니다. 박스4입니다. 박스5입니다. text1 text2 text3 text4 text5 console.log(document.getElementById("box1")); //id명 box1 element(요소) 선택/콘솔 출력 console.log(document.querySelector("#box2")); //id명 box2 element(요소) 선택/콘솔 출력 console.log(document.getElementsByClassName("divbox".. 2022. 12. 3. 이전 1 ··· 8 9 10 11 12 다음 728x90 반응형
