Menu

Sunday, August 16, 2020

Glossary

 Document

Reference : https://developer.mozilla.org/en-US/docs/Web/API/Document/Document

document : provides html structure of page

syntax: document

Properties of document with samples:

1. document.location

Location {href: "https://en.wikipedia.org/wiki/Main_Page", ancestorOrigins: DOMStringList, origin: "https://en.wikipedia.org", protocol: "https:", host: "en.wikipedia.org", …}

2. document.alinkColor

document.alinkColor='blue';

"blue"

Deprecated
This feature is no longer recommended. 


3.document.all

Deprecated since HTML5

4. document.anchors  

HTMLCollection [a, 8423465584828397121: a]

The anchors read-only property of the Document interface returns a list of all of the anchors in the document.

Deprecated
This feature is no longer recommended. 

5. document.applets

HTMLCollection []

Deprecated
This feature is no longer recommended

6. document.bgColor

The deprecated  bgColor property gets or sets the background color of the current document.

document.bgColor is deprecated in DOM Level 2 HTML

 Alternative - use of the CSS style background-color which can be accessed through the DOM with document.body.style.backgroundColor

7. document.body

The Document.body property represents the <body> or <frameset> node of the current document, or null if no such element exists.

8. document.characterSet

"UTF-8"

The properties document.charset and document.inputEncoding are legacy aliases for document.characterSet. Do not use them any more.

9. document.childElementCount

1

The ParentNode.childElementCount read-only property returns an unsigned long representing the number of child elements of the given element

Example:

var foo = document.getElementById('foo');
if (foo.childElementCount > 0) {
  // Do something
}

10. document.compatMode

"CSS1Compat"

Syntax

const mode = document.compatMode

Value

An enumerated value that can be:

  • "BackCompat" if the document is in quirks mode.
  • "CSS1Compat" if the document is in no-quirks (also known as "standards") mode or limited-quirks (also known as "almost standards") mode.

11. document.contentType

"text/html"

returns the MIME type that the document is being rendered as. This may come from HTTP headers or other sources of MIME information, and might be affected by automatic type conversions performed by either the browser or extensions.

12. document.designMode

"off"

controls whether the entire document is editable. Valid values are "on" and "off"

13. document.doctype

The returned object implements the DocumentType interface.

14. document.documentElement

Document.documentElement returns the Element that is the root element of the document (for example, the <html> element for HTML documents).

15. document.documentURI

"https://www.youtube.com/watch?v=Tec9AtyE4vA"


16. document.domain
"www.youtube.com"
 "www.youtube.com"


The domain property of the Document interface gets/sets the domain portion of the origin of the current document

17. document.embeds

HTMLCollection []

The embeds read-only property of the Document interface returns a list of the embedded <object> elements within the current document.

18. document.firstElementChild

html

The ParentNode.firstElementChild read-only property returns the object's first child Element, or null if there are no child elements.

19. document.forms

