JavaScript vs HTML vs CSS

ఒక web page తయారు చేయడానికి సాధారణంగా HTML, CSS, మరియు JavaScript కలిసి పనిచేస్తాయి. ఇవి మూడు వేర్వేరు బాధ్యతలను నిర్వహిస్తాయి.

HTML ఏమి చేస్తుంది?

HTML (HyperText Markup Language) web page యొక్క structure లేదా నిర్మాణాన్ని తయారు చేస్తుంది. Headings, paragraphs, images, links, buttons వంటి elements ను HTML ద్వారా page లో ఉంచుతాము.

ఉదాహరణకు, <h1> element ఒక పెద్ద heading ను సూచిస్తుంది మరియు <button> element ఒక button ను సూచిస్తుంది.

CSS ఏమి చేస్తుంది?

CSS (Cascading Style Sheets) web page యొక్క appearance లేదా styling ను నియంత్రిస్తుంది. Colors, fonts, spacing, borders, size, మరియు layout వంటి విషయాలను CSS ద్వారా మార్చవచ్చు.

JavaScript ఏమి చేస్తుంది?

JavaScript web page కు behavior లేదా interactivity ను జోడిస్తుంది. User button ను click చేసినప్పుడు message చూపించడం, form input ను validate చేయడం, content ను మార్చడం, data ను process చేయడం వంటి పనులను JavaScript చేస్తుంది.

మూడు technologies కలిసి ఎలా పనిచేస్తాయి?

HTML page లో content మరియు structure ను సృష్టిస్తుంది.
CSS ఆ content ఎలా కనిపించాలో నిర్ణయిస్తుంది.
JavaScript user actions కు page ఎలా స్పందించాలో నిర్ణయిస్తుంది.

ఒక ఇంటి analogy తీసుకుంటే, HTML ఇంటి గోడలు మరియు గదుల నిర్మాణం వంటిది. CSS గోడల రంగు, furniture, మరియు decoration వంటిది. JavaScript doorbell మోగినప్పుడు స్పందించడం లేదా lights ని ఆన్ చేయడం వంటి behavior వంటిది.

ముఖ్యమైన తేడా

HTML లేకుండా content structure ఉండదు, CSS లేకుండా page సాధారణంగా కనిపిస్తుంది, JavaScript లేకుండా page లో dynamic behavior మరియు interactivity పరిమితంగా ఉంటాయి. ఆధునిక websites లో ఈ మూడు technologies తరచుగా కలిసి ఉపయోగించబడతాయి.

Simple Explanation

HTML = Structure, CSS = Style, JavaScript = Behavior.

ఉదాహరణకు ఒక button తీసుకుందాం. HTML button ను page లో సృష్టిస్తుంది. CSS button యొక్క color మరియు size ను మార్చుతుంది. JavaScript button click అయినప్పుడు ఒక action ను నిర్వహిస్తుంది.

Real-Life Example

ఒక digital doorbell ను ఊహించండి. Doorbell యొక్క button మరియు దాని స్థానం HTML. Button యొక్క color, shape, మరియు size CSS. Button నొక్కినప్పుడు bell మోగడం JavaScript.

అందువల్ల HTML page యొక్క body లాంటిది, CSS page యొక్క appearance లాంటిది, JavaScript page యొక్క actions మరియు reactions లాంటిది.

Code Examples

JavaScript behavior ను console లో చూడటం

const technology = "JavaScript";
const role = "behavior and interactivity";

console.log(technology + " adds " + role + " to web pages.");

ఈ example లో JavaScript variables లో technology పేరు మరియు దాని role ను store చేస్తాము. తర్వాత string concatenation ఉపయోగించి ఒక message ను console లో చూపిస్తాము. ఇది JavaScript స్వయంగా calculations మరియు messages వంటి behavior ను నిర్వహించగలదని చూపిస్తుంది.

JavaScript adds behavior and interactivity to web pages.

HTML, CSS, JavaScript బాధ్యతలను గుర్తించడం

const htmlRole = "structure";
const cssRole = "style";
const javascriptRole = "behavior";

console.log("HTML: " + htmlRole);
console.log("CSS: " + cssRole);
console.log("JavaScript: " + javascriptRole);

ఇక్కడ ప్రతి technology యొక్క ప్రధాన బాధ్యతను ఒక variable లో ఉంచాము. తరువాత మూడు separate messages ను console లో print చేస్తున్నాము. ఈ code browser page ను తయారు చేయదు; technologies యొక్క roles ను అర్థం చేసుకోవడానికి ఉపయోగించే simple JavaScript example మాత్రమే.

HTML: structure
CSS: style
JavaScript: behavior

Line-by-Line Explanation

const htmlRole = “structure”;

ఈ line లో htmlRole అనే constant variable ను create చేసి, దాని value గా structure ను ఉంచుతున్నాము. HTML యొక్క ప్రధాన పని page structure ను తయారు చేయడం.

