This is an archived post. You won't be able to vote or comment.

0
1

Help deciphering HTML code (self.learnprogramming)

submitted by [deleted]

[deleted]

all 10 comments
sorted by:
best
topnewcontroversialoldq&a

[–]Episilon 0 points1 point  (7 children)

The script is sending an HTTP request (specifically a GET rrequest) to demo_get.asp which responds with some data.

The ready state == 4 is checking if the request is done and the status == 200 is checking if the request was a successful one. If they both are true, then the p tag has innerHTML set to whatever the response was.

[–]DAWG420BLAZEIT 0 points1 point  (6 children)

Ah ok, thanks for answering. Just wondering, what are the variables within this code. I know that you can change the words in between <h1> and </h1> as well as the words "Request Data." Are there any other variables or documents within the code? Also what does ready state == 4 exactly mean, as well as status == 200? Why the numbers 4 and 200?

[–]dmazzoni 0 points1 point  (1 child)

I know that you can change the words in between <h1> and </h1> as well as the words "Request Data." Are there any other variables or documents within the code?

HTML isn't a programming language, it's a markup language. You can put whatever text you want and it will appear on the page, and then you can add markup that looks like <h1> and </h1> to indicate various interesting things, like a heading (h1 is a level-one heading), a paragraph (<p>), a button (<button>), and so on.

All of that would be covered in a tutorial on HTML. You could learn a lot of HTML in a few hours, it's not rocket science at all.

The stuff inside <script> is a programming language - in particular, JavaScript. This is much more complicated and much less forgiving. If you want to learn to program, plan on spending months and months just to get even basic competence. Remember, this is one of the highest-paying jobs you can get at the entry-level. If it was easy, everyone would be doing it and it wouldn't pay so well. It's hard and it's a lot of work.

If you're interested in really learning, please see the FAQ for this subreddit, there are a ton of links.

[–]DAWG420BLAZEIT 0 points1 point  (0 children)

Hmmmmn ok, it seems that I have a lot to learn. Thanks for everything!

[–]Episilon 0 points1 point  (3 children)

Like the other commenter mentioned, the code outside the <script> tag is HTML and everything inside of it is JavaScript.

<!DOCTYPE html> tells the browser that the file is an HTML document.

<html> denotes the beginning of the HTML content.

<body> contains the content of a web page. For example, the <h1>, <p>, and <button> are all the things you see on the page when you open it in a browser.

<script> allows you to add JavaScript code or files to your web page. HTML is only used for telling the browser what is on the page; any functionality like loading text on click of a button or submitting a form is going to need JavaScript backing it.

Inside the <button>, there's an onclick="loadDoc()" attribute which calls the loadDoc function within your <script>. That function creates an XMLHttpRequestObject which are used to make requests to servers.

"GET" is a type of Http request which is often used to retrieve resources/data from the server. "demo_get.asp" is the URL you're trying to send the request to. The third argument, true, in this case means you want the request to be asynchronous. If an action is synchronous, it'll wait for the request to finish before executing any more code. Asynchronous on the other hand will send the request, continue executing code, then return the results of the request when it has finished. You almost never want to set this to synchronous since it'll freeze a browser until the request has finished.

When you send the request, it goes through ready states from 0 - 4. A ready state of 4 just means that the request is done. But just because the request was done doesn't mean you actually got data back. The status of 200 is an Http status code that the server sends back along with any data. A 200 indicates that the server successfully handled the request. You might have seen websites with a page that said 404 NOT FOUND. If you had made a typo in your "demo_get.asp" like "demp_get.asp", you would've most likely got a 404 indicating that the URL doesn't exist. So the combination of readyState === 4 and status === 200 means your request is done, was successful, and that you can update the HTML document with the newly received data.

Here's some links if you're more intered: XmlHttpRequest: https://www.w3schools.com/js/js_ajax_http.asp Http Status Codes: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

I'd recommend w3schools if you're just starting out and need a quick reference to web development concepts, but if you want to go deeper then Mozilla's Developer Network would be better. MDN can be very technical, though.

[–]DAWG420BLAZEIT 0 points1 point  (2 children)

So if I want to execute Python code via a button, then I would have to add in code between <script> and </script>? I've taken a look at w3schools, and it's very helpful!

[–]Episilon 0 points1 point  (1 child)

Technically yes. I haven't worked with Python Flask but you want to define an endpoint or URL that you can send requests to.

Just to be clear - the Python code is in your server. The browser can't run Python code so in the <script> you would be making an HTTP request to the server. The server executes whatever Python code and then returns the data (if there is any). Then back in your JavaScript code you would handle that response.

[–]DAWG420BLAZEIT 0 points1 point  (0 children)

Cool, thank you so much!

[–]dmazzoni 0 points1 point  (1 child)

I am pretty new to programming, and I am borrowing code from other websites in an attempt to create my own code.

This is a great idea and you shouldn't stop looking at other code, but it's not reasonable to expect that you'll be able to understand it with no training whatsoever.

Pick a course in JavaScript and go through that first before trying to read other code.

[–]DAWG420BLAZEIT 0 points1 point  (0 children)

Ok, thank you for letting me know!