Web Programming ๐ŸŒ/Front-End ๐Ÿฆธ๐Ÿป‍โ™‚๏ธ

Web Programming ๐ŸŒ/Front-End ๐Ÿฆธ๐Ÿป‍โ™‚๏ธ

Javascript OOP in RSVP website project

I learned how to build the object in javascript. This is our constructor for the data input. From the HTML, I got the values from user, and store them in this object. So, I don't have to make other array for store these data. It is important to have this structure in project. Our team decided to put the values in local storage temporaily like this. stringfy function is what I made in the object...

Web Programming ๐ŸŒ/Front-End ๐Ÿฆธ๐Ÿป‍โ™‚๏ธ

Javascript DOM "radio checked"

I used the radio check to change the image. Here is my html file. The is the webpage has a boy image. I want to change the image of eye, mouth and nose. As we can see, the image should be changed when I check another radio. I put the "onclick=" to call the javascript function. Each function has two var. "var ~Radio" is for array to get Node from html file. "var ~Image" includes the node from in ..

Web Programming ๐ŸŒ/Front-End ๐Ÿฆธ๐Ÿป‍โ™‚๏ธ

Javascript Event Exercise to Move Picture

This exercise is for learning how to use Javascript event work on web page. I made the web page for moving picture. Create a document that has a small image of myself. (It should be hidden at first) Regardless of the position of the cursor, the image must appear with the center of the position of the mouse cursor at the time. Included the external CSS file to make red heading on my web page. Her..

Web Programming ๐ŸŒ/Front-End ๐Ÿฆธ๐Ÿป‍โ™‚๏ธ

Javascript Event Object, Apr/10/2023

Today, I leanred about the Event Object in Javascript. In Javascript, the browser will construct an event object that contains information about the event when an event is triggered. We already know there are: e.type: the type of the event (click, focus, blur) e.target: the element that triggered event e.pageX: the horizontal coordinate of the mouse pointer upon click e.pageY: the vertical coord..

Web Programming ๐ŸŒ/Front-End ๐Ÿฆธ๐Ÿป‍โ™‚๏ธ

Javascript Events, Apr/08/2023

Today, I did some Javascript exercise. In the first exercise, I moved some object to see the Javascript events. Here is the picture description. To change the posistion of mustache and eye, we are gonna put some events in Javascript code. Here is my code! In Javascript code, we get the id element, and store it in const l and const m. const l is about the mustache. const m is about the eyes. By a..

Web Programming ๐ŸŒ/Front-End ๐Ÿฆธ๐Ÿป‍โ™‚๏ธ

Javascript Event Handling, Apr/5/2023

Today, I learned basic event handling in Javascript. This picture shows you how Javascript event handling works. When we defined the event handler and registered it, we includes the event trigger in the code. When user or page action triggers the event, the event executes by Javascript. There are three types of events. Mouse events Keyboard events. Form events. This is just the reference we comm..

Web Programming ๐ŸŒ/Front-End ๐Ÿฆธ๐Ÿป‍โ™‚๏ธ

Position of Elements, DOM family in Javascript, Apr/5/2023

Today, I leanred is about the element postition in Javascript. In the Javascript, the posisiton property is used to specify the type of positioning. absolute: The element is removed from normal flow and positioned in relation to its nearest positioned ancestor (if no positioned ancestor, then in relation to the browser window). fixed: The element is fixed in a specific position in the window eve..

Web Programming ๐ŸŒ/Front-End ๐Ÿฆธ๐Ÿป‍โ™‚๏ธ

Modify DOM in Javascript, Apr/4/2023

Modifying the DOM Changing an Element's style Changing the Content of any given element. DOM manipulation Methods How can we change an element's style?? The first method is by directy change the properties of the style property for that element. Here is the example: The second method is by changing its class using the className or classList properties. Like this: There was an exercise to get use..

Web Programming ๐ŸŒ/Front-End ๐Ÿฆธ๐Ÿป‍โ™‚๏ธ

Javascript DOM, Apr/3/2023

What is "DOM" in javascript?? ๐Ÿคจ The DOM is an abstract model that defines the interface between HTML documents and application programs. An API What I understand is that HTML properties can be used as values in Javascript. In this picture, we can see the "type" and "address" are the values in Javascript. There is the picture like tree to represent the structure of DOM: I can see the inheritance ..

KB0129
'Web Programming ๐ŸŒ/Front-End ๐Ÿฆธ๐Ÿป‍โ™‚๏ธ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก