Skip to content

js_jquery.org

Latest commit

 

History

History
1124 lines (913 loc) · 28.6 KB

js_jquery.org

File metadata and controls

1124 lines (913 loc) · 28.6 KB

Overview

HTML => Content

CSS => Style

JavaScript => Behavior

JS && JQuery

Primary JavaScript Tasks

  1. Event Handling
  2. DOM Traversal
  3. DOM Manipulation
  4. Send/receive data without page refresh

this

semicolons in JavaScript

backtick

oop in js “Mosh”

Differences between var and let in JavaScript

external links

HTML Elements

Etc

JS

02. 기본 입출력

  • prompt
  • alert
  • confirm
  • console.log()

04. 연산자

== equality or abstract comparison operator

=== identity or strict comparison operator

  • does not do any type conversion (coercion) and returns true
  • only if both values and types are identical for the two variables being compared.
//https://codeahoy.com/javascript/2019/10/12/==-vs-===-in-javascript/#:~:text=The%20difference%20between%20%3D%3D%20and%20%3D%3D%3D%20is%20that%3A,the%20two%20variables%20being%20compared.
var one = 1;
var one_again = 1;
var one_string = "1";  // note: this is string

console.log(one ==  one_again);  // true
console.log(one === one_again);  // true
console.log(one ==  one_string); // true. See below for explanation.
console.log(one === one_string); // false. See below for explanation.

09. 함수 기본

Parameter Rules

  • JavaScript function definitions do not specify data types for parameters.
  • JavaScript functions do not perform type checking on the passed arguments.
  • JavaScript functions do not check the number of arguments received.

Default Parameters

  • JavaScript functions have a built-in object called the arguments object.
  • The argument object contains an array of the arguments used when the function was called (invoked).
  • This way you can simply use a function to find (for instance) the highest value in a list of numbers:

Arguments are Passed by Value

function myInc(a){
    a = a+1;
}
var theInt = 3;

myInc(theInt);

console.log("theInt :" + theInt);

Objects are Passed by Reference

var aa={name:"Peter",
	  age : "17"};

function nameToUpper(theObj){
    //console.log("theObj.name : " + theObj.name);
    //console.log("typeof(theObj.name) : " + typeof theObj.name);
    theObj.name = theObj.name.toUpperCase();
    //console.log("theObj.name : " + theObj.name);
}
nameToUpper(aa);
console.log("aa.name : " + aa.name);

function myInc(a){
    a = a+1;
}
var theInt = 3;

myInc(theInt);

console.log("theInt :" + theInt);

10. 함수 심화

closure01

 <!doctype html>
 <html>

   <head>
     <link rel="stylesheet" href="stylesheet.css" type="text/css">
   </head>

   <body>

     <div>
	<h3> Practical Use of JavaScript Closure consept/private variable. </h3>

	<div class="cartdiv">
	  <span id="cartcount">0</span>
	</div>

	<div class="productslist">
	  <ul >
	    <li class="item">Product 1</li>
	    <li class="item">Product 2</li>
	    <li class="item">Product 3</li>
	  </ul>
	</div>

     </div>

     <script src="hello.js", type="text/javaScript"> </script>
   </body>
 </html>
// hello.js
  //Counter clouser implemented function;
  var CartCouter = function(){
      var counter = 0;
      return {
	  increment: function(){counter++;},
	  decrement: function(){counter--;},
	  value: function(){return counter;}
      }
  }

  var cartCount = CartCouter();

  function updateCart(){
      document.getElementById('cartcount').innerHTML = cartCount.value();
  }

  var productlist = document.getElementsByClassName('item');

  for(var i = 0; i< productlist.length; i++){
      productlist[i].addEventListener('click', function(){
	  if(this.className.indexOf('selected')<0){
	      this.className += " selected";
	      cartCount.increment();
	  } else{
	      this.className = this.className.replace("selected", "");
	      cartCount.decrement();
	  }
	  updateCart();
      });
  }
// stylesheet.css
  h3{
      padding:10px;
      border: 1px solid #ddd;
  }
  .productslist{
      padding:10px;
      border: 1px solid #ddd;
  }
  ul li{
      display: inline-block;
      padding: 5px;
      border: 1px solid #ddd;
      text-align: center;
      width: 25%;
      cursor: pointer;
  }
  .selected{
      background-color: #7CFEF0;
      color: #333;
  }
  .cartdiv{
      position: relative;
      float:right;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid #f1f1f1;
  }

closure02

<!doctype html>
<html>

  <head>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />
  
  </head>

  <body>
    <p>Some paragraph text</p>
    <h1>some heading 1 text</h1>
    <h2>some heading 2 text</h2>

    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a>

    <script src="hello.js" type="text/javaScript">
    
    </script>

  </body>
</html>
//hello.js
  function makeSizer(size) {
      return function() {
	  document.body.style.fontSize = size + 'px';
	  console.log('document.body.style.fontSize :' + document.body.style.fontSize);
      };
  }

  var size12 = makeSizer(12);
  var size14 = makeSizer(14);
  var size16 = makeSizer(16);

  document.getElementById('size-12').onclick = size12;
  document.getElementById('size-14').onclick = size14;
  document.getElementById('size-16').onclick = size16;
//stylesheet.css
  body {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 12px;
  }

  h1 {font-size: 1.5em;}
  h2 {font-size: 1.2em;}

Arrow Functions

var myObj = { 
  myText: "hi!",
  myFunc: function(){
    setTimeout(function(){
      console.log(this.myText);
    }, 1000)
  },
  myFunc2: function(){
    setTimeout(()=>console.log(this.myText), 1000);
  }
};

myObj.myFunc(); // undefined
myObj.myFunc2(); // "hi!"

11. 객체 심화

  • 객체생성 {} <-> Array 생성 [] or new Array();
  • 객체의 멤버변수는 name : value,
  • where vale can be either field or function
  • {}에 의한 생성에는 : 그리고 ,로 분리
  • 생성자에 의한 생성 = 그리고 ;으로 분리, 모든 멤버에 this.xxx

객체생성방법3가지

{}를 사용하여 생성
	var carObj = {
	    name      : "소나타"
	    ,price    : 2000
	    ,size     : 500
	    ,capacity : 5};
함수를 사용하여 생성
	function createCar(name, color, speed){
	    var obj = {
		name   : name
		,color : color
		,speed : speed
		,fun : function(){
		    return this.speed + "km/h";
		}
	    };
	    return obj;
	}
	var sonata = createCar("sonata", "red", 200);
생성자를 이용한 객체생성
   function Car(name, color, speed){
	this.name    = name;
	this.color  = color;
	this.speed  = speed;
	this.run    = function(){
	    return this.speed + "runs!";
	};
	this.info = function(){
	    console.log("Name : "  +  this.name);
	    console.log("Color : " + this.color);
	    console.log("Speed : " + this.speed);
	};
   }
   var Sonata = new Car("Sonata", "silver", 230);
   var Sorento = new Car("Sorento", "black", 210);
   var Cars = [Sonata, Sorento];
   for(var i=0; i < Cars.length; i++){
	Cars[i].info();
	//with(Cars[i]){
	//	   console.log("Name : ",  name);
	//	   console.log("Color : ", color);
	//	   console.log("Speed : ", speed);
	//}
   }

getters && setters

1. with methods
var obj = {
    foo : 'this is the value of foo',
    getFoo : function(){return this.foo;},
    setFoo : function(foo){ this.foo = foo;}
};
console.log(obj.getFoo());
obj.setFoo('Hello');
console.log(obj.getFoo());
2. with keywords(get,set)
 var obj = {
    foo: 'this is the value of foo',
    get Foo(){return this.foo;},
    set Foo(foo){ this.foo = foo;}
};
console.log(obj.Foo);
obj.Foo = 'Hello';
console.log("The value of obj.foo : " + obj.Foo);
3. Operations inside getters && setters
 
var obj = {
    id : 67,
    get Id(){ return 'The ID is: ' + this.id;},
    set Id(id){ 
	   if(typeof id === 'number'){
	       this.id = id;
	   }else{
	       console.log("Warning!!, the id : "+ id +" is not valid one...")
	   }
    }
};

console.log(obj.Id);
obj.Id = 983;
console.log(obj.Id);
obj.Id= 'hello';
console.log(obj.Id);
4. Protect data with getters and setters
1. block scope
/* BLOCK SCOPE, leave the braces alone! */
{
    let fooVal = 'this is the value of foo';
    var obj = {
	  get foo() {
	      return fooVal;
	  },
	  set foo(val) {
	      fooVal = val
	  }
    }
}

fooVal = 'hello';
// not going to affect the fooVal inside the block

console.log(obj.foo);
// "this is the value of foo"
2. function scope
   function myobj(){
	var fooVal = 'this is the value of foo';
	return {
	    get foo() {
		return fooVal;
	    },
	    set foo(val) {
		fooVal = val
	    }
	}
   }

   fooVal = 'hello';
   // not going to affect our original fooVal

   var obj = myobj();

   console.log(obj.foo);
   // "this is the value of foo"
