NOV 02~03

Kim·2020년 11월 3일

📌 Variable

Java : variables have own types
Javascript : variables does NOT have own types

⛄ Java

int i=5;
String j="Just take me home"
//Declaring variable with data type

⛄ Javascript

var i=5;
var j="Just take me home";
//Declaring variable without data type

📌 Array

⛄ Javascript
Array size is changeable. (형태가 정해지지 않음)
⛄ ar.push();
add an element to array

 	var ar=[] ;
 	ar.push(1);
 	ar.push(3);
 
 	// 🐣 result_ ar = [1,3];

⛄ ar.pop() & ar.shift();
ar.pop() : get the last variable in the array
ar.shift() : get the first variable in the array
Once selected variable was came out of the array, it does NOT exist anymore.

	🐣 .pop()
	var ar[] = [1,3,5,7];
	var i = ar.pop();  
	//i = 7, from ar[] = {1,3,5,7} the last variable pops out

	🐣 .shift()
	var j = ar.shift();  
	//j = 1, from ar[] = {1,3,5} the first variable pops out
	
	Now_
 	ar[] = [3,5];

⛄ ar.split() & ar.join();
split : String 👉 array
join : Array 👉 String

	var p = "Rain on me";
	var ar = p.split(" ");
	ar = [Rain, on, me];

	p = ar.join(",");
	== "Rain, on, me"

📌 Operation

⛄ Javascript and JQuery
They run above Web Browser
They are ✌ scripting or programming language that allows you to implement complex features on web pages ✌

Operation Process
1. Javascript, JQuery
2. Web Browser
3. Window/MacOS/Linux(OS)
4. HardWare
⛄ Java, Python, C....
They run above OS
They ✌ create complete applications ✌ that may run on a single computer or be distributed among servers and clients in a network. Also build a small application module or applet (a simply designed, small application) for use as part of a Web page.

Operation Process
1. Java, Python
2. Window/MacOS/Linux(OS)
3. HardWare

Operation Process
1. Javascript, JQuery
2. Web Browser
3. Window/MacOS/Linux(OS)
4. HardWare

Operation Process
1. Java, Python
2. Window/MacOS/Linux(OS)
3. HardWare

📌 DOM

Document Object Model
Tree structure

https://en.wikipedia.org/wiki/Document_Object_Model
Read the reference above (Cross-platform software, features)

📌 Object

in Javascript, ✌ an object is data continer ✌ like a class in Java.
javascript var ob={}; an object can contain values, functions,...
= java class ob{};

    <script language='javascript'>
        var ob={"name":"John","gender":"M",
                "mobile":"0433955703",
                "getName":function(){
                    document.write(this.name);
                }
        };
        document.write(ob.name+"<br>"); //John
        document.write(ob.gender+"<br>"); //M
        document.write(ob.mobile+"<br>"); //0433955703
        ob.getName; // ob.name = John

⛄ key : value couple
"name" : John"
key is name, value is John

ob.name : name contains John and it is in ob object.
⛄ Practice(2)

    <script language='javascript'>
        var menu={name:["latte", "cappuccino", "vanila latte"],  
                  //in name variable there is an array which contains three values
                 price : [2500,3500,4000],
                 showMenu:function(){
                     for(i=0;i<this.name.length;i++){
                         document.write(this.name[i]+", "+ this.price[i]+"<br>");
                     }
                 },
                 buildMenu:function(){
                     this.name.push("latte");
                     this.name.push("cappuccino");
                     this.name.push("vanila latte");
                     this.price.push(4);
                     this.price.push(4);
                     this.price.push(4.5);
                 }                
        };
        menu.showMenu();
        menu.buildMenu();
    </script>

⛄ result
It is simillar to ArrayList(Java)

📌 Array

var ar= [{}, {}, {}, {}];
ar is an array which have four empty objects(can have functions and variables)

