[Day1] JS 1 - 개요

[Day1] JS 1 [11/18]

[자바스크립트(javascript)]

1. 객체 기반의 웹 프로그래밍 언어 ( OOP )

2. 목적 : 웹 페이지의 사용자의 반응 처리.

사용자의 특정 이벤트나 입력값을 받아서 동적으로 처리할 목적으로

고안된 언어.

3. html5 - 웹 페이지 구조 정의

css3 - 웹 페이지의 스타일 정의

js - 웹 페이지의 동작 처리 정의 + jquery

ㄱ. html 내용 변경 days01.ex01_02.html

- click 하면 h 내용 바뀌게

<body onload="init();" onunload="">
<h3>ex01_02.html</h3>
메시지 입력 : 
<!-- autofocus="autofocus"  자동포커스 -->
 <!-- value="안녕~~~" -->
<input type="text"  id="txtMsg"  name="txtMsg" >
<br>
<button onclick="clickme();">Click Me!</button>
<p id="demo"></p>

<script>
    var txtbox = document.getElementById("txtMsg");
  
    function init(){
    	// alert( "init()...");   초기화..
    	// js 로 포커스  설정
    	// js  focus() 함수 
    	/* 
    	document.getElementById("txtMsg").focus();
    	document.getElementById("txtMsg").value = "Hello World~";
    	 */
    	 
    	 // var txtbox = document.getElementById("txtMsg");
    	 txtbox.focus();
    	 txtbox.value = "Hello World!!!";
    }
    
    // js, jquery 등등 자동 완성...    
    function clickme(){
    	// var msg = document.getElementById("txtMsg").value;
    	var msg = txtbox.value;
    	// console.log( msg );
    	
    	// [DOM] 메서드 
    	// document.getElementById(id);
    	// document.getElementsByClassName(name)
    	// document.getElementsByName(name)
    	var h3list =  document.getElementsByTagName("h3");  // nodelist
    	// h3.value = msg;           <h3>  value 속성 X
    	h3list[0].innerText = msg;
    }
</script>

hover를 js, jquery로 구현

<script>
    /*
    var pdemo = document.querySelector("#demo");
    // <시작태그>innerText</종료태그> 
    //pdemo.innerText = "<span style='color:red;background-color:yellow;'>message</span>";
    pdemo.innerHTML = "<span style='color:red;background-color:yellow;'>message</span>";
    */
</script>
<script>
    /*
    var pdemo = document.querySelector("#demo");
    pdemo.onmouseover = function (){
    	// alert("dddd")
    	
    	// [1] 방법
    	//this.style.color="red";
    	//this.style.fontSize="35px";
    	//this.style.border="1px solid gray";
    	
    	// [2] 방법
    	// this.className = "phoverstyle";
    	// this.classList.add("phoverstyle");   // remove(), replace()
    	
    	// [3] 방법
    	// this.setAttribute("class",  "phoverstyle");    // getAttribute("class")
    }
    */
</script>

<!-- jquery -->
<script>
    // innerText == text() jquery method
    //$("#demo").text("<span style='color:red;background-color:yellow;'>message</span>");
    
    // innerHTML == html()  jquery method
    //$("#demo").html("<span style='color:red;background-color:yellow;'>message</span>");
</script>
<script>
    /*
   $("#demo").mouseover(function() {
	   //$(this).css("color","red");
	   //$(this).css("font-size","35px");
	   //$(this).css("border","1px solid gray");
	   
	   //$(this)
       //        .css("color","red")
       //        .css("font-size","35px")
       //       .css("border","1px solid gray");
	   
	   // $(this).css("" , function (){}) 
	   // jquery.com
   }) ;
   */
   
   // on() jquery method 이벤트 등록  [ + ajax 사용  ]
   $("#demo").on("mouseover", function() {
	   /*
	   $(this).css({
		   "속성명":"속성값",
		   "속성명":"속성값",
		   "속성명":"속성값",
		   "속성명":"속성값",
		   :
	   });
	   */
	   $(this).css({
		   "color":"red",
		   "font-size":"35px",
		   "border":"1px solid gray"
	   });
   });
   
   
</script>

ㄴ. html 속성 변경 ex01_03.html

- Turn on 버튼을 누르면 전구에 불을 켜도록 할 예정

- img 요소의 src 속성을 ../images/pic_bulbon.gif 변경

alt 속성 ="bulbon"

<!-- 문제 2 풀이 -->
	<button>Turn on</button>
	<button disabled="disabled">Turn off</button>

	<br>
	<img src="../images/pic_bulboff.gif" alt="" id="bulb">

	<!-- js -->
	<script>
	    /*
		// Turn on 버튼
		//  document.querySelector("button:first-of-type")
		document.querySelector("button:nth-of-type(1)").onclick = function() {
			// alert( "aaa") 이벤트 확인
			// js 변수 선언 키워드 :  var,  let
			let bulb = document.getElementById("bulb");
			bulb.src = "../images/pic_bulbon.gif";
			// bulb.alt = "bulbon";
			bulb.setAttribute("alt", "bulbon");

			// turn on 버튼 비활성화
			document.querySelector("button:first-of-type").disabled = true;
			// turn off 버튼 활성화
			document.querySelector("button:last-of-type").disabled = false;
		}

		// Turn off 버튼
		document.querySelector("button:last-of-type").onclick = function() {
			//console.log( "bbb");  이벤트 확인
			let bulb = document.getElementById("bulb");
			bulb.src = "../images/pic_bulboff.gif";
			bulb.setAttribute("alt", "bulboff");

			// turn on 버튼 활성화
			document.querySelector("button:first-of-type").disabled = false;
			// turn off 버튼 비활성화
			document.querySelector("button:last-of-type").disabled = true;
		}
		*/
	</script>

	<!-- jquery -->
	<script>
		// Turn on 버튼		
		$("button:nth-of-type(1)").click(function() {			
			// jquery method :  attr()
			/*
			$("#bulb")
			     .attr("src", "../images/pic_bulbon.gif")
			     .attr("alt", "bulbon"); 
			*/
			$("#bulb")
			     .attr({
							src: "../images/pic_bulbon.gif",
							alt:"bulbon"
						});
			
			
			// attr() / prop() / is(:checked)
			//$(this).prop("disabled", true);
			// next() 다음요소
			//$(this).next().prop("disabled", false); 
			
			$(this)
			     .prop("disabled", true)
			     .next()
			         .prop("disabled", false); 
			
		})		 

		// Turn off 버튼
		$("button:nth-of-type(2)").click(function() {			 
			$("#bulb")
			        .attr({
							src: "../images/pic_bulboff.gif",
							alt:"bulboff"
			          });
			
			$(this)
			     .prop("disabled", true)
			     .prev()
			         .prop("disabled", false); 
			
		})		 
	</script>

	<h3>ex01_04.html - [ js ]html 속성 변경</h3>
	<pre>
         [Turn on]  클릭하면   [Turn off]       전구 불 ON
         [Turn off]  클릭하면   [Turn on]       전구 불 OFF
    </pre>
	<!-- 문제 2 풀이 -->
	<button>Turn on</button>

	<br>
	<img src="../images/pic_bulboff.gif" alt="" id="bulb">

	<!-- js -->
	<script>	   
	  /*
	   document.querySelector("button").onclick = function (){
		    // alert( this.innerText );		    alert( this.innerHTML );
		    let bulb = document.getElementById("bulb");
		    var text = this.innerText;
		    
		    if( text == "Turn on"){ // js     if~else                   equals()		    	 
				bulb.src = "../images/pic_bulbon.gif";
				this.innerText = "Turn off";
		    }else{		    	
				bulb.src = "../images/pic_bulboff.gif";
				this.innerText = "Turn on";
		    } // if
		    
	   }
	*/
	</script>
	<script>	  
	   /*
	   // 스위치 변수 사용
	   var sw = false;
	   let bulb = document.getElementById("bulb");
	   
	   document.querySelector("button").onclick = function (){		  
	 
		   // if( !sw ){ 		    	 
		   //	bulb.src = "../images/pic_bulbon.gif";
		   // }else{		    	
		   //	bulb.src = "../images/pic_bulboff.gif";
		   // } // if
		  
		    // js 삼항연산자  ? :
		    //  bulb.src =   sw ? "../images/pic_bulboff.gif" : "../images/pic_bulbon.gif";
		    bulb.src = "../images/pic_bulb" +  ( sw ? "off" : "on" ) + ".gif";		    
		    this.innerText =   sw ?   "Turn on" : "Turn off"; 
		    sw = !sw;
	   } 
	   */
	</script>

