My Melody Kawaii

자바스크립트 32

자바스크립트 문자열 객체

문자열 객체 자바스크립트에서 문자열은 문자들의 집합을 나타내는 데이터 타입입니다. 이러한 문자열 데이터를 다루기 위해 자바스크립트는 String객체를 제공합니다. String객체는 문자열을 생성하고 다양한 문자열 조작 기능을 제공합니다. at() at()메서드는 인덱스를 전달받아 해당 위치의 문자를 반환합니다. 만약 인데스 문자열 길이를 넘어선 경우 undefined를 반환합니다. let str = "hello"; console.log(str.at(1)); //e console.log(str.at(10)); //undefined at(1)은 문장열 hello 에서 인덱스 1의 위치에 있는 문자 e 를 반환합니다. at(10)은 문자열의 길이가 5이므로 해당 인덱스가 유효하지 않기 때문에 undefined..

JAVASCRIPT 2023.04.22

스쳐가는 명언들과 계속 바뀌는 이미지 만들어보기!

자바스크립트-마무리문제 자바스크립트 마무리 문제 중에 명언들이 10초마다 바뀌는데 이미지도 10초동안 함께 바뀔 수 있도로 꾸며 보았습니다! https://younajeong.tistory.com/72 스쳐가는 명언들 속에 내 명언을 찾아보자 자바스크립트 - 마무리문제 10초동안 스쳐가는 명언들을 스크립트를 사용해서 풀어보는 마무리 문제입니다. 마무리문제 먼저 새로운 폴더 안에 js파일과 html파일을 만들어 주었습니다. html파일 younajeong.tistory.com 이번에 역시 저번에 했던 형식과 비슷하게 코딩을 해 줄 예정입니다. HTML&CSS HTML&CSS 저번 형식과 똑같은 형식으로 result안에 img 태그를 추가하고 id에 image를 부여해줍니다. 10초동아 바뀌는 이미지 링크를..

JAVASCRIPT 2023.04.17

로또 번호를 자바스크립트로 만들어보자!

로또 번호 생성하기 로또가 당첨될때 나오는 무작위한 번호들을 자바스크립트를 사용해서 번호들을 추출해보도록 하겠습니다. HTML & CSS 로또 당첨번호 행운이 당신에게 찾아오기를 추첨 HTML&CSS 먼저 HTML에서 contanier를 설정해서 그 안에 제목과 내용 그리고 button을 추가한 다음에 결과 값이 나올 수 있는 result도 만들어 줍니다. 전체적으로 CSS에서는 전체적인 글자 배치와 버튼 배치 폰트와 배경 그리고 글씨색상들을 부여해주었습니다. Javascript javascript 1개의 버튼 결과를 출력할 요소들을 선택자로 button과 #result를 선택하였습니다. 함수를 이용해서 lottoNumber 함수가 실행하도록 하였는데 set자료 구조를 이용해서 생성하게 하였습니다. fo..

JAVASCRIPT 2023.04.16

스쳐가는 명언들 속에 내 명언을 찾아보자

자바스크립트 - 마무리문제 10초동안 스쳐가는 명언들을 스크립트를 사용해서 풀어보는 마무리 문제입니다. 마무리문제 먼저 새로운 폴더 안에 js파일과 html파일을 만들어 주었습니다. html파일에 선택자 Result,Quote,Author을 querySelector로 선택자를 만들어 주었습니다. fetch를 사용해서 js파일을 불러온 후 items라고 지정 후 json데이터를 파싱했습니다. Math()메서드를 사용해서 json데이터에 무작위 인용구를 선택하였습니다. 마지막으로 선택된 인용구와 저자를 textContent로 업데이트 하고 dataresult()를 호출해서 페이지가 로드될 때 무작위 인용구를 선택하도록 하였고 setInterval(dataresult, 10000)를 사용해서 10초마다 새 인..

JAVASCRIPT 2023.04.15