⛄ Practice

    <script language='javascript'>
        var menu={name:["latte", "cappuccino", "vanila latte"],  
                  //in name variable there is an array which contains three values
                 price : [2500,3500,4000],
                 showMenu:function(){
                     for(i=0;i<this.name.length;i++){
                         document.write(this.name[i]+", "+ this.price[i]+"<br>");
                     }
                 },
                 buildMenu:function(){
                     this.name.push("latte");
                     this.name.push("cappuccino");
                     this.name.push("vanila latte");
                     this.price.push(4);
                     this.price.push(4);
                     this.price.push(4.5);
                 }                
        };
        menu.showMenu();
        menu.buildMenu();
    </script>

It is simillar to ArrayList(Java)

⛄ Result

📆 NOV 03

📌 JQUERY

⛄ Reference
https://en.wikipedia.org/wiki/JQuery (Read features)
JQUERY = Javascript library (Javascrpit + a)
Jquery has Javascript functions + a

📌 VS Code

⛄ Essential
Save the second practice code as "mycode.js"
And write this code in HTML file.
<script src="mycode.js"> </script> = Include mycode.js in HTML file
Then you can use mycode.js in the HTML file.
<script src="http://code.jquery.com/jquery-3.5.0.js"> </script> Must be written in HTML file when you use JQERY.
⛄ Code

	<input type=text id=txtname><br>
	<input type=button value="my name" id=btnGo>

	<script src="http://code.jquery.com/jquery-3.5.0.js">
	</script>
	<script language="javascript">
    	$(document)
    	.on('click', '#btnGo', function(){
        	$('#txtname').val("Kim");
        	return false;
    	})
	</script>

	This code is same as...
	var n=document.getElementByID("txtname")
	n.value="Kim";