ㄷ. html 스타일(css) 변경

ㄹ. html 요소 숨기기/보이기

등등

4. 사용자 경험 ( UX ) / UI 을 향상시키기 위한 방법 : js 주로 사용.

5. js = 웹브라우저(클라이언트) 언어 + 지금은 서비 측 프로그램 개발 사용( 확대 )

node.js

6. js 다운로드 X / 설치 X => 브라우저 내장( js 엔진 )

브라우저 종류 / 버전 js X

7. 표준 js 는 ECMAScript ( 에크마 스크립트)

표준 공식 이름 : ECMA-262

8. js는 <script></script> (바디, 헤드 안에 권장)

9. <script></script> 태그는 원하는 위치에 원하는 수만큼 사용할 수 있다.

ex03.html

10. 동일한 js 코딩이 여러 페이지에 반복적으로 사용된다면

외부 자바스크립트 파일( ??????.js ) 사용.

<script src="ex01_myscript.js"></script>

/**
* ex01_myscript.js
*/

function myAlert( name ){
alert( name +"님 환영~~" );
}

- 외부 js 파일 사용 장점

1) html 코딩 + js 코딩 분리 -> 더 쉽게 읽고 유지 보수 가능

2) 캐싱된 js 파일은 페이지를 로딩 속도 더 향상.

- 외부 js 파일 3가지 방법

1) 전체 URL

https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js

2) 파일 경로

../js/myscript.js

3) 같은 경로

myscript.js

11. body 요소 맨 아래에 scirpt 를 배치하면 화면 출력하는 속도가 향상된다.

*autofocus 없었을때 body onload

* getElements VS element

문제 4번 풀이 : 라디오체크

<fieldset>
   <legend>html 적용여부</legend>
   <input type="radio"  name="htmlAppy" checked="checked"  value="apply"><label>적용</label>
   <input type="radio"  name="htmlAppy"  value="not apply"><label>비적용</label>
</fieldset>
<input type="text" value="<b>홍길동</b>">
<br>
<button>확인</button>
<p id="demo"></p>
<!-- js -->
<script>
     /*
    document.querySelector("button").onclick = function (){
    	// document.getElementsByName("htmlAppy");
    	var rdbs =  document.querySelectorAll("fieldset > input[type=radio]");
    	// alert( rdbs.length );
    	// 라디오버튼 1개만 체크.
    	var txtValue = document.querySelector("input[type=text]").value;
    	if (  rdbs[0].checked  ) {  // 적용 
    		document.querySelector("#demo").innerHTML = txtValue ;
		} else {  // 비적용
			document.querySelector("#demo").innerText = txtValue;
		}
    }
     */
</script>

<!-- jquery -->
<script>

   $("button").click(function (){
	    var rdbs =  $("fieldset > input[type=radio]");
	    var txtValue = $("input[type=text]").val();
	    if (  rdbs[0].checked  ) {  // 적용   attr()/prop()/is()
			$("#demo").html( txtValue );
		} else {  // 비적용
			$("#demo").text( txtValue );
		}
   }); 
 
</script>

[js 데이터 출력 기능]

1. document.write();

2. window.alert("") ; - 경고창으로 데이터 출력

alert("");

3. console.log() - 브라우저 콘솔 창에 데이터 출력( 디버깅 목적 )

4. 요소.innerText 속성 -> text()

요소.innerHTML 속성 -> html()

문제6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
   .active{
      background-color: yellow;
      color:rgb(206, 233, 96);
      font-size: 25px;
   }
</style>
</head>
<body>

좋아하는 과목 선택?
<br>
 
<input type="checkbox" value="kor"  name="subject"  id="s_kor" ><label for="s_kor">국어</label>
<input type="checkbox" value="eng"  name="subject"  id="s_eng"  checked="checked"><label for="s_eng">영어</label>
<input type="checkbox" value="mat"  name="subject"  id="s_mat" ><label for="s_mat">수학</label>
<input type="checkbox" value="pe"  name="subject"  id="s_pe" ><label for="s_pe">체육</label>
 
 <br>
 <br>
 <button onclick="">확인</button> 
 <p id="demo"></p>

<!-- js -->
<script>
     /*
     document.querySelector("button").onclick = function (){
    	 document.getElementById("demo").innerHTML = "";
    	  // alert("이벤트 확인")
    	 //var ckbs = document.querySelectorAll("input[type=checkbox][name=subject]");
    	 //var ckbs = document.querySelectorAll("[name=subject]");
    	 var ckbs = document.getElementsByName("subject");
    	 // alert( ckbs.length ); 
    	 var content = "";
    	 for (var i = 0; i < ckbs.length; i++) {
    		  if(  ckbs[i].checked ){
    			  // console.log( ckbs[i].value );
    			  //document.getElementById("demo").innerHTML += ckbs[i].value+"<br>";
    			  if( ckbs[i].value == "kor" ){
    				  content += 	"<b class='active'>"+ ckbs[i].value+"</b><br>";   
    			  }else{
    				  content += 	"<b>"+ ckbs[i].value+"</b><br>";   
    			  }
    		       
    		  }
		  } // for
		  
    	 document.getElementById("demo").innerHTML =  content;
     }
     */
</script>

<!-- jquery -->
<script>
     /*
    $("button").click( function (){
    	$("#demo").html("");    	
    	// $("[name=subject]")
    	
    	//  jquery selector -   :checkbox
    	//  $(":checkbox") ==$("input[type=checkbox]")
    	var ckbs = $(":checkbox[name=subject]");
    	// alert( ckbs.length );
    	for (var i = 0; i < ckbs.length; i++) {
    		  //if ( elem.checked )                            - js
    		  //if ( $( elem ).prop( "checked" ) )
    		  //if ( $( elem ).is( ":checked" ) )
    			  
    		 // 	  Uncaught TypeError: ckbs[i].prop is not a function
    		 //   jquery object =   jquery method : prop(), val(), ....
    		 //  *** $(html element) -> jquery object 변환 ***
    		 if( $(ckbs[i]).prop( "checked" ) ){
                //    	     	  Uncaught TypeError: ckbs[i].val is not a function
    			 //  console.log( $(ckbs[i]).val()  );    // val() 메서드 == value 속성
    			 
    			 // $("#demo").html(  $("#demo").html() +   $(ckbs[i]).val() +"<br>"    );    			 
    			 $("#demo").html( function (index, oldhtml){
    				 return oldhtml +"<br>" + $(ckbs[i]).val();
    			 } );
    			 
    		  }	   // if
		} //for 
    	
    } );
    */
</script>

<!-- jquery 두 번째 방법 -->
<script>
$("button").click(  function (){
	$("#demo").html("");
	// 체크박스 중에 체크된 체크 박스를 얻어오는 것.	
	/* jquery selector -  :checked */
	
	// 반복문 - value 얻어와서 -> #demo 출력
	// jquery method -   each()
	$("[name=subject]:checked").each(function (index, element){
		                                   //    element.val()
		// console.log( index +" / " + element.value + " / " + $(element).val()  +" / " + $(this).val() );
         $("#demo").html( function (index, oldhtml){
        	 return oldhtml +"<br>" + $(element).next().text();
         });		                                   
	});
	
} );
</script>

* jquery 객체만 .prop 사용가능 (변환시켜야함)

1. option을 선택하게되면 일어나는 이벤트 - [ change 이벤트 ]

2. 여러 option 들 중에 어떤 option이 선택

- selectedIndex 속성

3. 선택된 option의 value, text

select.options[selectedIndex].value, .text 컬렉션

주의) 선택된 옵션을 다시 선택하면 chage 이벤트는 발생하지 않는다.

<br>
<!-- select>option*5 -->
<!-- select 요소에서 text 속성만 설정하는 value 속성은 동일한 값. -->
<select name="subject" id="subject">
	<option value="">선택하세요.</option>
	<option value="kor">국어</option>
	<option value="eng">영어</option>
	<option value="mat">수학</option>
	<option value="pe">체육</option>
</select>
 
<br>
<p id="demo"></p>