const cssRole = “style”;

ఈ line CSS యొక్క ప్రధాన బాధ్యత అయిన style ను cssRole అనే constant లో store చేస్తుంది.

const javascriptRole = “behavior”;

ఈ line JavaScript యొక్క ప్రధాన బాధ్యత అయిన behavior ను javascriptRole అనే constant లో store చేస్తుంది.

ఈ blank line code ను చదవడానికి సులభంగా ఉండేలా statements ను వేరు చేస్తుంది. దీనికి ప్రత్యేక execution పని లేదు.

console.log(“HTML: ” + htmlRole);

ఈ line HTML యొక్క role ను string తో కలిపి console లో HTML: structure అనే message ను చూపిస్తుంది.

console.log(“CSS: ” + cssRole);

ఈ line CSS యొక్క role ను console లో CSS: style అనే message గా చూపిస్తుంది.

console.log(“JavaScript: ” + javascriptRole);

ఈ line JavaScript యొక్క role ను console లో JavaScript: behavior అనే message గా చూపిస్తుంది.

Try It

Try this JavaScript code:

Example

const htmlRole = "structure";
const cssRole = "style";
const javascriptRole = "behavior";

console.log("HTML: " + htmlRole);
console.log("CSS: " + cssRole);
console.log("JavaScript: " + javascriptRole);

Try It Yourself »

Practice

Practice:

ఇచ్చిన code ను మార్చండి. HTML యొక్క role ను content structure, CSS యొక్క role ను visual style, JavaScript యొక్క role ను behavior and interactivity గా ఉంచి, మూడు messages ను console లో print చేయండి.

Hint:

ప్రతి constant variable యొక్క string value ను మార్చండి. console.log() lines ను అలాగే ఉంచవచ్చు.

Common Mistakes

HTML, CSS, JavaScript మూడు languages ఒకే పని చేస్తాయని అనుకోవడం.

వాటి బాధ్యతలను గుర్తుంచుకోండి: HTML structure, CSS style, JavaScript behavior.

CSS తో button click అయినప్పుడు action నిర్వహించవచ్చని అనుకోవడం.

CSS appearance ను మార్చుతుంది. Click వంటి user interaction కు స్పందించడానికి JavaScript అవసరం.

JavaScript అంటే కేవలం page colors మార్చడం మాత్రమే అని భావించడం.

JavaScript calculations, decisions, events, data processing, మరియు dynamic updates వంటి అనేక పనులు చేయగలదు.

HTML లో content, CSS లో behavior, JavaScript లో structure ను కలపడం.

ప్రతి technology యొక్క ప్రధాన purpose ను వేరు చేయండి: HTML content structure, CSS presentation, JavaScript logic and behavior.

Interview Questions

HTML, CSS, మరియు JavaScript మధ్య ప్రధాన తేడా ఏమిటి?

Answer: HTML web page యొక్క structure మరియు content ను తయారు చేస్తుంది. CSS page యొక్క appearance మరియు layout ను నియంత్రిస్తుంది. JavaScript page కు behavior, logic, మరియు interactivity ను జోడిస్తుంది.

ఒక button ను interactive చేయడానికి ఏ technologies అవసరం అవుతాయి?

Answer: HTML button ను create చేస్తుంది, CSS దాని design ను మార్చుతుంది, మరియు JavaScript click event తర్వాత జరిగే action ను నిర్వహిస్తుంది.

JavaScript లేకుండా web page తయారు చేయగలమా?

Answer: అవును. HTML మరియు CSS తో static web page తయారు చేయవచ్చు. కానీ dynamic behavior మరియు advanced interactivity కోసం JavaScript ఉపయోగించడం అవసరం అవుతుంది.

Exam Questions

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

Answer:

Web page యొక్క structure మరియు content ను తయారు చేయడం.

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

Answer:

Web page యొక్క colors, fonts, spacing, layout, మరియు ఇతర visual styles ను నియంత్రించడం.

JavaScript web page కు ఏమి జోడిస్తుంది?

Answer:

Behavior, logic, dynamic changes, మరియు user interactivity.

HTML, CSS, JavaScript ను ఒక ఇంటితో పోలిస్తే JavaScript దేనిని సూచిస్తుంది?

Answer:

Doorbell నొక్కినప్పుడు bell మోగడం లేదా lights ఆన్ చేయడం వంటి ఇంటి actions మరియు behavior ను సూచిస్తుంది.

Quick Revision

HTML = Web page structure and content
CSS = Appearance, styling, and layout
JavaScript = Behavior, logic, and interactivity
HTML ఒక button ను సృష్టిస్తుంది.
CSS button యొక్క design ను మార్చుతుంది.
JavaScript button click తర్వాత action ను నిర్వహిస్తుంది.
మూడు technologies కలిసి modern interactive websites ను తయారు చేస్తాయి.

JavaScript vs HTML vs CSS