HTMLCollection [form#search-form.style-scope.ytd-searchboxsearch-formform#search-form.style-scope.ytd-searchbox]

The forms read-only property of the Document interface returns an HTMLCollection listing all the <form> elements contained in the document.

20. document.head

head
The head read-only property of the Document interface returns the <head> element of the current document.

CONTINUE


------>



--------------------------------------------------


Methods:

2. document.write  

Æ’ (){$(document.body).append($.parseHTML(Array.prototype.join.call(arguments,'')));}

document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open()which will clear the document.

If the document.write() call is embedded within an inline HTML <script> tag, then it will not call document.open(). For example:

<script> 
  document.write("<h1>Main title</h1>") 
</script>

 Chrome will not execute <script> elements injected via document.write() when specific conditions are met. For more information, refer to Intervening against document.write().


Require arguments

Note:  Use of "document.write" is deprecated. Use jQuery or mw.loader.load instead.

3. document.writeln

Æ’ (){$(document.body).append($.parseHTML(Array.prototype.join.call(arguments,'')));}

Note:  Use of "document.write" is deprecated. Use jQuery or mw.loader.load instead.


4. location.search

Returns url query parameters 

i.e for url https://www.w3schools.com/js/tryit.asp?filename=tryjs_function_call_arguments

location.search will return  '?filename=tryjs_function_call_arguments'

Saturday, August 15, 2020

HTML debugging

 Some references : https://www.youtube.com/watch?v=kwFwN1M0M98&feature=emb_rel_end

Naming conventions

 Name folders and files completely in lowercase with no spaces. This is because:

Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at, test-site/MyImage.jpg and then in a different file you try to invoke the image as test-site/myimage.jpg, it may not work.

Browsers, web servers, and programming languages do not handle spaces consistently. For example, if you use spaces in your filename, some systems may treat the filename as two filenames. Some servers will replace the areas in your filenames with "%20" (the character code for spaces in URIs), resulting in all your links being broken. It's better to separate words with dashes, rather than underscores: my-file.html vs. my_file.html.

The short answer is that you should use a hyphen for your file names. The Google search engine treats a hyphen as a word separator but does not regard an underscore that way. For these reasons, it is best to get into the habit of writing your folder and file names lowercase with no spaces and with words separated by dashes, at least until you know what you're doing.

What structure should your website have?

  1. index.html: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file called index.html and save it just inside your test-site folder.
  2. images folder: This folder will contain all the images that you use on your site. Create a folder called images, inside your test-site folder.
  3. styles folder: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called styles, inside your test-site folder.
  4. scripts folder: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder called scripts, inside your test-site folder.

Some general rules for file paths:

  • To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. my-image.jpg.
  • To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. subdirectory/my-image.jpg.
  • To link to a target file in the directory above the invoking HTML file, write two dots. So for example, if index.html was inside a subfolder of test-site and my-image.jpg was inside test-site, you could reference my-image.jpg from index.html using ../my-image.jpg.
  • You can combine these as much as you like, for example ../subdirectory/another-subdirectory/my-image.jpg.

Basics of html

 HTML-

HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content.

<p>My cat is very grumpy</p>

Element - p(paragraph)

Content of Element -My cat is very grumpy

<p class="editor-note">My cat is very grumpy</p>

Attribute: Attributes are defined by HTML

attribute nameclass 

attribute valueeditor-note

The attribute's main role is to initializes the DOM properties. So, once the DOM initialization complete, the attributes job is done.

An attribute should always have the following:

  1. A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
  2. The attribute name followed by an equal sign.
  3. The attribute value wrapped by opening and closing quotation marks.
  4. Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters  " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.
Nesting Elements

You can put elements inside other elements too — this is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a <strong> element, which means that the word is to be strongly emphasized:

<p>My cat is <strong>very</strong> grumpy.</p>

Empty elements

Some elements have no content and are called empty elements. Take the <img> element

<img src="images/firefox-icon.png" alt="My test image">
This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.

HTML Property:
Properties are defined by the DOM (Document Object Model).
Property values can change; attribute values can't.

For example, when the browser renders <input type="text" value="Bob">, it creates a corresponding DOM node with a value property initialized to "Bob".

When the user enters "Sally" into the input box, the DOM element value property becomes "Sally". But the HTML value attribute remains unchanged as you discover if you ask the input element about that attribute: input.getAttribute('value') returns "Bob".

The HTML attribute value specifies the initial value; the DOM value property is the current value.



Marking up text

This section will cover some of the essential HTML elements you'll use for marking up the text.

Headings

Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1><h6>, although you'll commonly only use 3 to 4 at most:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Now try adding a suitable title to your HTML page just above your <img> element.

Paragraphs

As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:

<p>This is a single paragraph</p>

Add your sample text (you should have it from What should your website look like?) into one or a few paragraphs, placed directly below your <img> element.

Lists

A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consist of at least 2 elements. The most common list types are ordered and unordered lists:

  1. Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a <ul> element.
  2. Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.

Each item inside the lists is put inside an <li> (list item) element.

For example, if we wanted to turn the part of the following paragraph fragment into a list

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

We could modify the markup to this

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

HTML structure:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body> 

</html> 


The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title>, links to CSS (if you choose to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document.

head's job is to contain metadata about the document

The <h1> element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.)

The <title> element is metadata that represents the title of the overall HTML document

Metadata: the <meta> element

Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the <meta> element. 

Specifying your document's character encoding

In the example we saw above, this line was included:

<meta charset="utf-8">

This element simply specifies the document's character encoding — the character set that the document is permitted to use. utf-8 is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:


Target Server Side implementation using .net SDK

 Target Server Side implementation using .net SDK  This reference guide shows how Adobe Target customers can install, initialize, and use th...