<!-- js -->
<script>
     /*
    document.getElementById("subject").onchange= function (){
    	// console.log( "change event ~");
    	// console.log(  this.selectedIndex );
    	var index = this.selectedIndex;
    	var op = this.options[index];
    	if( op.value == 0 ) {
    		alert("선택하세요~~")
    	}else{
    		console.log(  op.value + " / " +  op.text );	
    	}    	
    }
     */
</script>
<script>
    /*
    //                                      kor - undefined
	document.getElementById("subject").onchange= function (){
		 console.log(   this.value  + " - " + this.text  );
	}
    */
</script>

<!--  jquery -->
<script>
    // alert( $("#subject option").length );
    // alert( $("#subject option").size() );  X

    $("#subject").change(function() {
    	// console.log(  $(this).val() +" // " + $(this).text()  );
    	
    	// jquery selector  -   :checked,         :selected
    	// console.log(  $("#subject option:selected").text()  );
    	
    	// jquery method -  find()
    	console.log(  $(this).val() +" // " + $(this).find(":selected").text()  );
    	
    	// http://erel.kr/bbs/board.php?bo_table=study&wr_id=275
    });
</script>

1. js 코딩을 누가 실행 ? 웹 브라우저(*** 클라이언트 ***))가 실행.

2. 작성된 순서대로 하나씩 실행된다.

3. 실행문(명령문) 뒤에 세미콜론을 추가.

js 는 세미콜론 안 찍어도 된다.

하지만 세미콜론을 추가하는 것을 ( 적극권장 )한다.

4. js 는 여러 공백을 무시한다.

공백을 추가하면 가독성이 좋다.

var name = xx;

var sum = m + l + x;

5. js 예약어(키워드)

var

let

const 키워드 == 상수 선언. ( final double PI = 3.14)

for

function

abstract arguments await* boolean

break byte case catch

char class* const continue

debugger default delete do

double else enum* eval

export* extends* false final

finally float for function

goto if implements import*

in instanceof int interface

let* long native new

null package private protected

public return short static

super* switch synchronized this

throw throws transient true

try typeof var void

volatile while with yield

6. 리터럴( 고정값 )

3.14 'A' [ "admin" 'admin' ] true false 등등

7. js 는 대소문자를 구분한다.

8. js의 변수 선언 형식 : firstNameName

getFirstName

캐멀표기법

9. js 식별자 명명하는 규칙

10. js 주석처리 // /*~ */

  /*
  var                          name     = 'admin'         ;
  var age    =                           10;
  
  Age = 20;
  */
  
  
  //var name = "John Doe";
  //var name = 'John Doe';
  var name = "John's Doe";
  
  // js는 변수를 선언하지 않고 사용할 수 있다.
  Name = "admin";
  
 alert(   name  + " / " +  Name );

[ js 변수를 선언하는 4가지 방법 ]

1. var : 1995년 ~ 2015년 까지 js 코드에서 사용.

2. let : 2015년( ES6 ) js 추가된 키워드

3. const : 상수화( 변수값을 변경 X )

4. 아무것도 사용하지 않는 경우

저작자표시

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

[Day3] JS 3 - 테이블체크, 함수, undefined, null, 객체, 엄격모드, this, 이벤트 처리, 문자열 (0)	2022.11.22
[Day2] JS 2 - 변수, 연산자, 자료형, 키보드 (0)	2022.11.22
[Day6] CSS 6 - 텍스트효과, 웹글꼴, 2D 3D, 전환, 애니메이션, 툴팁, 뷰포트, 미디어쿼리 (0)	2022.11.18
[Day5] CSS 5 - 롤오버, 메뉴바, 타임라인, 이미지 갤러리, 이미지 스프라이트, 선택자, 검색스타일, 평점, 특이성(점수), 막대그래프, 프로필, 둥근모서리, 다중배경이미지, background image, paral.. (0)	2022.11.17
[Day4] CSS 4 - overflow, 팝업폼, display, prev\|next, 레이아웃배치(수직수평), css결합자, 의사클래스, 의사요소, 불투명, 탐색모듬, 드롭다운 (0)	2022.11.16

[Day1] JS 1 - 개요

[Day1] JS 1 [11/18]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day1] JS 1 [11/18]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바