⛄ Explanation

 .on('click', '#btnGo', function(){

click is an event
#btnGo points out (input type=button value="my name" id=btnGo)
=
function() is an event handler

$('#txtname').val("Kim");

#txtname points out (input type=text id=txtname)
=
.val("Kim") means input "Kim" to #txtname

$ is a selector. Check #txtname 's location

📌 JQERY structure : $(String).method

⛄ basic practice
Create two text fields and one button. Once the button clicks, one text field shows your name and another one shows your mobile

	<body>
  	  <input type=text id=textname><br>
  	  <input type=text id=textmobile><br>
  	  <input type=button id=btn>
  	</body>

	<script src="http://code.jquery.com/jquery-3.5.0.js">
  	<script langauge = 'javascript'>
    	$(document)
    	.on('click', '#btn', function(){
    		$('#textname').val("Jin");
    		$('#textmobile').val("01020202020")
        	return false;
    	</script>

📌 alert()

Pop up warning to show message to user. Only 'ok' exits

<input type=button value="showAlert" id=btnAlert>

<script src="http://code.jquery.com/jquery-3.5.0.js">
</script>
<script language="javascript">
    $(document)
    .on('click', '#btnAlert', function(){
        alert("Hello");
        return false;
    })
</script>

⛄ result

📌 confirm()

Yes or No

.on('click', '#btnAlert', function(){
        var answer=confirm("You want to continue?");
        if(answer==false){
            return false;
        } else {
            $('#txtname').val("Happy Halloween")
        }
    })

⛄ result

📌 prompt()

Users enter values and get the values

<input type=text id=txtname><br>
<input type=text id=txtmobile><br>

<input type=button value="Privacy"" id=btnAlert>

   .on('click', '#btnAlert', function(){
        var answer=prompt("Enter your name", "name");
  //first parameter :request(question), second : default value
        $('#txtname').val(answer);
        answer = prompt("Enter your mobile");
        $('#txtmobile').val(answer);
        return false;
    })
    // Yes : prompt 안의 text field값에 answer 전달
    // No : answer="";

result

📌 message box

message box is not a HTML and does not exit in web browser

System.out.println("Good morning\n How are you")
in alret, confrim, prompt : NO <br> TAG!! Use \n
alret("Good moring \n How are you?")

📌 .val()

.on('click', '#btnAlert', function(){
        var str=$('#txtname').val();  
        // this code is'getter'. get value(.val()) from #txtname 
  //while val(answer) is 'setter' put answer into #txtname
        alert(str);
        return false;
    })

⛄ practice
1. get data from the user and print the data in the pop up(alert). Use getter ONLY

	<input type=text id=txtname><br>
	<input type=text id=txtmobile><br>
	<input type=text id=txtaddress><br>
	<input type=button value="Privacy" id=btnAlert>

	<script src="http://code.jquery.com/jquery-3.5.0.js">
	</script>
	<script language="javascript">
    	$(document)
    	.on('click', '#btnAlert', function(){
        	var str=$('#txtname').val();  
        	var str_01=$('#txtmobile').val();
        	var str_02=$('#txtaddress').val();  
        	alert(str+"\n"+str_01+"\n"+str_02);
        	return false;
    	})

🐣 result
2. 버튼을 누르면, txtname1의 값이 txtname2로 이동. txtname1은 공란이됨

	<input type=text id=txtname><br>
	<input type=text id=txtname2><br>
	<input type=button value="Swat" id=btnAlert>

	<script src="http://code.jquery.com/jquery-3.5.0.js">
	</script>
	<script language="javascript">
    	$(document)
    	.on('click', '#btnAlert', function(){
        	var str=$('#txtname').val();  //getter
        	$('#txtname2').val(str);  //setter
        	$('#txtname').val(''); //setter
        	return false;
    	})
	</script>

	//FIrst of all, get a name from the user through #txtname.
	//And set #txtname2's value as the name from #txtname.
	//Then, set #txtname's value as blank.

🐣 result

⛄ getter and setter
getter : No parameter but return. Get value from the user.
setter : Parameter but no return. Set value of the method(function)

	//JAVA
    
	class A {
	private int n;

	//getter : no parameter but return!
	int getN(){
	return this.n;
	}

	//setter : parameter but no return!
	void setN(int x){
	<this.n=x;
	}
      
	void main(){
	int i=A.getN();  //call getter
	A.setN(10);  //call setter

📌 html 사용자에게 입력받는 타입

text : get text from the user
textarea : get text from the user
button : click
select : similar to multiple choice
checkbox
radio button

⛄ select

Similar to multiple choice
🐣 example 1

<body>
    <select id="selCountry" size="10">
        <option>Korea</option>
        <option>USA</option>
        <option>Singapore</option>
        <option selected>Finland</option>
        <option>Indonesia</option>
    </select>
    <input type=button value="select" id=btnAlert>
</body>

<script src="http://code.jquery.com/jquery-3.5.0.js">
</script>
<script language="javascript">
    $(document)
    .on('click', '#btnAlert', function(){
        alert($('#selCountry').val());
        return false;
    })
</script>

🐣 example 2
Through the above select, if you choose a country, print the country name in the text.

    .on('click', '#selCountry', function(){
        var str=$('#selCountry').val();
        $('#txt').val(str);
        return false;
    })

⛄ Radio
🐣 example 1

    <body>
    <input type="radio" id="female" name=gender>female &nbsp;
    <input type="radio" id="male" name=gender>male &nbsp;<br>
    <input type="text" id=txtname>
    </body>

<script src="http://code.jquery.com/jquery-3.5.0.js">
</script>
<script language="javascript">
    $(document)
    .on('click', '#txtname', function(){
        var str=$('input:radio[name=gender]:checked').prop('id');
        $('#txtname').val(str);
        return false;
    })
</script>

//same name, different id and bring the id to #txtname
//$('input:radio[id=female]').prop('checked',true);
//= $('#female').prop('checked',true);

🐣 example 2
Depending on select gender, change radio gender automatically

    <body>
    		<select id=gender>
       		<option>female</option>
        	<option>male</option>
    		</select>
    	<input type="radio" id="female" name=gender>female &nbsp;
    	<input type="radio" id="male" name=gender>male &nbsp;<br>
    </body>

	<script src="http://code.jquery.com/jquery-3.5.0.js">
	</script>
	<script language="javascript">
    	$(document)
    	.on('click','#gender',function(){
        	var str=$('#gender').val();
        	$('#'+str).prop('checked',true);
    	})
	</script>

📌 Cache

ctrl + shift + r = Delete cache

📝 회원가입 테이블

<table>
    <tr>
        <td align=right>name</td>
        <td><input type="text" id=txtname size=20></td>
    </tr> 
    <tr>
        <td align=right>DOB</td>
        <td><input type="date" id=txtbirth></td>
    </tr>
    <tr>
        <td align=right>gender</td>
        <td><input type="radio" id=female name=gender>female&nbsp;
            <input type="radio" id=male name=gender>male</td>
    </tr>
    <tr>
        <td align=right>User Id</td>
        <td><input type="text" id=userid size=12></td>
    </tr>
    <tr>
        <td align=right>password</td>
        <td><input type="password" id=passcode1 size=12></td>
    </tr>
    <tr>
        <td align=right>check_pw</td>
        <td><input type="password" id=passcode2 size=12></td>
    </tr>
    <tr>
        <td align=right>Location</td>
        <td>
            <select id=location>
                <option>서울</option><option>강원</option><option>충북</option><option>전북</option>
                <option>경기</option><option>충남</option><option>전남</option><option>경남</option>
                <option>경북</option><option>제주</option>
            </select>
    </td>
    </tr>
    <tr>
        <td align=right>Interests</td>
        <td><input type="checkbox" id=movie name=int>Movie</td>
        <td><input type="checkbox" id=sports name=int>Sports</td>
        <td><input type="checkbox" id=enter name=int>Entertainment</td>
        <td><input type="checkbox" id=travel name=int>Travel</td>
        <td><input type="checkbox" id=politics name=int>Politics</td>
        <td><input type="checkbox" id=economy name=int>Economy</td>
    </tr>
    <tr>
        <td colspan=2>
            <input type="button" id=show value='show'>&nbsp; show &nbsp;
            <input type="button" id=reset value='reset'>&nbsp; reset
        </td>
    </tr>
</table>
</body>

<script src="http://code.jquery.com/jquery-3.5.0.js">
</script>
<script language="javascript">


$(document)
//show
 .on('click', '#show', function(){
        var name = $('#txtname').val();

        var dob = $('#txtbirth').val();

        var gender=$('input:radio[name=gender]:checked').prop('id');

        var userid = $('#userid').val();

        var password = $('#passcode1').val(); //if로 #passcode2랑 같은지 비교해야함 

        // var password2 = $('#passcode2').val();
        // if(password2!=password){
        //     alert("passwords are not correct")
        // }

        var location=$('#location').val();

        var interests="";

            if($('#movie').is(':checked')){
            interests+="movie ";
            }if($('#sports').is(':checked')){
                interests+="sports ";
            }if($('#enter').is(':checked')){
                interests+="entertainment ";
            }if($('#travel').is(':checked')){
                interests+="travel ";
            }if($('#politics').is(':checked')){
                interests+="politics ";
            }if($('#economy').is(':checked')){
                interests+="economy ";
            }
        
     
     document.write("user_name : "+name+"<br>"
     +"user_DOB : "+dob+"<br>"+"user_gender : "+gender+"<br>"
     +"user_id : "+userid+"<br>" + "password : "+password+"<br>" 
     +"location : "+location+"<br>"+"interests : "+interests)
 })
 //reset
 .on('click', '#reset', function(){
    $('#txtname').val('');
    $('#txtbirth').val('');
    $('#female').prop('checked', false);
    $('#male').prop('checked', false);
    $('#userid').val('');
    $('#passcode1').val('');
    $('#locataion').val('');
    //interests
    $('#movie').prop('checked', false);
    $('#sports').prop('checked', false);
    $('#enter').prop('checked', false);
    $('#travel').prop('checked', false);
    $('#politics').prop('checked', false);
    $('#economy').prop('checked', false);
 })

Kim

이전 포스트

Day 42

다음 포스트

NOV 02~03

📌 Variable

📌 Array

📌 Operation

📌 DOM

📌 Object

⛄ Practice(2)

📌 Array

⛄ Practice

📆 NOV 03

📌 JQUERY

📌 VS Code

📌 JQERY structure : $(String).method

📌 alert()

📌 confirm()

📌 prompt()

📌 message box

📌 .val()

⛄ practice

⛄ getter and setter

📌 html 사용자에게 입력받는 타입

⛄ select

⛄ Radio

📌 Cache

📝 회원가입 테이블

Day 42

Nov 04

0개의 댓글