Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am pretty green to web development.
In one of my courses I have been told the following things will happen when browser reads a web page.
At a very high level I assume this is the basic flow.
1.Browser pulls the HTML page.
2.Browser understands the document structure using the HTML tags.
3.After step 2, browser understands the CSS selectors/properties.
4.Browser builds the DOM model now.
5.After this, the javascript interpreter within the browser interprets the .js script
Questions
1.Is the above flow correct ?
2.I am aware that the HTML tags can be manipulated by javascript.
Are the CSS selectors are also part of DOM and can be manipulated by javascript ?
Not exactly correct. It's a complicated process.
JavaScript isn't run just after the entire page is loaded, which is why you'll see a lot of junior programmers make the mistake of trying to manipulate HTML, without checking if the page has loaded.
When the browser reaches an element such as <script> or <link> it will attempt to pull the resource, and if successful, will then execute that resource. Meaning the JavaScript code, for instance, will run before the DOM has loaded, if the <script> tag is in the head (where it usually is). CSS works in a similar way, however it doesn't really matter when CSS is applied, in most cases, since it can't crash. You can create styles and even change the inline styles of elements, using JavaScript, but a general rule of thumb is to keep styles that CAN be in .css files there.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to create a webpage version control backup / log. Where if the webpage (including JS and CSS) gets altered it saves a static copy on the drive.
How do I get the CSS and javascript of a webpage? Getting the HTML is easy by simply connecting to the webpage and read the contents and return it. But how do I get the CSS & Javascript of this page too?
The system doesnt have direct access to the webserver(s) so I have to do everything over the network remotely.
My idea is I search the HTML I scraped for .css and '.js' and take everything until the first quote " and directly access the CSS / javascript file as webpage. But I think this might not be very reliable?
Not sure why this is marked as too broad. I'm asking how to get the CSS and javascript of a webpage. I reformed my question, hopefully its better now.
Instead of searching for .js and .css , I'd look for <script> and <link> tags instead and use their src and href properties respectively to perform another network request and retrieve those files for comparison.
This will be more reliable because you won't have to worry about the page's content containing js or css, and you could also use an XML parser to ensure things like single-quotes vs. double aren't an issue.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I am working on a site that calls various different pages and forms through ajax. To save page loading times I'm trying to only load the .js files that I need for each page or form, but during development this causes several issues and errors, like events or elements having to be referenced through $(document). Also, Jquery now throws a deprecation warning for loading inline js through ajax.
I know I can call external scripts through jquery's .getScript() function, and will be able to resolve all errors, but I'm wondering if it wouldn't just be a whole lot easier to include all the required script files in the main header (or footer).
What approach is more efficient in terms of work flow vs user experience? Load all the site js initially, or load scripts dynamically as needed? (In this case, total size of extraneous js files is approx 50kb)
I recommend you load dynamically when you need it, and put each js file in each file you gonna load, and forget load() wich is actually deprecated, use $.ajax() syntax.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm wondering in what cases is this better to use JS when a pure css solution is possible. I've been browsing other questions but couldnt find the answer I was looking for.
Suppose we have images and want to display some stuff on hover. Should one use :
Example :
$('div.some-class').mouseover(function(){
$(this).children('.some-class').removeClass('hidden');
});
or is this CSS solution better:
div:hover > .my-elem{
opacity:1;
});
imho, the second solution is way better but i've been using the first one for couple of months and I just found out about the second one a week ago, so i'm not totally sure if it's a valid practice.
The CSS solution is better for 2 reasons:
CSS is loaded alongside the HTML, whereas JavaScript is loaded after the page itself has loaded. For things like a hover this isn't a huge issue, but if you're directly setting static styles you'll notice a delay between the content loading and the JavaScript running.
It's common for users to disable JavaScript. With JavaScript disabled, your mouseover function would never fire, whereas the CSS would work regardless.
However that said, img elements cannot contain children, so both your CSS and JavaScript is invalid.
Case 1: Prefer CSS to JS
1. CSS 3 is a mixture of CSS+JS and this enables you to develop your code faster rather than writing your own custom JS.
2. Prevents you from querying the DOM.
3. Loads alongside with your HTML (faster than JS)
Case 2: Prefer JS to CSS
1. This will help you when working with old browsers which don't have CSS3 support.
2. Helps you to handle other DOM functionality which CSS still doesn't have support. (for eg: you can change the color of some other element on hover of your element in CSS, but can't make any changes to JS variables or logic)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Being a front-end developer working in a team, I have found myself solving a recurring problem many times.
For example, much of our frontend javascript code is written using jQuery and CSS selectors (mostly targeting a CSS "class"). The problem is, is that many times another developer that is fixing some CSS code will remove a class or will change the DOM element nesting it under another element making the JS code break.
To prevent this, my idea was to use/add a "data-js" attribute to each element that we want to use for Javascript. However I am not sure about the performance of a jQuery selector written like this:
$('[data-js="my_js_selector"]').click();
Another idea I had, was to add a js-specific class to a dom element that is somehow manipulated by Javascript:
link
and then calling it simply with $('.js-link').click()
It would be very nice that you could only look into HTML and tell that some element has some Javascript manipulations attached without actually looking into the JS code.
Is this a good idea? Or are there some other best practices to separate JS-triggering from CSS styling?
In Scalable and Modular Architecture for CSS (SMACSS), Jonathan Snook teaches that a "state" class such as the one you proposed with .js-link is the best approach.
The relevant discussion is in the section on State Rules:
Sub-module styles are applied to an element at render time and then
are never changed again. State styles, however, are applied to
elements to indicate a change in state while the page is still running
on the client machine.
For example, clicking on a tab will activate that tab. Therefore, an
is-active or is-tab-active class is appropriate. Clicking on a dialog
close button will hide the dialog. Therefore, an is-hidden class is
appropriate.
This contradicts what two commenters said. CSS code and classes should be flexible; CSS developers should be able to refactor and improve code without worrying about breaking functionality not related to presentation.
The point made by #ArunPJohny supports the state class approach. Engines are unfortunately not optimized to recognize data- attributes any more than they are to recognize arbitrary custom attributes, such as foo-.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I would like to know how (if even possible) to keep my javascript running after i've continued to the next page.
My situation:
Javascript clicks next button.
I'm now on a new page.
But the javascript stops running and all my functions/variables are gone.
I want to be able to push the button with javascript and then continue running the code that comes after that .click() part.
If its not possible can you maybe suggest a way to do this programmaticly?
No.
Once you leave the page, any JavaScript running on that page will also stop running.
You have two options.
Store any variables or settings you need using cookies, and continue running the same script on the next page.
Don't actually leave the page. You can use AJAX to load new information on the page, or perhaps change part of the page content using an IFRAME while the host page continues to load.
As #mike-edwards has said in the comments, you need a single page app.
You can use frameworks like AngularJS or Knockout.js to make your life easier.
As you said, whenever a new page loads in the browser, all your variables etc from the previous page will be lost. The only way to preserve your variables is to not change the page. You can do this using these frameworks and the HTML5 History infrastructure.
With AngularJS, history support comes out of the box. As far as I know, Knockout.js does not have history API support so you would need to use another JS plug-in like Davis.js for that.