슬라이드 이펙트06 - 버튼과 닷메뉴로 슬라이드를 움직여보기!

슬라이드 이펙트06 -버튼과 닷메뉴를 사용해서 슬라이드를 움직여보기! 이번 슬라이드 이펙트는 버튼과 닷메뉴를 사용해서 슬라이드 왼쪽으로 움직여 볼 수 있도록 하겠습니다. HTML&CSS Javascript sliderEffect06 슬라이드 이펙트 : 좌로 움직이기(버튼, 닷메뉴) 1 2 3 4 5 6 7 HTML& CSS HTML구조에서 slider__btn 과 slider__dot을 추가해 줍니다. slider__btn안에 prev이전이미지와 next다음이미지로 넘어갈 수 있도록 구조를 만들어 줍니다. CSS로 넘어와서 btn과 dot에 필요한 속성들을 부여해서 btn은 양 사이드 가운데로 올 수 있으며 클릭할 때 바뀔 수 있도록 설정해 줍니다. dot은 동그랗게 만들어 준 후 가운데로 올 수 있도록..

슬라이드 이펙트05 - 아래에서 연속적으로 움직이는 효과!

슬라이드 이펙트 05 - 아래에서 위로 연속적으로 움직이는 효과! 저번 시간에 이어서 슬라이드가 아래에서 위로 연속적으로 움직일 수 있는 효과를 만들어 보았습니다! 저번에 만들었던 3번 효과를 참고하여서 함께 만들어 보도록 하겠습니다! https://younajeong.tistory.com/67 슬라이드 이펙트 03 - 아래에서 위로 올라오는 슬라이드 효과! 슬라이드 이펙트 03 아래에서 위로 올라오는 슬라이드 효과! 1,2번을 토대로 이번에는 아래에서 위로 올라는 슬라이드 효과를 주겠습니다! 이펙트 03번 같은 경우에는 02번의 HTML그대로 가져와서 C younajeong.tistory.com HTML& CSS Javascript sliderEffect05 슬라이드 이펙트 : 아래에서 위로 움직이기(..

슬라이드이펙트 04 -연속적으로 왼쪽으로 움직이게 만들기!

슬라이드 이펙트 04 "왼쪽으로 연속적으로 움직이는 이미지 슬라이드 만들기" 슬라이드 이펙트 04번은 왼쪽으로 연속적으로 움지이는 이미지 슬라이드를 만들어 보았습니다. 저번에 만들었던 왼쪽으로 움직이는 슬라이드 이펙트 02번을 참고해서 이번에는 연속적으로 움직일 수 있는 슬라이드 이펙트를 사용해 보았습니다. 슬라이드 이펙트 02 참고하기 https://younajeong.tistory.com/66 슬라이드 이펙트02 - 좌에서 우로 넘어가는 이미지 슬라이드효과! 슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과 슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다! 슬라이 younajeong.tistory.com HTML & CSS ..

슬라이드 이펙트 03 - 아래에서 위로 올라오는 슬라이드 효과!

슬라이드 이펙트 03 아래에서 위로 올라오는 슬라이드 효과! 1,2번을 토대로 이번에는 아래에서 위로 올라는 슬라이드 효과를 주겠습니다! 이펙트 03번 같은 경우에는 02번의 HTML그대로 가져와서 CSS부분과 JAVASCRIT 부분을 조금씩 수정해주면 완성이 됩니다! 슬라이드 이펙트 02 보러가기 https://younajeong.tistory.com/66 슬라이드 이펙트02 - 좌에서 우로 넘어가는 이미지 슬라이드효과! 슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과 슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다! 슬라이 younajeong.tistory.com HTML & CSS Javascript sliderEffec..

슬라이드 이펙트02 - 좌에서 우로 넘어가는 이미지 슬라이드효과!

슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과 슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다! 슬라이드 이펙트01 참고하기 https://younajeong.tistory.com/65 슬라이드 이펙트 01 - 이미지를 하나씩 보이는 트렌지션 효과를 줬어요! 슬라이드 이펙트 01 : 트렌지션 효과 이미지 여러장을 하나씩 보일 수 있는 트렌지션 효과를 만들어 봤습니다! reset /* reset */ @import url('https://webfontworld.github.io/hallym/Hallym.css'); @import url('https://webfon younajeong.tistory.com HTML & CSS J..

슬라이드 이펙트 01 - 이미지를 하나씩 보이는 트렌지션 효과를 줬어요!

슬라이드 이펙트 01 : 트렌지션 효과 이미지 여러장을 하나씩 보일 수 있는 트렌지션 효과를 만들어 봤습니다! reset /* reset */ @import url('https://webfontworld.github.io/hallym/Hallym.css'); @import url('https://webfontworld.github.io/suncheon/Suncheon.css'); @import url('https://webfontworld.github.io/Poppins/Poppins.css'); @import url('https://webfontworld.github.io/kt/YUniverse.css'); @import url('https://webfontworld.github.io/TheJamsil..

CBT 보충 설명!

7번째 유형 보충설명 저번시간과 더불어 부족했던 부분들을 보충해서 퀴즈유형을 만들어 보았습니다. HTML 제출하기 59분 10초 수험자 : ooo 전체 문제수 : 23문항 남은 문제수 : 59문항 기능사 시험 기출문제 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 2008년 2회 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기능사 2009년 5회 정보처리..

JAVASCRIPT 2023.04.05

퀴즈게임 7번째 CBT 유형으로 만들어보자!

퀴즈게임 CBT유형 여러개의 문제를 CBT유형으로 만들어 보았습니다. HTML Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 수험자 : 정유나 전체 문제수 : 60문항 남은 문제수 : 59문항 제출하기 59분 10초 HTML 지난 퀴즈들과 비슷하게 quiz__wrap을 만든 후 headr와 omr을 만들어 줍니다. header안에 cbt_cots와 quiz를 만들어 줍니다. 옆에 aside에 cbt__info 안에 title과 score을 만들어 줍니다. omr을 옆에 두기 위해 cbt_omr도 만들어 준 후 sumbit와 time을 만들어 줍니다. 주석으로 표시해준 부분은 스크립트를 사용해서 출력시켜주기 위해 주석으로 표시해 주었습니다. 자바스크립트 ..

JAVASCRIPT 2023.04.03

자바스크립트 문제 풀이

자바스크립트 문제 풀이 자바스크립트를 사용해서 사진에서 마우스를 움직이면 사진이 바뀌는 효과와 버튼을 누르면 메뉴가 뜨는 문제를 풀이했습니다. 마무리문제 1 풀이 div 에 class로 wrap을 주고 난 후에 이미지 파일을 올려 두었습니다. const로 변수를 선언해서 선택자로 .wrap img를 선택했습니다. addEventListener를 사용해서 mouseover 효과를 준 후 선택자에서 mouse를 선택해서 img안에 src를 불러오고 이미지를 넣어두었습니다. mouseout도 mouseover와 동일하게 코드 진행을 하였습니다. 마무리문제 2 🦋 Javascript Typerscript Node.js 풀이 body에 button과 nav안에 ul,li태그를 사용해서 버튼과 메뉴안에 들어갈 리스..

자바스크립트 문자열 객체는 어떻게 사용할까!?

자바스크립트 문자열 자바스크립트에서는 간단한 텍스트를 처리하기 위해 문자열을 유형을 자주 사용합니다. 원시 유형과 객체 단순히 값만 가지고 있을 경우를 '원시 유형'이라고 하고 프로퍼티와 메서드를 가지고 있을 때는 '객체'라고 했습니다. 자바스크립트 에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 예를들어 문자열을 만들 때 간단한 변수에 length라는 프로퍼티를 사용하게 되면 str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다. let str = "hello" str.length //5 또한 Number와 boolena, string 유형은 별도로 프로토차입 객체가 만들어져 있습니다. 즉 숫자는 Number, 문자열은 String 객체..

JAVASCRIPT 2023.03.29

슬라이드 형식으로 넘어가는 퀴즈 효과를 만들어 봤습니다!

퀴즈 이펙트 06 이번 퀴즈 이펙트 효과에서는 저번 퀴즈 효과에서 객관식으로 모든 문제들이 나타나서 하나하나 클릭해서 정답을 확인했다면 이번에는 슬라이드 형식으로 답을 선택하고 다음으로 넘겨서 한 칸 안에서 여러 문제를 넘겨서 풀고 나면 점수와 맞힌 갯수를 확인 할 수 있는 유형입니다. HTML Quiz 객관식 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음문제 ??점 ?개 jeongyouna_@naver.com HTML구조 저번에 퀴즈 이펙트 5에서 사용한 코드를 javascript부분을 비워두고 그대로 HTML을 가져옵니다. 구조를 살펴보면 quiz__main안에 quiz__wrap을 두고 class= quiz를 만들어 준 후 header안에 title을..

자바스크립트 재시험 문제풀이

자바스크립트 재시험 문제풀이 01. 다음의 결과 값을 작성하시오. { const str = "javascript refercence"; str.indexOf("javascript"); str.indexOf("javascripts"); str.indexOf("j"); str.indexOf("J"); str.indexOf("a"); str.indexOf("ja"); str.indexOf("jv"); str.indexOf("refercence"); str.indexOf("r"); str.indexOf("re"); str.indexOf("javascript", 0); str.indexOf("javascript", 1); str.indexOf("refercence", 0); str.indexOf("refercen..

여러 문제를 풀 수 있는 퀴즈를 만들어 봤습니다.

퀴즈 이펙트 05 저번 문제에 이어서 여러 문제를 풀어볼 수 있는 퀴즈 이펙트 효과를 만들어 봤습니다. header의 내용들을 전체적으로 주석 처리를 해 준 후 자바스크립트를 사용해서 정답을 풀 수 있도록 하겠습니다. HTML Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 jeongyouna_@naver.com HTML 저번 퀴즈 4번에서 했던 코드를 그대로 가져옵니다. 하지만 스크립트로 내용을 출력해주기 위해서 div class__quiz부분을 주석 표시 해줍니다. CSS-reset @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/..

자바스크립트 오답노트

오답노트 자바스크립트 20문제 중 틀린문제를 오답노트로 정리했습니다. 01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } 오답노트 indexOf는 포함되어 있으면 1 포함이 되어있지 않으면 -1로 표시 됩니다. lastInexOf는 뒤에서 부터 인덱스 값을 불러 오는데 a가 인덱스 위치 3번째에 있으므로 3이라는 숫자를 불러옵니다. includes는 포함하고 있으면 ture 포함되어 있지 않으면..

검색하면 내가 찾는게 나타난다!!

검색 이펙트 검색 이펙트는 검색 결과가 노출되는 것 자체가 인지적 영향을 미치는 현상입니다. 검색 이펙트는 검색 엔진 결과 페이지에서 웹사이트가 노출되는 위치,타이틀,설명 등의 정보에 영향을 받습니다. 검색 이펙트는 사용자들이 검색을 할 때, 검색 결과 페이지에서 웹사이트가 노출되는 위치에 따라 사용자의 인지적인 영향을 받기 때문에 중요합니다. 상위 검색 결과에 노출될수록, 해당 웹사이트를 방문하는 사용자 수가 늘어나고,검색어에 대한 신뢰도가 높아집니다. HTML 자바스크립트 💛 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계..

보이지 않는 이미지를 마우스를 이용해서 보여주기!

마우스 이펙트 03 저번 효과를 이어서 이번에는 이미지가 보이지 않지만 마우스 이펙트 효과를 통해 이미지가 보여지는 조명 효과를 입혀봤습니다! 이번 마우스 이펙트 세번째 효과에서 사용될 속성들 입니다. 데이터 저장하기 : 배열, 객체 데이터 실행하기 : 함수, 화살표 함수 이벤트 객체 : mousemove 요소 객체 : querySelector,clientWidth, clientHeight, offsetWidth, offsetHeight, getBoundingClientRect() CSS : backgruound-attachment: fixed HTML Javascript mouseEffect03 마우스 이펙트 -마우스 따라다니기 1 2 3 4 5 6 Life is a journey to be exper..

마우스가 더욱 부드럽게 움직일 수 있게 만들어보자!

마우스 이펙트 효과 두번째 이번 시간에는 GSAP를 사용해서 마우스가 부드럽게 따라다니는 효과를 주도록 하겠습니다. 첫번째 효과에서 마우스의 움직임이 부드럽지 못했는데 이번 효과 에서는 더욱 부드럽게 사용하기 위해서 라이브러리 효과 GSAP를 사용해보도록 하겠습니다. 두번째 효과에서 사용해보자! 데이터저장하기 : 변수 데이터 실행하기 : 함수, 화살표 함수 데이터 불러오기 : for(), forEach() 이벤트 객체 : mousemove,mouseenter,mouseleave 요소 객체 : querySelector 라이브러리 : GSAP: to() HTML Javascript mouseEffect02 마우스 이펙트 -마우스 따라다니기 1 2 3 4 5 6 love what you have. 가진것을 사..

마우스를 글씨에 가져가면 나타나는 효과 만들어보기!

마우스 이펙트 01 오늘은 마우스에 이펙트 효과를 입혀봤습니다. 마우스 이펙트 효과(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다. 예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다. 마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다. HTML코드 Javascript mouseEffect01 마우스 이펙트 -마우..

자바스크립트 오답노트

오답 노트 자바스크립트 20문제 중 틀린 문제 오답노트를 작성했습니다. 01. 결과값을 작성하세요 { if( null ){ console.log("true"); } else { console.log("false"); } } 정답 노트 false (0,null,undefined,false)는 flase의 값이 나옵니다. 02. 결과값을 작성하세요 { let num = 0; while( num 6 ){ break; } console.log(num); } } 오답 노트 while은 반복문 입니다. 반복문이 ture일 때 실행이 됩니다. num ++ 로 num이 1이 되면 조건문에 만족하지 않아서 1이 출력되고 다시 반복문으로 돌아가서 num++로 num의 값이 2가 되는데 조건문에 만족하는 조건이 아니므로 그..

퀴즈 사이트 만들기 (2)

퀴즈 이펙트 저번 시간에 강아지가 등장해서 정답을 클릭하면 알려주는 사이트를 만들어 보았습니다. 오늘은 정답을 직접 입력해서 정답이면 강아지가 웃는표정을 오답이면 실망하는 표정을 나타내보도록 하겠습니다. HTML 코드 Quiz 주관식 확인하기 유형 1 2 . 정답확인하기 설명 jeongyouna_@naver.com HTML 들여다보기 저번 시간에 썼던 HTML코드를 복사 붙이기로 가져왔습니다. Script를 사용해서 내용을 출력해 줍니다. 문제 정보에 대해 작성해 준 후 선택자를 묶어준 태그들을 저번시간과 같이 queryselector를 주고 괄호로 . 을 써서 class명을 써줍니다. 저번 시간에는 innerText를 썼지만 오늘은 textContent를 사용해 줍니다. textContent는 HTMl..

데이터 불러오는 방법을 알아보자!

데이터 불러오는 방법 저번 시간에 데이터를 불러올 수 있는 방법으로 for문과 forEach문 그리고 for in, for of, map()을 살펴 보았습니다. 오늘은 forEach문과 map()문을 생략하여 사용해서 짧게 만드는 방법과 또 다른 배열 실행문 그리고 객체 실행문에 대해서 더 알아보도록 하겠습니다! forEach문 생략 let arr = [10,20,30,40,50,60,70,80,90]; arr.forEach(function(element){ document.write(element); }); //forEach (화살표 함수) arr.forEach((element)=>{ document.write(element); }); forEach (변수 el 괄호 생략) arr.forEach(el=..

JAVASCRIPT 2023.03.06

데이터 저장하기 좀 더 파헤쳐보자!

변수와 상수 변수 변수(variable)란 데이터를 저장하기 위해 프로그램에 의해 이름을 할당받은 메모리 공간을 의미합니다. 즉 변수란 어떠한 값을 저장할 수 있는 저장하기 위한 이름을 가진 공간을 의미하며 변수는 변수라는 이름 그대로 가지고 있는 값에서 다른 값으로 덮어 씌워지며 변할 수 있으며 연산을 하여 값들이 추가될 수도 있습니다. 변수의 종류의 데이터 타입에는 자연수, 실수, 문자 등 각기 다른 종류의 값들 저장할 수 있는 변수의 종류들이 있으며 특수문자까지 저장할 수 있습니다. { var x = 100; var y = 200; var z = "javascript"; console.log(x); console.log(y); console.log(z); } { let x = 100; let y =..

JAVASCRIPT 2023.03.04

함수를 이용해서 함께 문제를 풀어봐요!

문제 01. 숫자를 함수로 넘겨주고, 숫자에서 양수,음수,0 판단하기 사용자가 프롬포트 창에 숫자를 입렸했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지,음수인지, 또는 0인지 판단해서 알림창에 보여주는 프로그램을 작성하는 문제입니다. 숫자를 받아서 양수,음수,0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parselnt()함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. 프롬포트 창에 입력한 내용이 숫자가 아니면 parselnt() 함수는 NaN로 변환합니다. 반환 값이 숫자일 경우에만 함수를 실행 합니다. function isPositive(n) { if (n > 0) { alert(`${n}은 양수입니다.`); //매개 변수 함수를 이용해서 if문을 실행함 } el..

자바스크립트, 제어문은 무엇으로 이루어져 있을까?

제어문 제어문이란 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 제어하거나 반복시키는 문장을 말합니다. 제어문은 크게 조건문,반복문,중지,건너뛰기의 분류로 나눌 수 있습니다. 저번에 살펴 보았던 제어문과 더불어 새롭게 추가된 제어문에 대해서 함께 알아보도록 해요! 분류 제어문 조건문 if, swich 반복문 while, do while, for 중지,건너뛰기 break,continue 01. 조건문 if문 가장 기본적인 사용하는 조건문으로 주어진 조건이 참일 경우에만 코드 블록이 실행할 수 있습니다. if(조건식){ document.write("실행되었습니다.(ture)"); //조건식을 쓴 후 실행문을 써줘야 합니다. } if문 생략 기본 if 문을 생략해서 쓸 수 있습니다. //기본 i..

JAVASCRIPT 2023.02.28

함수의 종류는 무엇이 있을까요?

함수란? 자바스크립트 프로그램은 단순히 하나의 동작이 아닌 여러가지 동작이 연결되어 실행을 합니다. 동작해야 할 목적대로 여러 개의 명령을 묶는 것을 '함수'라고 합니다. 소스를 함수로 분리해 놓으면 필요할 때마다 원하는 기능만 따로 실행 할 수 있고, 같은 기능이 필요한 다른곳에서 다시 사용 할 수 있습니다. 그러므로 복잡하게 처리할 기능이 많다면 기능별로 나누기 좋은 아주 효과적인 방법입니다. 처음에는 어색할 수 있는 단어겠지만 잘 외워 두신다면 자바스크립트를 할 때 유용하게 사용하실 수 있습니다! 그러면 함수의 종류를 살펴 보도록 하겠습니다. 01. 선언적 함수 function func (){ //function이라는 예약어를 사용하고 함수 이름을 적고 소괄호와 중괄호를 적습니다. document...

JAVASCRIPT 2023.02.27