Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_11/Lab_11.html
Wednesday, January 8, 2020
Lab 11 AJAX load
In this lab, I used jQuery AJAX, which assists in loading data from a server without a browser page refresh, to load a text file onto the HTML file when the user presses the button. To do this, I first downloaded the zip file given to me for the lab. Secondly, I opened my HTML file to see what was inside. I had my <html>, <head>, <meta>, <title>, <script>, <body>, <div>, and <button> tags as a preset for me. Thirdly, I typed in <div id=”head”><h1>Lab 11</h1><h2>Wei Jian Zhen</h2><h3>1/8/2019</h3></div> to make the heading of the lab. Fourthly, I surrounded the <div id=”div1”> <h2>Let jQuery AJAX Change This Text</h2></div> and <button>Get External Content</button> with <div id="main"></div> to style the content. Next, I created a CSS file to style the webpage. I typed inside the CSS file html {min-width: 100%; min-height: 100%; max-width: 100%; max-height: 100%;} and body {width: 100%; height: auto; background-color: cyan;} to make the html document responsive to any changes to the document’s width or height and have a background color of cyan for the page. After that, I typed in #main {width: 50%; height: auto; margin: 0 auto; text-align: center; background-color: aquamarine; border: 1px solid #000000;} to make the <div id="main"></div> half its width, have proportionate height in response to the width, center the div, center the text and button inside the div, have a aquamarine background color, and a thin black border around the div. Afterwards, I typed in #main button {font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; font-size: 32px; background-color: ghostwhite; color: black; border: 1px solid #000000; margin: 5px; cursor: pointer;} to style the button inside the div with a font family of Lucida Granda, font size of 32 pixels, background color of ghostwhite, text color of black, a black thin border, space around the button, and to turn the cursor into a pointer. Then I typed in #head { text-align: center;} to center the heading with the <h1>, <h2>, and <h3> tags inside. Furthermore, I typed in #div1 {text-align: center;} to center the text above the button. Lastly, I changed the JavaScript inside one of the <script> tags which loads the txt file to the HTML document. JQuery AJAX is useful to web designers because it allows web designers to change text almost instantaneously without changing the HTML document and reloading the webpage, as that process is slower.
Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_11/Lab_11.html
Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_11/Lab_11.html
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment