JavaScript in Web Browsers

JavaScript ను web browser లో ఉపయోగించినప్పుడు, అది web page కు behavior మరియు interactivity జోడిస్తుంది. HTML page యొక్క structure ను రూపొందిస్తుంది, CSS design ను నియంత్రిస్తుంది, JavaScript మాత్రం page ఎలా స్పందించాలో నిర్ణయిస్తుంది.

Browser లో JavaScript ఎలా పనిచేస్తుంది?

Browser ఒక HTML file ను load చేసినప్పుడు, అందులో ఉన్న JavaScript code ను JavaScript engine చదివి execute చేస్తుంది. Chrome లో V8, Firefox లో SpiderMonkey వంటి engines JavaScript ను అమలు చేస్తాయి.

సాధారణంగా JavaScript ను HTML లో <script> tag ద్వారా connect చేస్తారు. ఉదాహరణకు, <script src=”app.js”></script> అనే code external JavaScript file ను HTML page కు connect చేస్తుంది. ఈ visible lesson లో code characters HTML గా interpret కాకుండా angle brackets escape చేయబడ్డాయి.

Browser లో JavaScript చేయగల పనులు

Web page లో text మరియు elements మార్చడం
Button clicks వంటి user actions కు స్పందించడం
Form input ను చదివి validate చేయడం
Browser console లో messages చూపించడం
Browser APIs సహాయంతో కొన్ని browser features ఉపయోగించడం

DOM అంటే ఏమిటి?

DOM అంటే Document Object Model. Browser HTML document ను objects మరియు nodes గా memory లో represent చేస్తుంది. JavaScript ద్వారా ఈ DOM ను access చేసి page content ను మార్చవచ్చు.

Plain text ను page లో చూపించడానికి textContent ఉపయోగించడం సురక్షితమైన పద్ధతి. User input ను నేరుగా innerHTML లో పెట్టడం వల్ల security సమస్యలు రావచ్చు, కాబట్టి beginner code లో plain text కోసం textContent ను ఉపయోగించండి.

Browser environment మరియు Node.js environment

Browser లో document, window వంటి browser-specific objects అందుబాటులో ఉంటాయి. Node.js లో ఇవి సాధారణంగా ఉండవు. అందువల్ల browser కోసం రాసిన ప్రతి JavaScript code ను Node.js లో అదే విధంగా run చేయలేము.

Simple Explanation

సులభంగా చెప్పాలంటే, browser లో JavaScript ఒక web page కు brain లా పనిచేస్తుంది. HTML page లో ఒక heading, paragraph మరియు button ఉన్నాయని అనుకుందాం. JavaScript user button ను click చేసినప్పుడు paragraph text ను మార్చగలదు. Browser JavaScript code ను execute చేసి DOM ద్వారా page ను update చేస్తుంది.

Console లో message చూపించడానికి console.log() ఉపయోగించవచ్చు. Page మీద కొత్త text చూపించడానికి DOM element యొక్క textContent property ను మార్చవచ్చు.

Real-Life Example

ఒక online shopping website ను ఊహించుకోండి. Product details మరియు layout ను HTML అందిస్తుంది. Colors మరియు spacing ను CSS నియంత్రిస్తుంది. User ఒక product ను cart కు add చేసినప్పుడు cart count పెంచడం, success message చూపించడం వంటి పనులను browser లో JavaScript చేస్తుంది.

Code Examples

Browser console లో message చూపించడం

const message = "JavaScript is running in the browser";
console.log(message);

ఈ code ఒక constant message ను store చేసి, console.log() ద్వారా browser console లో చూపిస్తుంది. ఇది browser JavaScript environment లో run చేయవచ్చు. Console ను చూడటానికి browser Developer Tools లో Console tab ను open చేయండి.

JavaScript is running in the browser

DOM ద్వారా page లో heading చూపించడం

const heading = document.createElement("h1");
heading.textContent = "JavaScript in the Browser";
document.body.appendChild(heading);

ఈ code browser DOM ను ఉపయోగిస్తుంది. మొదటి line లో కొత్త h1 element తయారవుతుంది. రెండవ line లో దాని plain text set అవుతుంది. మూడవ line లో ఆ heading ను document body కి add చేస్తుంది. ఈ example browser page context లో మాత్రమే పనిచేస్తుంది, ఎందుకంటే document browser object.

The browser page displays a heading: JavaScript in the Browser

Page content ను textContent తో మార్చడం

document.body.textContent = "Welcome to JavaScript";

document.body ద్వారా page body ను access చేసి, textContent ద్వారా plain text set చేస్తున్నాం. Browser page లో ఉన్న body content ఈ text తో replace అవుతుంది. Plain text కోసం textContent ఉపయోగించడం beginner-friendly మరియు safer approach.

The browser page displays: Welcome to JavaScript

Line-by-Line Explanation

const heading = document.createElement(“h1”);

