What is JavaScript JavaScript is a high level dynamic, untyped and interpreted programming language standardized in the ECMAScript language specification, that alongside HTML and CSS is one of the three core technologies of world wide web content. To understand what JavaScript is we need to observe it in its natural environment - the web browser. Consider a modern web page with great content, fancy design and layout, and advanced interactivity. What you see is the combined output of three distinct layers of code, put together by the browser. The first layer is the HTML document. This is where the content lives, marked up in a language that makes it easy for the browser to parse. When you visit a webpage you're accessing this document. And without this HTML document there's no web page. The second layer is a collection of CSS Rules. This is the code that instructs the browser how to display the HTML Markup. HTML and CSS work together to insure a perfect separation of concerns. HTML handles the content. CSS is presentation. That means, even if you take the CSS away the content is still there. CSS is the presentational enhancement. The third layer is the JavaScript. What I call the interactive layer. JavaScript is a scripting language that runs in the browser and interacts with the HTML Markup and CSS Rules to change what you see and what you can do. Technically you should be able to take the JavaScript away and still be able to access the content. But in recent years this has become less of a certainty. More on that later in the course. When you point your browser at an address with an HTML document, it first pulls down the HTML and indexes its content. Then downloads any CSS and JavaScript documents referenced, runs the JavaScript to see if any of the HTML Markup has changed, applies the CSS to make everything look the way it's supposed to, and finally leaves the JavaScript running in the background, in case an interaction or event triggers further scripts. So in short, JavaScript is a scripting language that allows you to write small programs that run in the browser, and change the HTML and CSS of the current document. Of course, it's a bit more complicated than that, but this is a good way to think about it as you get started. added on 03-Feb-2018
HTML Block and Inline Elements Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. Block-level Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Theelement is a block-level element. ExampleHelloWorldInline Elements An inline element does not start on a new line and only takes up as much width as necessary. This is an inline element inside a paragraph. Example Hello World added on 10-Feb-2018
CSS Margins The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left). Margin - Individual Sides CSS has properties for specifying the margin for each side of an element: margin-top margin-right margin-bottom margin-left All the margin properties can have the following values: auto - the browser calculates the margin length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element Tip: Negative values are allowed. The following example sets different margins for all four sides of aelement: Example p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } added on 10-Feb-2018
CSS Padding The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left). Padding - Individual Sides CSS has properties for specifying the padding for each side of an element: padding-top padding-right padding-bottom padding-left All the padding properties can have the following values: length - specifies a padding in px, pt, cm, etc. % - specifies a padding in % of the width of the containing element inherit - specifies that the padding should be inherited from the parent element Note: Negative values are not allowed. The following example sets different padding for all four sides of aelement: Example div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } added on 10-Feb-2018
Div and Span What is the difference between HTML tagsand ? div is a block element, span is inline. This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc. For example:This a large main division, with a small bit of spanned text!Note that it is illegal to place a block level element within an inline element, so:Some text that...is illegal. added on 10-Feb-2018I wantto mark up
float CSS property The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning). A floating element is one where the computed value of float is not none. /* Keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /* Global values */ float: inherit; float: initial; float: unset; more info at https://developer.mozilla.org/en-US/docs/Web/CSS/float added on 10-Feb-2018
CSS Layout - The position Property The position Property The position property specifies the type of positioning method used for an element. There are five different position values: static relative fixed absolute sticky Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value. more at https://www.w3schools.com/css/css_positioning.asp added on 10-Feb-2018
CSS z-index Property The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). more at https://www.w3schools.com/cssref/pr_pos_z-index.asp added on 10-Feb-2018
CSS display Property Definition and Usage The display property specifies the display behavior of an element. Note: Every element on a web page is a rectangular box. The CSS display property determines how that rectangular box behaves. Example Use of some different display values: p.ex1 {display: none;} p.ex2 {display: inline;} p.ex3 {display: block;} p.ex4 {display: inline-block;} more at https://www.w3schools.com/cssref/pr_class_display.asp added on 10-Feb-2018
MyJson.com API example $(document).ready(function () { var mohit_json; $.ajax({url: "https://api.myjson.com/bins/1166d9", success: function(result){ console.log(result); mohit_json = result; if (!mohit_json.mohit_data.data) { mohit_json.mohit_data.data = []; } // var data1 = 'mmo'; // mohit_json.mohit_data.data.push(data1); push_data(mohit_json); }}); var push_data = function (mohit_json) { $.ajax({ url: "https://api.myjson.com/bins/1166d9", type: "PUT", data: JSON.stringify(mohit_json), contentType: "application/json; charset=utf-8", dataType: "json", crossDomain: true, success: function (result, textStatus, jqXHR) { console.log(result); }, error: function (jqXHR, exception) { console.log(jqXHR.status) console.log(exception); }, }); } });