Language/JavaScript
-
[JavaScript] eventLanguage/JavaScript 2024. 5. 3. 10:06
이벤트: 사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건을 뜻함ex) 웹페이지 사용자가 버튼을 클릭했다 -> 클릭이벤트 웹페이지 사용자가 입력 폼의 내용을 제출했다 -> 제출이벤트 각각의 이벤트들은 이벤트핸들러(handler)를 가질 수 있다.이벤트 핸들러: 이벤트가 발생되면 실행될 코드블록을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라고 한다.=> event hadler register : 이벤트가 발생하면, 이 함수를 호출해라타겟.on이벤트명 = 이벤트 핸들러함수// hadleClick함수를 대입한다.(이벤트핸들러 등록)button.onclick = hadleClick// hadleClick 호출 후 반환값을..
-
[JavaScript] 함수와 매개변수Language/JavaScript 2024. 5. 3. 09:35
매개변수(parameter): 재료를 전달받기 위해 만들어 둔 변수인자(argument): 실제 함수 호출 시 전달하는 데이터function sayVegetable (vegetable) { //vegetable => "매개변수" console.log("함수에 전달된 채소는?") console.log(vegetable) }sayVegetable("당근") // 당근 => "인자"sayVegetable("오이") // 오이 => "인자" 매개변수를 사용해 return값 받기function WhatIsBigger(n1,n2) { if(n1 > n2){ return n1 }else{ return n2 }}console.log(WhatIsBigger(3,5))console.log(Wha..
-
[JavaScript] 함수와 returnLanguage/JavaScript 2024. 5. 2. 16:40
함수가 데이터를 반환하면, 함수 호출문이 데이터로 대체된다. return의 두가지 기능- 함수로부터 데이터를 반환한다.- 함수를 끝낸다//return문이 없는 경우function noReturn(){ console.log("반환하지 않음")}const result = noReturn()console.log(result)//return문이 있는 경우function yesReturn(){ console.log("반환한다") return 10;}const result2 = yesReturn()console.log(result2)
-
[JavaScript] 함수Language/JavaScript 2024. 5. 2. 16:00
변수: 변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터 대신 사용.함수: 호출될 수 있는 코드조각 함수를 선언하면 함수의 이름을 코드조각 대신 사용//변수let work = console.log("!")console.log(work) // undefine --> 변수에 담을 수 없음.let work1 = 1console.log(work1) // 1출력//함수function works(){ console.log('hi') }works() //함수호출-> hi출력함수선언식: 처음부터 이름이 있는 함수를 만듬function 함수명() { //함수의 기능을 표현한 구문}ex)sayHello() // 함수선언식은 호이스팅(Hoisting) 가능function sayHello() { console.lo..
-
[JavaScript] 반복문Language/JavaScript 2024. 5. 2. 10:29
반복문?비슷하거나 동일한 구문을 반복해서 수행할 수 있는 구문(반복구문은 '루프(loop)'라고도 한다) 1. while문키워드 while을 이용해 만든는 구문 while문은 '주어진 조건이 참일 동안에 구문을 반복'하는 반복문while(조건) { //조건이 true인 동안에 반복 수행할 코드}ex)let number = 1// number가 3보다 작은 동안에는 반복해라while(number 2. for문- 초기식,조건식, 반복식으로 반복 횟수를 명시적으로 표현할 수 있다.- for문의 초기식에서 let키워드를 사용해 선언한 변수는 for문의 실행이 끝나면 사용할 수 없다.for(초기식; 조건식; 반복식;) { //조건이 true인 동안에 반복 수행할 코드}ex1)for(let i = 1; i ex2..
-
[JavaScript] 조건문Language/JavaScript 2024. 5. 2. 10:14
조건문이란?조건의 참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문조건?boolean데이터를 반환하거나 boolean데이터로 해석할 수 있는 표현식 1. if문if(조건) { //조건이 true일 때 실행할 코드}ex)let number = 3if(number === 3) { console.log("It is true")} 2. if-else문if(조건) { //조건이 true일 때 실행할 코드} else { //조건이 false일 때 실행할 코드}ex)let number = 5if(number == 3) { console.log("It is true")}else{ console.log("It is false")}
-
[JavaScript] DOMLanguage/JavaScript 2024. 4. 30. 11:49
웹브라우저는 HTML;문서를 해석하고, 화면을 통해 해석된 결과를 보여준다.해석한 HTML코드를 화면을 통해 보여주는 과정을 '렌더링' 이라고 한다. 렌더링 과정1. 문서파싱 : 브라우저는 HTML코드를 해석 2. DOM 트리구축 : 요소들을 트리형태로 구조화해 표현하는 문서(객체)를 생성한다 (=DOM) 3. 브라우저는 DOM을 통해 화면에 웹콘텐츠들을 렌더링한다. DOM 사용이유HTML코드는 정적인 텍스트일 뿐이기 때문에 사용자와 동적인 상호작용이 어렵고,DOM이 실질적으로 동적인 상호작용을 한다. (DOM동작을 위해선 자바스크립트 객체사용)--> DOM은 자바스크립트를 사용해서 웹화면의 콘텐츠를 추가,수정,삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스 제공