const తో heading అనే variable create చేస్తున్నాం. document.createElement(“h1”) browser DOM లో ఒక కొత్త h1 element తయారు చేస్తుంది.

heading.textContent = “JavaScript in the Browser”;

తయారు చేసిన h1 element యొక్క textContent property కి plain text value ఇస్తున్నాం. అందువల్ల heading లో ఈ text కనిపిస్తుంది.

document.body.appendChild(heading);

document.body page body ను సూచిస్తుంది. appendChild() method ద్వారా heading ను body చివరలో page కి జోడిస్తున్నాం.

Try It

Try this JavaScript code:

Example

const pageTitle = "My First Browser Page";
document.body.textContent = pageTitle;

Try It Yourself »

Practice

Practice:

pageTitle variable value ను మార్చి, browser page లో Welcome to My JavaScript Page అనే text కనిపించేలా code ను పూర్తి చేయండి.

Hint:

String value ను double quotes లో రాయండి. తర్వాత ఉన్న document.body.textContent line ను మార్చాల్సిన అవసరం లేదు.

Common Mistakes

document ను Node.js environment లో కూడా browser లాగానే ఉపయోగించవచ్చని అనుకోవడం.

document browser-specific object. DOM code ను browser page context లో run చేయాలి. Node.js lesson లో browser objects గురించి వేరుగా నేర్చుకుంటారు.

JavaScript code ను HTML file లో నేరుగా రాసి, <script> tag ఉపయోగించకపోవడం.

HTML లో JavaScript రాస్తే దాన్ని <script> tag లో ఉంచాలి. External file అయితే <script src=”app.js”></script> వంటి reference ఉపయోగించాలి.

Plain text చూపించడానికి user input ను ఎప్పుడూ innerHTML లో పెట్టడం.

Plain text కోసం textContent ఉపయోగించండి. HTML markup ను intentionally create చేయాల్సిన అవసరం లేనప్పుడు innerHTML ను avoid చేయడం మంచిది.

Browser page లో కనిపించే output మరియు console output ఒకటే అని అనుకోవడం.

console.log() output Developer Tools Console లో కనిపిస్తుంది. DOM updates మాత్రం browser page లో కనిపిస్తాయి.

Interview Questions

Browser లో JavaScript యొక్క ప్రధాన ఉపయోగం ఏమిటి?

Answer:

Web page కు behavior మరియు interactivity జోడించడం JavaScript యొక్క ప్రధాన ఉపయోగం. ఇది user actions కు స్పందించగలదు మరియు DOM ను మార్చగలదు.

DOM అంటే ఏమిటి?

Answer:

DOM అంటే Document Object Model. Browser HTML document ను objects మరియు nodes రూపంలో represent చేస్తుంది. JavaScript ద్వారా ఈ objects ను access చేసి page ను update చేయవచ్చు.

Browser లో document object ఎందుకు ఉపయోగిస్తారు?

Answer:

document object ద్వారా current HTML page ను access చేయవచ్చు. Elements create చేయడం, find చేయడం మరియు update చేయడం వంటి DOM పనులకు ఇది ఉపయోగపడుతుంది.

textContent మరియు innerHTML లో beginner code కోసం ఏది సురక్షితమైనది?

Answer:

Plain text చూపించడానికి textContent సురక్షితమైనది. innerHTML HTML markup ను parse చేస్తుంది, కాబట్టి untrusted user input తో దాన్ని careless గా ఉపయోగించకూడదు.

Exam Questions

Browser లో JavaScript code ను HTML page తో connect చేయడానికి ఏ tag ఉపయోగిస్తారు?

Answer:

<script> tag ఉపయోగిస్తారు. External JavaScript file కోసం సాధారణంగా <script src=”app.js”></script> రాస్తారు.

క్రింది code browser page లో ఏ మార్పు చేస్తుంది? document.body.textContent = “Hello”;

Answer:

Browser page యొక్క body content plain text గా Hello కి మారుతుంది.

Browser మరియు Node.js environments మధ్య ఒక ముఖ్యమైన తేడా చెప్పండి.

Answer:

Browser లో DOM కోసం document మరియు browser APIs అందుబాటులో ఉంటాయి. Node.js లో ఇవి సాధారణంగా అందుబాటులో ఉండవు, ఎందుకంటే Node.js browser page environment కాదు.

Quick Revision

Browser JavaScript web pages కు behavior మరియు interactivity జోడిస్తుంది.
HTML లో JavaScript connect చేయడానికి <script> tag ఉపయోగిస్తారు.
DOM అనేది HTML document యొక్క object-based representation.
document object ద్వారా browser page ను access చేయవచ్చు.
textContent plain text update చేయడానికి ఉపయోగపడుతుంది.
console.log() output browser Developer Tools Console లో చూపిస్తుంది.
Browser-specific code లో document మరియు window వంటి objects ఉండవచ్చు.
Browser JavaScript code మరియు Node.js code environments ఒకేలా ఉండవు.

JavaScript in Web Browsers