스크립트정리.html
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<input type="text" id="yh" value="흥칫뿡">
</body>
<script>
//var ggg = "우리로제님";
window.ggg = "우리로제님"; // 전역변수는 window 객체의 속성을 선언하는 것과 같음
function f_check(){ // 전역함수를 선언하는 것은 window객체의 메소드를 선언하는 것과 같음
// alert("나 지금 뭐하닝?");
console.log(this) // ? - > window가 뜨게됨
}
alert(window.ggg);
window.f_check();
//------------------------------------------------------------------------------------------------
// console.log(yh) // id값을 직접 쓸 수 있지만 권장하지 않음. // 아주 쪼매한 샘플프로그램 허락(코드를 간결)
// alert(yh.value);
//------------------------------------------------------------------------------------------------
//alert("아무개".substring(1,2)); // 원시타입은 . 찍으면 wrapper클래스로 몰래변환( object로 바뀜/여기는 String)
//------------------------------------------------------------------------------------------------
/*
var v_yh = document.querySelector("#yh").value; // 요거이 추세, 성능 쪼메 손해, 가독성 업
//v_yh="요즘 나는 멋짐";
v_yh.value="요즘 나는 멋짐";
alert(document.querySelector("#yh").value); // ? -> 흥칫뿡 에서 바뀌게 됨!
*/
//------------------------------------------------------------------------------------------------
/*
var ref = ["가나","다라","마바","사하"];
var rdf1 = ref; // 값을 참조 (reference)-> C언어의 포인터 역할, call by referece
ref1[2]= "메롱";
rdf[1]= "짱";
alert(ref[2]); //?
alert(rdf1[1]);
*/
//------------------------------------------------------------------------------------------------
// 꼭 알아야 하는 것만
// 읽기/쓰기
// 변수 타입 string(String), number(Number), boolean(Boolean), null, undefined, object(Array, JSON)
// ㄴ 원시타입
// 버젼 ES5(가장 많이 쓰이는) / ES6(2015년말) ~ ES8, https://caniuse.com/ 에서 브라우저 호환성 확인 필요
// 자바랑 다른점 (원래 전혀 관계없음), C-언어의 문법 훔침
// 정적언어 vs 동적언어
// [ + ] 는 문자열 더하기, 숫자더하기가 있지만, [ - * / ] 는 산술연산 밖에 없음
/*----------------------------------------------
var v_str = "337" + 272; // 272(number) => string
alert(v_str);
var v_str = "337" - 272; // 272(number) => string
var v_check = "272" -0; // 원래는 문자 뜨는데 -0 해서 숫자로 바뀜, 곱하거나 나눠도 동일!
alert(typeof(v_check));
var v_str = "337" - 272; // 272(number) => string
var v_check = "철수" /1; // NaN
alert(v_check);
-------------------------------------------------*/
//----------------------------------------------------------------------
// 모든 문자열은 공백만 빼고 다 true
// 모든 숫자는 true, 0은 false
/*
var isCheck = !0; // !0 = true , 외국아들이 요따위 true를 표현, 순수하게 글자를 아끼기 위함
if(0){ // "" 이건 false 임! "일반 문자는" true / 100 true /
alert("글허탕");
}else{
alert("아닐껄");
}
*/
//----------------------------------------------------------------------
// 복사(call by value)와 참조(call by reference), 무조건 알아야 함
// 원시타입(primative type, string, number, boolean) , 객체타입(Object)
/* call by value 두 변수가 완전히 따로 놂
var hj = "혜정";
var jy = hj; // 복사가 이루어짐
jy = "지영만세";
hj = "혜정만세";
alert(hj); // ? -> 혜정
alert(jy); // ? -> 혜정
*/
</script>JSON.html
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<div id="disp"></div>
<!-- <div style="width: 200px; height: 200px; border: 1px solid pink"></div> -->
</body>
<script>
// 객체의 속성에 배열식 접근법(문법)이 있고, 잘쓰면
// 대박 편함을 기억함다!!!!!!
var v_disp = document.querySelector("#disp");
// 확인 문제
var v_members = [
{name:"로제", level:"code0"},
{name:"제니", level:"code1"},
{name:"리사", level:"code3"},
{name:"슬기", level:"code2"},
{name:"미미", level:"code1"},
{name:"아린", level:"code3"},
{name:"코코", level:"code2"}
];
var v_position = {
code0:"회장님",
code1:"사장님",
code2:"전무님",
code3:"하늘님"
}
var v_tbStr = "<table border=1>";
v_tbStr += "<tr><th>넘버</td><th>이름</th><th>직위</th></tr>";
for(var i=0; i<v_members.length; i++){
v_tbStr += "<tr>";
v_tbStr += "<td>" + (i+1) + "</td>" ;
v_tbStr += "<td>" + v_members[i].name + "</td>" ;
v_tbStr += "<td>" + v_position[v_members[i].level] + "</td>" ; // v_position[v_members[i].level]
v_tbStr += "</tr>";
}
v_tbStr += "</table>";
v_disp.innerHTML = v_tbStr; // 누네띠넹
// 이게 조금더 권장방식 , 빠름
// alert(document.querySelector("div").style.width); // 읽기
// document.querySelector("div").style.backgroundColor="black";// 쓰기
// 아래 방식도 알아야만함!
// alert(document.querySelector("div").style["width"]); // 읽기
// document.querySelector("div").style["backgroundColor"]="pink";// 쓰기
//JSON (JavaScript Object Notation 자바스크립트 객체 표기법)
// 데이터 통신의 거의 표준 포맷으로 자리잡아 가고 있고,
// 객체 지향 DB의 데이타 원형으로 사용되고 있음 -> 모르면 좌절
// 제이슨 스타뎀
// { } 만 제이슨이당은 좋지 않고 [ ] 도 제이슨이당 식으로 생각하는 것이 정신건강에 이롭
/*
var name = "fbi";
var minji ={
name:"김철수", // "name":"김철수", << 키값은 자동으로 문자열 처리됨 변수명이 아니게 됨!
age:100,
alias:"이거 몰라도 되지용"
}
alert(minji.fbi);
*/
/*
var name = "fbi";
var minji ={
"name":name, // 이건 name 값에 담아서 변함
"age":100,
"alias":"이거 몰라도 되지용"
}
alert(minji.name);
*/
/*
var name = "fbi";
var minji ={
[name]:name, // [] 사용 배열식 접근법(엄청 엄청 중요, 고급으로 넘어가)
"age":100,
"alias":"이거 몰라도 되지용"
}
alert(minji.fbi);
*/
/* 코드짤때 이렇게 하는 게 편함
var minji2 = {}; // 빈 객체 생성 new Object()와 같음
minji2.name = "민지";
minji2.age = 100;
minji2.alias = "이거 몰라도 됨";
*/
</script>파라미터.html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<script>
// 변수명으로 쓸 수 있는 특수문자는? _ , $
// 네임스페이스를 주면 이름 충돌없이 잘 쓸 수 있음( 규모가 커지면 필수 )
var $ = {}; //빈객체 네임스페이스용
// callback 함수는 잘 쓰려면 몇개 만들어 봐야함. 우리 언젠가 잔뜩 만들 것임
$.each = function(p_arr,p_cb){
for(var i=0; i<p_arr.length; i++){
p_cb(i,p_arr[i]);
}
}
/*
// 관리자 입장에서 관리 가능
var Soyoung = {}; //빈객체 네임스페이스용
Soyoung.each = function(p_arr,p_cb){
for(var i=0; i<p_arr.length; i++){
p_cb(i,p_arr[i]);
}
}
*/
/*
function each(p_arr,p_cb){
for(var i=0; i<p_arr.length; i++){
p_cb(i,p_arr[i]);
}
}
*/
var v_testData = ["로제","리사","제니","슬기"];
each(v_testData, function(p_arg1,p_arg2){
alert(p_arg1 + " " + p_arg2);
});
//--------------------------------------------------------------------------------
// JavaScript는 일급언어 (first class language)로 함수의 매개변수로 함수를 넘길 수 있음
// 함수의 매개변수로 넘어간 함수를 멋진말로 call back(단순히 뒤에 불린다는 의미) 함수라고 부름
/*
function f_merong(p_arg){ // 매개변수로 모든걸 넘길 수 있음
// alert(p_arg);
// alert(p_arg.name);
// alert(p_arg.grade);
alert(p_arg());
}
// f_merong("문자열");
// f_merong(272);
// f_merong([1,2,3,4]); // 배열인 경우 자동으로 toString() 메서드 실행되서 문자열로 됨
// var v_json = {name:"제니",grade:"천재"}
// f_merong(v_json)
s
// f_merong({name:"제니",grade:"천재"}); //[object Object] 객체니까! / p_arg = {name:"제니",grade:"천재"}
f_merong(function(){return "완존메롱";}); // p_arg = function(){return "완존메롱";}
*/
//---------------------------------------------------------------------------------------
//f_check();
/*
function f_check(){ // 에러가 안남, hoisting(올리깅), 여러분 몰래 약간의 최적화를 함 , 선언부를 위로올림
alert("지니 메렁");
}
*/ // 이게 공식 함수 선언 문법
//return"지니"; //Illegal return statement
/*---------------------------------------------------------------------------------
var sumn = 1+ 2+ 4+ 8; // 오른쪽에 있는 실행한 결과가 1개로 합쳐지는 걸 보통 표현식(실행문)이라고 부름
var f_check = function(){ // 요게 에러가 나는 이유는 Expression(표현식이기 때문, 정식 선언문이 아님)
alert("리사메롱");
return "제니메렁"; // function 끝에는 요게 생략되어있음/ 함수의 종료를 알리는! // 리턴은 꼭 함수안에서만!!
} // 이게 실행문 함수 선언
alert(f_check());
// 함수 이름을 함수 포인터 (FP -> Function Pointer) 라고 부름
---------------------------------------------------------------------------------*/
</script>
애매한this.html
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<input type="button" value="누를까앙?" id="myBtn">
</body>
<script>
// document.write("<h1>우리반은 아침에 늦게 오는 거 빼면 최공!</h1>")
/*
var myLog = function(p_arg){ // 함수를 이해하고 있는 사람의 코드!
document.write(p_arg);
}
*/
/*
var myLog = document.write; // 함수 포인터를 이해하고 있는 사람의 코드
*/
var myLog = document.write.bind(document); // 함수 포인터 내부도 추측할 수 있는 사람의 코드
myLog("<h1>진영을 정비하시옹</h1>")
function f_Param(p_arg){
document.write("<h2>잘쓰면 좋을 텐뎅</h2>"); // 버튼 누르면 이전내용 지워지고 새롭게! 짠!
console.log(this)
alert("넘어온 값은:" + p_arg + " 인감");
}
var vMyBtn = document.querySelector("#myBtn");
vMyBtn.addEventListener("click",f_Param.bind({name:"배트맨"},"로빈"));
// bind는 함수를 새로 만들고 그 포인터를 리턴해줌 / 내부적 함수 포인터를 만들어서 실행 꼭 알기 이게 중고급~ 올라가는!
// 자주 쓰일 상황이 발생하진 않지만, 해당 상황이 발생했을 때 모르면 심하게 좌절하게 됨
// 버튼을 눌러서 실행되는 것은 bind만 가능! call이나 apply는 자동실행됨
// 애매한 this(이것, 또는 나), 맥락(context)을 봐야 안다고 함
// call,apply,bind 라는 this를 지정할 수 있는 있는 걸 맹글어 줌
// 자바스크립트에선 함수포인터라는 말에서 알 수 있듯 function(함수)도 객체임
function f_this(p_arg1,p_arg2){
console.log(this,p_arg1,p_arg2); //? => Window {window: Window, self: Window, document: document, name: '', location: Location, …}
}
// window.f_this(); //콜
var 서준 = {name:"Seo Jun"}; // window와 메롱이라는 속성이 다나옴!
var batMan = {name:"배트맨",friend:"로빈"};
// f_this(); // => Window {window: Window, self: Window, document: document, name: '', location: Location, …}
// f_this.call(서준); // => {name: 'Seo Jun'}
// f_this.call(서준, "목요일", "힘드렁"); // => {name: 'Seo Jun'} '목요일' '힘드렁'
// f_this.apply(batMan); // => {name: '배트맨', friend: '로빈'}
// f_this.apply(batMan,["배열에","담아서"]); // => {name: '배트맨', friend: '로빈'} '배열에' '담아서'
// call 과 기능은 같으나, 매개변수 값을 꼬옥 배열에 담아서 한번에 보내야함
// 서준.메롱 = f_this;
// 서준.메롱();
</script>
안녕하세요! 초보개발자 공부 시작!