Wyh using Getters and Setters?
  • It gives simpler syntax
  • It allows equal syntax for properties and methods
  • It can secure better data quality
  • It is useful for doing things behind-the-scenes

prototype

  • All JavaScript objects inherit properties and methods from a prototype.
  • To add a new property to a constructor, you must add it to the constructor function:
  • The JavaScript prototype property allows you to add new properties to object constructors:
function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}

Person.prototype.nationality = "English";
  • The JavaScript prototype property also allows you to add new methods to objects constructors:
function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName  = last;
    this.age       = age;
    this.eyeColor  = eyecolor;
}

Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

12. 내장객체

  • String(charCodeAt, charAt, search, lastIndexOf, slice, substring, substr)
  • Math
  • Data
  • Array

String

search & indexOf
  • The two methods, indexOf() and search(), are equal?
  • They accept the same arguments (parameters), and return the same value?
  • The two methods are NOT equal. These are the differences:
  • The search() method cannot take a second start position argument.
  • The indexOf() method cannot take powerful search values (regular expressions).
lastIndexOf()
  • The lastIndexOf() method returns the index of the last occurrence of a specified text in a string:
slice()
  • slice() extracts a part of a string and returns the extracted part in a new string.
  • The method takes 2 parameters: the start position, and the end position (end not included).
Extracting String Parts
  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

13. BOM (Browser Object Mode)

  • The Browser Object Model (BOM) allows JavaScript to “talk to” the browser.

Window Object

  • window.alert
  • window.console.log
  • window.open
    • The open() method opens a new browser window,
    • or a new tab, depending on your browser settings and the parameter values.
 <!doctype html>
 <html lang="ko" xmlns="http://www.w3.org/1999/xhtml">

   <head>
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   </head>

   <body>
     <button onclick="aa();"> Click Me!! </button>
     <button onclick="bb();"> Click Me!! </button>

     <script>
	//https://offbyone.tistory.com/312
	function aa(){
	var popWin = window.open("", "popup window", "width=800, height=600");
	popWin.document.write("<p> 새창에 표시될 내용입니다.</p>");
	}
	function bb(){
	var popWin = window.open("./popup.html", "popup window", "width=800, height=600");
	popWin.document.write("<p> popup.html 내용입니다.</p>");
	}
     </script>
   </body>

 </html>
  • close
<!DOCTYPE html>
<html>
<body>

<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>

<script>
var myWindow;

function openWin() {
  myWindow = window.open("", "myWindow", "width=200,height=100");
  myWindow.document.write("<p>This is 'myWindow'</p>");
}

function closeWin() {
  myWindow.close();
}
</script>

</body>
</html>
  • moveBy
  • resizeBy
  • window.onload
  • location.href

location.href

<!DOCTYPE html>
<html>
<body>

<p>Click the button to set the href value to https://www.w3schools.com.</p>

<button onclick="myFunction()">Take me to w3schools.com</button>

<script>
function myFunction() {
  location.href = "https://www.w3schools.com";
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<p>Click the button to set the href value to https://www.w3schools.com.</p>

<button onclick="f1()">Take me to w3schools.com</button>
<button onclick="f2()">Take me to google.com</button>
<button onclick="f3()">Take me to yahoo.com</button>
<button onclick="f4()">Take me to yahoo.com</button>
<br>
<a href="https://www.w3schools.com">https://www.w3schools.com</a>
<a href="https://www.google.com">https://www.google.com</a>
<a href="https://www.yahoo.com">https://www.yahoo.com</a>

<script>
function f1() {location.href = "https://www.w3schools.com";}
function f2() {location.href = "https://www.google.com";}
function f3() {location.href = "https://www.yahoo.com";}
function f4() {window.open("https://www.yahoo.com");}
</script>

</body>
</html>

window.onload

<!doctype html>
<html>

  <head>
    <!--  https://www.w3schools.com/jsref/met_win_open.asp -->
    <title> BOM (Browser Object Model) </title>
    <script>
      window.onload = function (){
	  console.log("first");
      };
    </script>
  </head>

  <body>

    <script>
	  console.log("second");
    </script>

    <script>
	  console.log("third");
    </script>

  </body>
</html>

advanced example

  • chrome.exe –user-data-dir=”C://Chrome dev session” –disable-web-security
<!-- 
parent.html
https://usefulangle.com/post/4/javascript-communication-parent-child-window
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">

#open-child-window {
	width: 300px;
	display: block;
	margin: 40px auto 0 auto;
}

#messages-container {
	max-width: 600px;
	margin: 40px auto 0 auto;
	overflow: hidden;
	display: none;
}

h6 {
	margin: 0 0 20px 0;
	text-align: center;
}

#message-to-outer {
	width: 45%;
	background-color: #f8f8f8;
	padding: 5px;
	box-sizing: border-box;
	float: left;
	margin: 0 10% 0 0;
}

#message-to-container {
	height: 150px;
}

#message-to-container textarea {
	height: 100px;
	margin: 0 0 20px 0;
	display: block;
	box-sizing: border-box;
	width: 100%;
	resize: none;
}

#message-to-container button {
	height: 30px;
	display: block;
	box-sizing: border-box;
	width: 100%;
}

#message-from-outer {
	width: 45%;
	background-color: #e9e9e9;
	padding: 5px;
	box-sizing: border-box;
	float: right;
}

#message-from-container {
	height: 150px;
	overflow: auto;
}

</style>
</head>

<body>

<button id="open-child-window">Open Child Window</button>

<div id="messages-container">
	<div id="message-to-outer">
		<h6>Send Message to Child</h6>
		<div id="message-to-container">
			<textarea id="message"></textarea>
			<button id="send-message-child">Send Message to Child</button>
		</div>
	</div>
	<div id="message-from-outer">
		<h6>Messages from Child</h6>
		<div id="message-from-container"></div>
	</div>
</div>

<script>

// This will hold the handle of the child window
var __CHILD_WINDOW_HANDLE = null;

$("#open-child-window").on('click', function() {
	__CHILD_WINDOW_HANDLE = window.open('child.html', '_blank', 'width=700,height=500,left=200,top=100');
console.log("__CHILD_WINDOW_HANDLE :" + __CHILD_WINDOW_HANDLE);

	$("#messages-container").show();
	$("#open-child-window").hide();
});

$("#send-message-child").on('click', function() {
	if($.trim($("#message").val()) != '') {
		__CHILD_WINDOW_HANDLE.ProcessParentMessage($("#message").val());
		$("#message").val('');
	}
});

function ProcessChildMessage(message) {
	$("#message-from-container").append('<div>' + message + '</div>');
}

</script>

</body>
</html>
<!--
child.html
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">

#messages-container {
	width: 600px;
	margin: 40px auto 0 auto;
	overflow: hidden;
}

h6 {
	margin: 0 0 20px 0;
	text-align: center;
}

#message-to-outer {
	width: 45%;
	background-color: #f8f8f8;
	padding: 5px;
	box-sizing: border-box;
	float: left;
	margin: 0 10% 0 0;
}

#message-to-container {
	height: 150px;
}

#message-to-container textarea {
	height: 100px;
	margin: 0 0 20px 0;
	display: block;
	box-sizing: border-box;
	width: 100%;
	resize: none;
}

#message-to-container button {
	height: 30px;
	display: block;
	box-sizing: border-box;
	width: 100%;
}

#message-from-outer {
	width: 45%;
	background-color: #e9e9e9;
	padding: 5px;
	box-sizing: border-box;
	float: right;
}

#message-from-container {
	height: 150px;
	overflow: auto;
}

</style>
</head>

<body>

<div id="messages-container">
	<div id="message-to-outer">
		<h6>Send Message to Parent</h6>
		<div id="message-to-container">
			<textarea id="message"></textarea>
			<button id="send-message-parent">Send Message to Parent</button>
		</div>
	</div>
	<div id="message-from-outer">
		<h6>Messages from Parent</h6>
		<div id="message-from-container"></div>
	</div>
</div>

<script>

$("#send-message-parent").on('click', function() {
	if($.trim($("#message").val()) != '') {
		window.opener.ProcessChildMessage($("#message").val());
		$("#message").val('');
	}
});

function ProcessParentMessage(message) {
	$("#message-from-container").append('<div>' + message + '</div>');
}

</script>

</body>
</html>

14. DOM (Document Object Model)

  1. document.createElement
  2. document.createTextNode
  3. document.body.appendchild
  4. document.getElementById
  5. document.getElementsByClassName
  6. document.getElementsByTagName
  7. document.querySelector
  8. document.querySelectorAll

createElement && createTextNode && appendChild

<!doctype html>
<html>

  <head>
    <script>
      window.onload = function(){
      var eNode = document.createElement("p");
      var tNode = document.createTextNode("javaScript & node.js");
      var hNode = document.createElement("h1");
      var tNode1 = document.createTextNode("javaScript & node.js");
      eNode.appendChild(tNode);
      hNode.appendChild(tNode1);
      eNode.appendChild(hNode);

      document.body.appendChild(eNode);
      };
    </script>
    
  </head>

  <body>

  </body>
</html>
<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a P element with some text.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var para = document.createElement("P");
  para.innerText = "This is a paragraph.";
  document.body.appendChild(para);
}
</script>

</body>
</html>

getElementById

  • The getElementById() method returns the element that has the ID attribute with the specified value.
  • Returns null if no elements with the specified ID exists.

getElementsByClassName

  • The getElementsByClassName() method returns a collection of an element’s child elements with the specified class name, as a NodeList object.

getElementsByTagName

  • The getElementsByTagName() method returns a collection of an elements’s child elements with the specified tag name, as a NodeList object.

querySelector

  • The querySelector() method returns the first element that matches
  • a specified CSS selector(s) in the document.

querySelectorAll

  • The querySelectorAll() method returns all elements in the document
  • that matches a specified CSS selector(s), as a static NodeList object.

15. event

  • mouse, button, form, webpage load, focus, 양식전송
  • xxx.onclick = function(){}

이벤트 형식

xxx.onclick = function(){}
      | |   |    |
      | |   |    |---> event handler
      | |   |--------> 이벤트 연결
      | |-----------> event name(click)
      |-------------> event attribute(onclick)

이벤트 모델

DOM level 0

a. inline model

<html>

<head>

<script>
function headerClick(){
console.log("click");

//이벤트 제거
var ce = document.getElementById("cEvent");
console.log(ce);
ce.onclick = null;
}
</script>

</head>

<body>

<style>
#cEvent{
width : 200px; height:100px;
line-height:100px;
text-align:center;
font-size:1.2em;
background-color:#00f000;
color:#000FFF;
font-weight:bolder;
}
</style>

<div id="cEvent" onclick="headerClick();"> Click Event </div>

</body>

</html>

b. basic model

DOM level 2

a. ms handler model b. standard handler model

16. advanced event

17. JQuery 개요 및 기본문법편

19. 객체생성, 삽입, 이동, 복제

  • $() 문서객체생성

Misc

Closures

//for (var index = 1; index < 8; index++) {
//    setTimeout(
//	function(){
//	    console.log(`after ${index*2} second(s): ${index}`)},
//	index*1000)
//}

//for (var index = 1; index < 8; index++) {
//    (function(index) {
//	 setTimeout(
//	     function(){
//		 console.log(`after ${index*2} second(s): ${index}`)},
//	     index*1000)}
//    )(index)
//}

for (let index = 1; index < 8; index++) {
    setTimeout(
	function(){
	    console.log(`after ${index} second(s): ${index}`)},
	index*1000)
}

Number

4 Useful JavaScript Statements you should know

  1. Empty Statement(;)
  2. The debugger Statement
  3. Labeled Statement
  4. The with Statement

JQuery

  • jQuery is open source, cross-browser JavaScript library
  • designed to simplify the client-side scripting of HTML.
  • jQuery’s syntax is designed to make it easier
  • to navigate a document,
  • select DOM elements,
  • create animations,
  • handle events,
  • and develop Ajax applications.

sign

  • $ sign is just an alias for jQuery, a short version of jQuery.
  • The idea is that everything is done with this one global symbol.

Misc

AJax(Aynchronous JavaScript And XML)

  • AJAX is a developer’s dream, because you can:
  • Update a web page without reloading the page
  • Request data from a server - after the page has loaded
  • Receive data from a server - after the page has loaded
  • Send data to a server - in the background

What is AJAX

  • AJAX = Asynchronous JavaScript And XML.
  • AJAX is not a programming language.
  • AJAX just uses a combination of:
  • A browser built-in XMLHttpRequest object (to request data from a web server)
  • JavaScript and HTML DOM (to display or use the data)

<a ref=”#” id=”size-12”> 12 </a>

textNode vs tagNode

  • createElement -> node
  • createTextNode -> text

coercion

  • ​the action of making somebody do something that they do not want to do,
  • using force or threatening to use force

ES6

  • ECMAScript 6 is also known as ES6 and ECMAScript 2015.
  • Some people call it JavaScript 6.
  • This chapter will introduce some of the new features in ES6.
  • JavaScript let
  • JavaScript const
  • JavaScript Arrow Functions
  • JavaScript Classes
  • Default parameter values
  • Array.find()
  • Array.findIndex()
  • Exponentiation (**) (EcmaScript 2016)