겉바속촉

이번에는 자바스크립트 활용해서 array test를 해보도록 하겠습니다:) 1. 배열테스트 2. 10개의 난수 출력해보기 body사이에다가 다음과 같이 작성해볼게요:) 10개의 난수출력 3. 초기값 주고 컬러별로 출력해보기 초기값 주고 컬러별로 출력 4. 초기값 안주고 기본 초기값 안주고 기본

이번시간은 olul연습해보려고합니다!^^! 우선 css코드 만들어서 바디에들어갈 내용에 대해서 폰트사이즈와 백그라운드컬러 설정해주었구요:) 바디 사이에는 블럭을 넣어줍니다. 이 블럭안에 들어갈 것이 바로 순서 있는 목록(Ordered List)들입니다!! 순서 있는 목록은 ol로, 목록의 내용은 li로 작성해주시면 끝! 다음 보이시는 것과 같이 순서 있는 목록은 1, 2, 3, ···차례대로 증가하는 번호가 붙게 됩니다. 이번에는 1이 아니라 50번부터 주고싶은데요:) 그럴때는 블럭에서 에다가 start값을 지정해주세요! 아니? 나는 거꾸로 주고싶은데? 50 49 48....요렇게!! 그렇다면 start값은 50을 주되 뒷부분에 reversed ="reversed" 요렇게 추가해주세요 이제는 순서 없는 ..

fucntion을 여러개 만들어서 alert창으로 확인해볼게요:) 컴파일 해보시면 다음과 같이 뜹니다:) 사이에 우리가 button타입으로 주었기 때문에 클릭 가능한 것들이쥬? value값에 넣어 준 값들이 버튼에 들어가 있구요!! onclick에 지정해준 함수들이 잘 작동되는 지 하나씩 눌러봅시다! 첫번째 alert 누르면 --> test1 함수가 작동되는 데 123을 넣은 결과가 도출됩니다:) 두번째 alert 누르면 --> test2 함수가 작동되는 데 문자열 str인 HELLO를 넣은 결과가 도출됩니다:) 세번째 confirm 누르면 --> test3 함수가 작동되는 데 이 함수는 confirm창이 뜨도록 되어 있습니다 확인 버튼을 누르면 = 추가됐어요 취소 버튼을 누르면 = 취소했어요 네번째 p..

이번에는 onchange를 연습해보도록 합시다:) 우선 html파일 3개를 만들어주세요 그 다음 이미지를 넣고 select로 이동시켜볼게요 select1 select1페이지입니다 select2 select2페이지입니다 select3 select3페이지입니다 main 블럭 사이에 을 만들어주세요 그리고 를 주실 건데요 ---> onchange 를 적용시켜주시는 겁니다. 선택하세요 페이지1로 이동 페이지2로 이동 페이지3로 이동 컴파일해보시면 다음과 같은 창이 실행이 됩니다. 선택하세요 박스 클릭하시면 다음과 같이 목록이 뜹니다:) 코드에서 작성한 각각의 value값들인 거쥬 페이지1로 이동 누르면 페이지2로 이동 누르면 페이지3로 이동 누르면 각각 잘 작동했다면 성공!^^!

이번 목표는 1. 마우스 이벤트 객체 2. id값 지정한 곳에 출력해내기 먼저 마우스 이벤트에 대해서 만들어볼게요:) 사진 두장을 가지고 왔어요!! 마우스를 올렸을 때, 내렸을 때 사진에 변화가 오도록 코드를 작성해보려고 합니다:) 이따가 id값에 대해서 만들기 위해 버튼도 미리 작성해두었습니다 마우스를 올렸을 때 --> onmouseover 마우스를 내렸을 떄 --> onmouseout 그리고 컴파일 해보시면!! 마우스 안 올렸을 때 마우스 올렸을 때 이제 click me 에 대해서 효과주기 촛불 사진 위에 click me라는 button을 아까 만들어두었죠?? 그걸 클릭하면 안녕하세요가 뜨게 해볼게요 바로 id 지정한 곳에 뜨게 하는 방식입니다:) 버튼 누르면!! 다음과 같이 뜨는 게 보이시쥬?! 이..

이번에는 popup창을 만들어보도록 할게요!! 1. 자바스크립트 소스 파일 생성! 2. function 작성 window. open( url, 이름, 스펙) --->이렇게 해주시면 됩니다:) pop1과 pop2에 대해서 function 만들어주세요 pop1은 갖고있는 이미지가 뜰 수 있도록 pop2는 naver사이트로 이동될 수 있도록 만들고 싶습니다:) 코드와 함께 확인해주세요~ popup.js /** * */ //웹브라우져 새창열때 가장 간단(url, 이름, 스펙) function pop1() { window.open('../image/popup3.jpg','Event','width=430,height=430,scrollbar=yes,status=no'); } function pop2() { wind..

이번에는 재미있게 수강신청 했는지 물어보는 html을 꾸며봅시다:) 다음과 같이 우선 코드를 작성해주세요 질문은 태그를 활용해주시구요 수강신청 하셨나요? 수강신청확인 을 활용해서 이름을 넣어주었습니다 이라고 해주었구요:) 을 활용하시면 다음과 같은 결과가 나옵니다 이제 button을 만들어주세요 예, 아니오 가 써져있는 button입니다:) 수강신청 하셨나요? 수강신청확인 컴파일 해보시면 다음과 같이 나옵니다:) 이제 예 아니오 누르면 무언가 변화가 생기게 해주고싶어요:) 그럼 자바스크립트 활용해주시면 되겠쥬? function 2개를 각각 만들고 onclick에 소환해주세요! 전체 코드블럭은 수강신청 하셨나요? 수강신청확인 예 누르면 아니오 누르면

스크립트 안에다가 sampleConfirm명을 가진 함수를 만들었습니다:) 이 함수는 if문을 활용해줄게요 그래서 좋아요? 라고 물어봤을 때 확인 , 취소를 누른 결과가 alert창으로 뜨게 해줄게요! 다음과 같이 작성해주세요:) body부분을 보시면 button을 하나 만들었죠?? button에 써져 있는 값은 click me!! 라고 주었습니다:) click me 를 누르면 이동하게 해주려고 onclick="" 이라고 넣어줍니다 그리고 스크립트에서 작성해준 함수를 불러오는 거에요:) onclick에다가!!!!!!!!!!!! 완성된 전체 코드블럭 확인 누르면 취소 누르면

우선 함수의 종류에 대해서 알아보도록 할게요:) 1. 파라메타 와 리턴값이 없는함수 function 함수이름() { } 2. 파라메타 만 있고 리턴값이 없는함수 function 함수이름(pa1,pa2){ } 3. 파라메타 와 리턴값이 있는함수 function 함수이름(pa1,pa2){ return 반환값; } 함수명 형태에 따른 분류 1. 가장 기본적인 함수 function hello(){ document.write("자바스크립트 시작~"); } hello(); 2. 리터럴 방식-->함수명=function 형태 hello2= Function(){ document.write("리터럴 방식 함수 만들기"); } hello2(); 3. 이름없는함수...주로 어떤 내용을 외부와 완전히 분리시킬때 (functio..