WEB UI 6주 JavaScript Part2 (part 2)

1. JavaScript

2.
part

3. 2

4. 목표
Javascript의

5. Object,

6. Array

7. 를

8. 다룰

9. 줄

10. 안다.

12.
HTML

13. 태그를

14. 동적으로

15. 추가할

16. 수

17. 있다.

18. Object,

19. Array

20. ?

21.
오늘

22. 배우는

23. 걸

24. 어디에

25. 써먹나?
대부분의

26. 콘텐츠는

27. 리스트형태이며,

28.
자주

29. 변경거나

30. 업데이트

31. 된다.

32.
!
즉,

33.
서버로부터

34. 데이터를

35. 받고

37.
필요시

38. 데이터를

39. 가공해서

41.
본문에

42. 추가하거나

43. 업데이트

44. 한다.

45. 변 수

46. JavaScript의

47. 타입에는

49.
primitive

50. type과

51. reference

52. type이

53. 있음

56. primitive

57. type,

58. reference

59. type
primitive

60. type

62.
null,

63. undefined,

64. boolean,

65. Number,

66. String

67.
#

68. typeof

69. 연산자로

70. primitive

72. 타입인지

73. 확인

74. 할

75. 수

76. 있다

77. (null은

78. Object로

79. 나옴).

80.
!
!
reference

81. type

82.
object,

83. array..

84.
#

85. instanceof로

86. 타입을

87. 확인할

88. 수

89. 있다.

90. primitive

91. ,

92. reference
primitive

94.
var

95. str

96. =

97. “i

98. love

99. NEXT”;

100.
var

101. copyStr

102. =

103. str;

105. str

106. =

107. “i

108. love

109. H-Square”;

110.
console.log(copyStr);

111.
!
!
reference

112.
var

113. str

114. =

115. new

116. Object();

117.
var

118. copyStr

119. =

120. str;

121.
str.name

122. =

123. “next”;

124.
console.log(copyStr.name);

125.
값이

126. 복사될

127. 뿐이다.
값이

128. 같이

129. 참조(공유)되고

130. 있다

131. O b j e c t

132. var myCar = new Object();!
소스코드 참고 :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects?redirectlocale=en-USredirectslug=JavaScript%2FGuide
%2FWorking_with_Objects
myCar[make] = Ford;!
myCar[model] = Mustang;!
myCar[year] = 1969;!
myCar.make = Ford;!
myCar.model = Mustang;!
myCar.year = 1969;!

133. var myCar = {};!
소스코드 참고 :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects?redirectlocale=en-USredirectslug=JavaScript%2FGuide
%2FWorking_with_Objects
myCar[make] = Ford;!
myCar[model] = Mustang;!
myCar[year] = 1969;!
myCar.make = Ford;!
myCar.model = Mustang;!
myCar.year = 1969;!
자주쓰는

134. 똑같은

135. 방식.

136. for in

137. (Iterating)
for ( var i in myCar) {!
console.log('key : ' + i + ', ' + 'value : ' + myCar[i]);!
}!
//result!
key : make, value : Ford!
key : model, value : Mustang!
# 참고.
hasOwnProperty() 메소드를 통해서 좀더 효율적인 객체의 원소를 순회할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

138. delete!
myCar.make = null; ( 틀린 방법 )!
myCar.make = undefined; ( 틀린 방법 )!
!
delete myCar.make; ( 올바른 방법 )!

139. 숙제5

140.
다음

141. object를

142. 인자로

143. 받아

144. object의

145. 모든

146. 값을

147. 출력하는

149. function
을

150. 만드세요.

151.
obj = {
name : ‘javascript’,
age : 14,
type : ‘dynamic’
};

152. A r r a y

153. var myCar = new Array();!
var myCar = Array();!
var myCar = new Array(2);!
var myCar = Array(2);!

154. var myCar = new Array(2);!
var myCar = new Array(‘2’);!
그러나..

155. 아래

156. 두

157. 개는

158. 완전히

159. 다르다

160. var myCar = [];
var myCar = [1,2,3,‘apple’];
자주쓰는

161. 똑같은

162. 방식.

163. var myCar = [];!
!
myCar.length = 10000;!
!
console.log(myCar.length);!
Javascript

164. Array의

165. 크기는

166. 동적으로

167. 변한다.

168. [1,2,3,4,5,6]
Array

169. methods.

170.
반환값을

171. 확인해보자.
push(7)
pop()shift()
unshift(0)
slice(2,4)

172. splice는

173. 막강하며

174. 원본

175. 배열의

176. 값을

177. 쉽게

178. 변경할

179. 수

180. 있다
[1,2,3,4,5,6]
myNum.splice(3,2,33,55);
splice(index, count_to_remove, addelement1, addelement2, ...)

181. var colors = ['red', 'green', 'blue'];!
!
for (var i = 0; i colors.length; i++) {!
console.log(colors[i]);!
}!
Array

182. Iterating

183.
소스코드:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects?redirectlocale=en-USredirectslug=JavaScript%2FGuide
%2FPredefined_Core_Objects

184. var
a
=
['a',
'b',
'c'];
a.forEach(function(item){
console.log(item);
});
easy

185. Iterating

186. -

187. forEach

188.
array를

189. 순회하면서

190. 무언가를

191. 한다

192. var
a
=
['a',
'b',
'c'];
var
result
=
a.map(function(item){
return
item+item;
});
!
console.log(result);
easy

193. Iterating

194. -

195. map

196.
array를

197. 순회하면서

198. 값을

199. 조작하여

200. 새로운

201. array를

202. 반환한다.

203. var
a
=
[123,421,3,31,24,55,32];
var
result
=
a.filter(function(item){
return
item
%
2
===0;
});
!
console.log(result);
easy

204. Iterating

205. -

206. filter

207.
array를

208. 순회하면서

209. 값을

210. 특정조건에

211. 맞는

212. 새로운

213. array를

214. 반환한다.

215. 숙제6

216.
array

217. 중에

218. 짝수

219. 숫자타입

220. 원소만으로

221. 구성된

222. 배열을

223. 만드는
userFunction

224. 함수를

225. 만드세요.

226.
var arr = [23,-2,23.4 , “324”, 333, 34, 1000,20];
userFunction(arr); // [-2, 34, 1000, 20]

227. End
;-D