CodeGym /జావా కోర్సు /మాడ్యూల్ 3 /బ్రౌజర్‌తో జావాస్క్రిప్ట్ కోడ్ యొక్క పరస్పర చర్య

బ్రౌజర్‌తో జావాస్క్రిప్ట్ కోడ్ యొక్క పరస్పర చర్య

మాడ్యూల్ 3
స్థాయి , పాఠం
అందుబాటులో ఉంది

4.1 బ్రౌజర్ వస్తువులు

మీకు ఇప్పటికే తెలిసినట్లుగా, జావాస్క్రిప్ట్ భాష బ్రౌజర్‌లో పని చేస్తుంది, కనుక ఇది ఏదో ఒకవిధంగా ఇదే బ్రౌజర్‌తో పరస్పర చర్య చేయాలి. దీన్ని చేయడానికి, బ్రౌజర్‌లో జావాస్క్రిప్ట్ నుండి లభించే అనేక వస్తువులు మరియు విధులు ఉన్నాయి.

మొదటిది an object window, ఇది బ్రౌజర్ విండోను వివరిస్తుంది. లేదా బదులుగా, బ్రౌజర్‌లు ట్యాబ్‌లు లేకుండా ఉన్నప్పుడు నేను వివరించాను. ఇప్పుడు విండో ఆబ్జెక్ట్ స్క్రిప్ట్‌తో పేజీ లోడ్ చేయబడిన ప్రస్తుత బ్రౌజర్ ట్యాబ్‌ను వివరిస్తుంది.

an object documentరెండవది, ట్యాబ్‌లో ప్రదర్శించబడే పత్రానికి ఇది బాధ్యత వహిస్తుంది. ఇది కొంచెం గందరగోళంగా ఉండవచ్చు. సరళత కోసం, పత్రం వినియోగదారుకు ప్రదర్శించబడుతుంది మరియు విండో ఈ పత్రం ప్రదర్శించబడుతుందని అనుకుందాం.

మూడవదిగా, ఇది an object consoleబ్రౌజర్ కన్సోల్‌కు అవుట్‌పుట్‌కు బాధ్యత వహిస్తుంది. అవును, బ్రౌజర్‌లకు కన్సోల్ కూడా ఉంది, ఇది ప్రధానంగా స్క్రిప్ట్‌ను డీబగ్ చేయడానికి మరియు దోష సందేశాలను ప్రదర్శించడానికి ఉపయోగించబడుతుంది. మీరు సాధారణంగా మీ బ్రౌజర్‌లోని F12 బటన్‌ను నొక్కడం ద్వారా దీన్ని తెరవవచ్చు.

Object window, అన్ని పేజీ ఆబ్జెక్ట్‌లకు అగ్ర-స్థాయి ఆబ్జెక్ట్. documentమరియు మీరు నేరుగా మీ స్క్రిప్ట్‌లో ఆబ్జెక్ట్ పేర్లను వ్రాయగలిగినప్పటికీ console, వాస్తవానికి, వాటి పేర్లు window.documentమరియు window.console.

4.2 జావాస్క్రిప్ట్‌లో డైలాగ్‌లు

హెచ్చరిక () పద్ధతి

ఇది an object windowపేజీ స్క్రిప్ట్‌కు కనిపించే అనేక ఫంక్షన్‌లను కూడా కలిగి ఉంది. అత్యంత సాధారణంగా ఉపయోగించేది alert(). ఇది వినియోగదారుకు సందేశంతో కూడిన డైలాగ్ బాక్స్‌ను ప్రదర్శించడానికి మిమ్మల్ని అనుమతిస్తుంది. వినియోగదారు సరే క్లిక్ చేసే వరకు స్క్రిప్ట్ నిలిపివేయబడుతుంది.

ఉదాహరణ:

alert("JavaScript is the best!");

ప్రాంప్ట్ () పద్ధతి

మీరు కొంత విలువను నమోదు చేయమని వినియోగదారుని అడగగల ఒక ఫంక్షన్ కూడా ఉంది - ఇది prompt().

ఉదాహరణ:

var age = prompt("Enter Year of Birth");

నిర్ధారించు () పద్ధతి

మీరు రెండు బటన్లతో డైలాగ్ బాక్స్‌ను ప్రదర్శించవచ్చు Ok- Cancelకొన్ని చర్య గురించి వినియోగదారుని అడగండి.

ఉదాహరణ:

var isOK = confirm("Are you ready");

4.3 ఆన్‌లోడ్() ఈవెంట్

మరియు మరొక ఉపయోగకరమైన మరియు ఆసక్తికరమైన క్షణం. పత్రం పూర్తిగా లోడ్ అయినప్పుడు బ్రౌసర్ విండోలో ఒక ఈవెంట్ ఉంది. పత్రం లోడ్ చేయబడి మరియు ప్రదర్శించబడిన తర్వాత మీరు అమలు చేయవలసిన కోడ్‌ను పేర్కొనవచ్చు.

ఇది మూడు విధాలుగా చేయవచ్చు.

ముందుగా, మీరు జావాస్క్రిప్ట్ కోడ్‌ని నేరుగా HTML పేజీలో అట్రిబ్యూట్ విలువగా పొందుపరచవచ్చు:

<body onload="alert('document loaded');">
  <img src="big-image.png">
</body>

రెండవది, మీరు కేవలం HTML పేజీలో జావాస్క్రిప్ట్ కోడ్‌ను పొందుపరచవచ్చు:

<head>
    <script>
        function load()
        {
            alert('document loaded');
        }
        window.onload = load;
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

మూడవది, అనామక ఫంక్షన్‌ని ప్రకటించడం ద్వారా మనం దానిని కొంచెం తక్కువగా వ్రాయవచ్చు:

<head>
    <script>
        window.onload = function () {
            alert('document loaded');
        }
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

4.4 ఆన్‌క్లిక్() ఈవెంట్

చివరగా, మరొక ముఖ్యమైన సంఘటన (ఈవెంట్) event OnClick. వినియోగదారు క్లిక్ చేసిన ఏదైనా మూలకంపై ఇది సంభవిస్తుంది. దీన్ని వివిధ మార్గాల్లో సెట్ చేసినట్లే event OnLoad, మేము సరళమైనదాన్ని మాత్రమే ఇస్తాము:

<body>
  <img src="big-image.png" onclick="alert('user clicked on the image');">
</body>

వ్యాఖ్యలు
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION