유다시티 자바스크립트 2일차

오늘은 지쳐서 시간이 없어서 별로 못했다. 배운것은 다음과 같다.

오브젝트는 손과 같다. 무언가를 해준다.

– 자바스크립트 오브젝트

var bio = {
“name” : “hkmoon”,
“role” : CEO,
“contact info” : “xxx@gmail.com”
“picture url” : “http://www.crackerwax.com/wp-content/uploads/2013/05/spock-new.jpg”
“welcome message” : “welcome to the genius world.”
“skills” : “Business, English, Programming, 우주여행”
}

요것이 오브젝트! 어렵지 않다.
쌍쌍으로 이루어져 있다. 욕 아니다..
컬 브라킷으로 감싸준다. {} 쭈글이..

– 오브젝트 접근할때는 닷(.)을 이용한다.

bio.name 하면 hkmoon 접근

– 브라켓 노테이션!

bio[“property”] 로 hkmoon에 접근할 수도 있다.

– 닷 노테이션이나 브라켓 노테이션으로 선언하고 화면에 표시하기.

var work = {}; //쭈글이를 만들어 준다.
work.position = “Consultant”;
work.company = “XPC”;
work.years = “2 years”;
work.city = “Seoul”;

var education = {};
education[“school”] = “HUFS”; // [] 브라켓 노테이션으로 선언한다.
education[“city”] = “Imun-dong”;

$(“#main”).append(work.position); // 제이쿼리로 화면에 보여주기.
$(“#main”).append(education.school);

—————————————————————————–

Json

드디어 Json이다. JavaScript Object Notation이라는 뜻이란다.
오브젝트형 데이터 형식이다. 웹에서 종종 이러한 형태의 데이터를 뱉어낸다.

http://jsonlint.com/

이 사이트는 json의 문법적 오류를 찾아준다.

lint 란 문법적인 오류를 자동으로 찾아주는 것을 말한다. 서브라임 텍스트와 같은 것들은 이러한 일들을 해준다.

뭐 어쨌든 제이손?의 세계로 빠져들어가보기로…

Json은 이렇게 생겼다.

var education = {
“school”: [
{
“major”: “BA”,
“school”: “HUFS”,
“city”: “Seoul”
},

{
“major”: “BA”,
“school”: “HUFS”,
“city”: “Seoul”
}
]
}

무지…헷갈리지 않는가? 가만히 보면 “scholl” 오브젝트 뒤로 [], {}, [], {} 가 서로 번갈아 가며 반복되는 것을 알 수 있다.

– black의 헥스코드는 “#000000” 이다.

오늘 왜 이렇게 힘들지…

요건 자바스크립트의 정규식이다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

/

아래 코드는 html의 코드를 인젝션 하는것을 막기 위해 태그들 < 또는 > 를 삭제하는 자바스크립트 펑션이다.

——————————————————————————————————-
var html = ‘‘;

var charEscape = function(_html) {
var newHTML = _html;
// How will you make sure that newHTML doesn’t contain any < or > ?
// Your code goes here!
newHTML = _html.replace(/ newHTML = newHTML.replace(/>/g, 0);

// Don’t delete this line!
return newHTML;
};

// Did your code work? The line below will tell you!
console.log(charEscape(html));

————————————————————————————————–

몇일 지나서 다시 올린다.

for 구문을 function에 넣은 코드이다.

function displayWork (argument) {

for(job in work.jobs){
$(“#workExperience”).append(HTMLworkStart);
var formmattedEmployer = HTMLworkEmployer.replace(“%data%”, work.jobs[job].employer);
var formmattedTitle = HTMLworkTitle.replace(“%data%”, work.jobs[job].title);
var formmattedDates = HTMLworkDates.replace(“%data%”, work.jobs[job].dates);
var formmattedDescription = HTMLworkDescription.replace(“%data%”, work.jobs[job].description);
var formmattedWork = formmattedEmployer + formmattedTitle + formmattedDates + formmattedDescription;

$(“.work-entry:last”).append(formmattedWork);
}
}

———————————————————————————————————–

밑에 코드는 자바스크립트 오브젝트를 만들어 놓은것!

var bio = {
“name” : “MJH”,
“role” : “CEO”,
“contacts”: {
“mobile”: “010-****-****”,
“email”: “******@gmail.com”,
“github”: “jeehag”,
“twitter”: “@jeehag”,
“location”: “Seoul”
},
“welcomeMessage”: “Welcome to the genius world”,
“skills”: [
“awesomeness”,”hacking”, “business”, “fart”, “saving the universe”],
“bioPic”: “images/me.jpg”
}

var education = {
“schools”: [
{
“name”: “III”,
“city”: “Xwon”,
“degree”: “Masters”,
“majors”: [“III”],
“dates”: 2005,
“url”: “http://example.com”
},
{
“name”: “XUFS”,
“city”: “Seoul”,
“degree”: “Masters”,
“majors”: [“BA”],
“dates”: 2010,
“url”: “http://example2.com”
}
],

“onlineCourses”: [
{
“title”: “Intro to HTML, CSS”,
“school”: “Udacity”,
“dates”: “2014”,
“url”: “http://www.udacity.com”
}
]
}

var work = {
“jobs”: [
{
“employer”: “xriize”,
“title”: “intern”,
“dates”: “2012”,
“description”: “made some app”
},
{
“employer”: “XPC”,
“title”: “consultant”,
“dates”: “2013”,
“description”: “education job”
}

]

}

var projects = {
“projects”: [
{
“title”: “Lstream”,
“dates”: “2012”,
“description”: “Local Stream for users”,
“images”: [
“http://thelstream.com/wp-content/uploads/2012/05/thelstreamf2.png”,
“http://40.media.tumblr.com/9f49644ba37178a326ceda0b75f7a228/tumblr_mzbjtjJob51rfj2oeo1_400.jpg”
]
}
]
}

—————————————–

아래는 제이쿼리 이벤트 오브젝트에 관한 글이다. 시간날 떄 읽자

제이쿼리 이벤트 오브젝트

아래는 자바스크립트 스코프에 관한 글이다.

자바스크립트 스코프

—————————————-

흠냐 계속이다.. 정리한 시간이 맨날 없는데 공부할 시간도 그래도 조금씩 하고 있다.

혼잡한 포스팅이라 미안한데 자바스크립트를 배우면서 남기는 흔적이라고 생각하자. 도움이 되는 부분이 있으면 다행!

– 요 이상하게 생긴 코드가 제이쿼리 코드이다. 페이지를 누르면 해당 좌표를 콘솔 로그에 뿌려준다.

$(document).click(function(loc) {

var x = loc.pageX;
var y = loc.pageY;

logClicks(x,y);

});

쿨~~!

– 아래 코드는 제이손에 접근하여 포 구문으로 제이손을 뿌려주는 펑션을 만들어 본것이다. 리턴 값을 가지고 있다.

var work = {
“jobs”: [
{
“employer”: “Udacity”,
“title”: “Course Developer”,
“location”: “Mountain View, CA”,
“dates”: “Feb 2014 – Current”,
“description”: “Who moved my cheese cheesy feet cauliflower cheese. Queso taleggio when the cheese comes out everybody’s happy airedale ricotta cheese and wine paneer camembert de normandie. Swiss mozzarella cheese slices feta fromage frais airedale swiss cheesecake. Hard cheese blue castello halloumi parmesan say cheese stinking bishop jarlsberg.”
},
{
“employer”: “LearnBIG”,
“title”: “Software Engineer”,
“location”: “Seattle, WA”,
“dates”: “May 2013 – Jan 2014”,
“description”: “Who moved my cheese cheesy feet cauliflower cheese. Queso taleggio when the cheese comes out everybody’s happy airedale ricotta cheese and wine paneer camembert de normandie. Swiss mozzarella cheese slices feta fromage frais airedale swiss cheesecake. Hard cheese blue castello halloumi parmesan say cheese stinking bishop jarlsberg.”
},
{
“employer”: “LEAD Academy Charter High School”,
“title”: “Science Teacher”,
“location”: “Nashville, TN”,
“dates”: “Jul 2012 – May 2013”,
“description”: “Who moved my cheese cheesy feet cauliflower cheese. Queso taleggio when the cheese comes out everybody’s happy airedale ricotta cheese and wine paneer camembert de normandie. Swiss mozzarella cheese slices feta fromage frais airedale swiss cheesecake. Hard cheese blue castello halloumi parmesan say cheese stinking bishop jarlsberg.”
},
{
“employer”: “Stratford High School”,
“title”: “Science Teacher”,
“location”: “Nashville, TN”,
“dates”: “Jun 2009 – Jun 2012”,
“description”: “Who moved my cheese cheesy feet cauliflower cheese. Queso taleggio when the cheese comes out everybody’s happy airedale ricotta cheese and wine paneer camembert de normandie. Swiss mozzarella cheese slices feta fromage frais airedale swiss cheesecake. Hard cheese blue castello halloumi parmesan say cheese stinking bishop jarlsberg.”
}
]
};

// Your code goes here! Let me help you get started

var newArray = [];
function locationizer(work_obj){
for(job in work_obj.jobs){
var l = work_obj.jobs[job].location; // 제이손에 접근하는 부분.
newArray.push(l);
}

return newArray;
}

// Did locationizer() work? This line will tell you!
console.log(locationizer(work));

– 훔냐 제이손에 접근하기가 좀 어려운데..그나저나 나노라는 말이 좋다.

– LOG: [‘Mountain View, CA’, ‘Seattle, WA’, ‘Nashville, TN’, ‘Nashville, TN’] – 요런 메시지가 출력된다.