►JavaScript Tutorial For Beginners In Hindi Playlist – https://www.youtube.com/playlist?list=PLu0W_9lII9ajyk081To1Cbt2eI5913SsL
►Source Code + Other Material – https://codewithharry.com/videos/javascript-tutorials-in-hindi-12
This video is a part of my JavaScript In Hindi Course. JavaScript is a high-level, interpreted programming language that conforms to the ECMAScript specification. JavaScript has dynamic typing, prototype-based object-orientation, and first-class functions.
Alongside HTML and CSS, JavaScript is one of the best and most demanded technologies of the World Wide Web. JavaScript enables interactive web pages and is a crucial part of web applications. The vast majority of sites use it, and major web browsers have a dedicated JavaScript engine in order to execute it.
As a multi-paradigm language, it supports event-driven, functional, and imperative programming fashion. It has APIs for dealing with text, arrays, regular expressions, and the DOM, but the language itself does not include any I/O, such as networking, storage, or graphics facilities. It relies upon the host machine environment in which it is embedded to provide these features.
►Click here to subscribe – https://www.youtube.com/channel/UCeVMnSShP_Iviwkknt83cww
Best Hindi Videos For Learning Programming:
►Learn Python In One Video – https://www.youtube.com/watch?v=qHJjMvHLJdg
►Learn JavaScript in One Video – https://www.youtube.com/watch?v=onbBV0uFVpo
►Learn PHP In One Video – https://www.youtube.com/watch?v=xW7ro3lwaCI
►Machine Learning Using Python – https://www.youtube.com/playlist?list=PLu0W_9lII9ai6fAMHp-acBmJONT7Y4BSG
►Creating & Hosting A Website (Tech Blog) Using Python – https://www.youtube.com/playlist?list=PLu0W_9lII9agAiWp6Y41ueUKx1VcTRxmf
►Advanced Python Tutorials – https://www.youtube.com/playlist?list=PLu0W_9lII9aiJWQ7VhY712fuimEpQZYp4
►Object Oriented Programming In Python – https://www.youtube.com/playlist?list=PLu0W_9lII9ahfRrhFcoB-4lpp9YaBmdCP
►Python Data Science and Big Data Tutorials – https://www.youtube.com/playlist?list=PLu0W_9lII9agK8pojo23OHiNz3Jm6VQCH
Follow Me On Social Media
►Website (created using Flask) – https://www.codewithharry.com
►Facebook – https://www.facebook.com/CodeWithHarry
►Instagram (Guaranteed Replies :)) – https://www.instagram.com/haris_magical/
►Personal Facebook A/c – https://www.facebook.com/geekyharis
Twitter – https://twitter.com/Haris_Is_Here
Original source
31 responses to “Understanding DOM & Creating a Website Layout | JavaScript Tutorial In Hindi #12”
a= document.images
b= document.links
console.log(a)
console.log(b)
in index.html
<script>
document.write(Array.from(a))
document.write(Array.from(b))
</script>
Exercise1 solution:
let l = document.links;
Array.from(l).forEach(function(element){
let myLink = element.href;
let str_pos = myLink.indexOf("python");
if (str_pos > -1) {
console.log(myLink);
}
});
harry bhai tut12.js nhi execute ho raha hai GET http://127.0.0.1:5500/js/js/tut12.js net::ERR_ABORTED 404 (Not Found) ye error a rha hai
let a = document.images;
Array.from(a).forEach(function(element){
console.log(element);
});
let b = document.scripts;
Array.from(b).forEach(function(element){
console.log(element);
});
Thank you sir,do you like to make a video on div class
let imgs = document.images;
Array.from(imgs).forEach(function(element) {
console.log(element);
})
let scriptz = document.scripts;
for (let index = 0; index < scriptza.length; index++) {
console.log(scriptz[index]);
}
let images=document.images;
let scripts=document.scripts;
images.forEach(function img(elements){
document.getElementById("changeToImage").innerHTML=elements;
document.getElementById("changeToScript").innerHTML=scripts;
})
let val = document.images;
let val = document.scripts;
// Html Code
<img src="maxresdefault.jpg" alt="" srcset="">
<img src="maxresdefault (1).jpg" alt="" srcset="">
<a href="//http://www.youtube.com/channel/UCQuVB20AKCY27p99yc_Xyug?view_as=subscriber">Go To Easy Learning</a>
//Javascript code
a = document.images[1];
a = document.scripts[1].src;
a = document.scripts[1];
JS file code
function prin(item)
{
Array.from(item).forEach(i=>{
console.log(i);
})
};
let a=document.images;
prin(a);
a=document.scripts;
prin(a);
HTML file code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tutorial on Js</title>
</head>
<body>
<h6> Js tutorial </h6>
<img src="coffe.jpeg">
<img src="Green-Leaves.png">
<img src="coffe.jpeg">
<img src="Green-Leaves.png">
<img src="coffe.jpeg">
<img src="Green-Leaves.png">
</body>
<script src="tut2.js"></script>
</html>
good
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Quise by Code with Harry</title>
</head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #666;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 250px;
height: 250px;
}
img {
width: 100%;
padding-left: 8px;
}
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: black;
}
h1,p {
text-align: center;
}
p {
padding-top: 20px;
}
</style>
<body>
<h1 id="heading">This is the Quise that I have to solve</h1>
<div class="container">
<div class="child">Image 1
<img src="img/image-name1" alt="This is Image">
<p><a href="code with this dude">If you want to talk with him just click on Link</a></p>
</div>
<div class="child">Image 2
<img src="img/image-name1" alt="This is Image">
<p><a href="code with this dude">If you want to talk with him just click on Link</a></p>
</div>
<div class="child">Image 3
<img src="img/image-name1" alt="This is Image">
<p><a href="code with this dude">f you want to talk with him just click on Link</a></p>
</div>
<div class="child">Image 4
<img src="img/image-name1" alt="This is Image">
<p><a href="code with this dude">If you want to talk with him just click on Link</a></p>
</div>
</div>
</body>
<script src="web.js" type="text/Javascript"></script>
</html>
js code:
console.log('We are in Web.html page');
let a = document.all;
// a = document.links[3];
// Array.from(a).forEach((element, index) => {
// console.log(element, index);
// });
// a = document.links;
// Array.from(a).forEach((element, index) => {
// console.log(element, index);
// });
a = document.scripts;
console.log(a);
// use document.images and document.scripts and print the list of images and scripts on an html page
let imgStr = `<h1>Images Found</h1>`;
for (let i = 0; i < document.images.length; i++) {
imgStr = imgStr.concat(`<img src="${document.images[i].src}" alt="${document.images[i].alt}" width="320px" height="320px"/>`);
};
imgStr = imgStr.concat(`<h1>Scripts Found</h1>`);
for (let j = 0; j < document.scripts.length; j++) {
imgStr = imgStr.concat(`${j+1}. scripts src="${document.scripts[j].src}" <br>`);
};
document.body.innerHTML = imgStr;
We should write image tag in html code as- <img src="image.jpg" style=" height: 0px; width:0px ;etc. ">
We can also declare img src path.
after that in js file we should write
let a=document.images;
After that implement we can get all images and console will show the "HTMLCollection[img]
now we should write scripts tag
Let a=document.scripts
result will be HTMLCollection[scripts, scripts]
And it was easy
thanks a lot #codewithharry
Bhai Code ko zoom thora kr dia kren
ript, script, script, script.js-httpswwwyoutubecomytsjsbinwebanimationsnextliteminvflluX5aWwebanimationsnextliteminjs, script.js-httpswwwyoutubecomytsjsbincustomelementses5adaptervflsrwHZHcustomelementses5adapterjs, script.js-httpswwwyoutubecomytsjsbinwebcomponentssdvflPSjQ3Lwebcomponentssdjs, script, script, script, script.js-httpswwwyoutubecomytsjsbinschedulervfl0nTPXRschedulerjs, script.js-httpswwwyoutubecomytsjsbinwwwtamperingvflHhBVPuwwwtamperingjs, script.js-httpswwwyoutubecomytsjsbinwwwprepopulatorvfl8hLntFwwwprepopulatorjs, script.js-httpswwwyoutubecomytsjsbinspfvflqCgDoFspfjs, script.js-httpswwwyoutubecomytsjsbinnetworkvfl3EpVxjnetworkjs, script, script, script.js-chromeextensionpkedcjkdefgpdelpbcmbmeomcjbeemfmcast_senderjs, script, script, script, script, script, script, script, script, script.js-httpswwwyoutubecomytsjsbindesktop_polymer_sel_auto_svg_home_v2vfl6ZLdP3desktop_polymer_se…, script, script, script, script, script, script, script, www-widgetapi-script: script#www-widgetapi-script, web-animations-next-lite.min/web-animations-next-lite.min: script.js-httpswwwyoutubecomytsjsbinwebanimationsnextliteminvflluX5aWwebanimationsnextliteminjs, custom-elements-es5-adapter/custom-elements-es5-adapter: script.js-httpswwwyoutubecomytsjsbincustomelementses5adaptervflsrwHZHcustomelementses5adapterjs, webcomponents-sd/webcomponents-sd: script.js-httpswwwyoutubecomytsjsbinwebcomponentssdvflPSjQ3Lwebcompo
let img = document.images;
console.log(img);
Beauty 👍👍
great
console.log("Images And Scripts Tags");
im =document.images;
console.log(im);
console.log("Showing Images using specified Index");
console.log(document.images[1]);
sc =document.scripts;
console.log(sc);
console.log("Showing Script using specified Index");
console.log(document.scripts[0]);
Images And Scripts Tags
HTMLCollection(2) [img, img]0: img1: imglength: 2__proto__: HTMLCollection
Showing Images using specified Index
<img src="nature2.jpg">
HTMLCollection [script]0: script1: scriptlength: 2__proto__: HTMLCollection
Showing Script using specified Index
<script src="jsfile/functions.js"></script>
Sir I have solve this quiz on this page console
document.images
HTMLCollection { 0: img#img.style-scope.yt-img-shadow, 1: img#img.style-scope.yt-img-shadow, 2: img#img.style-scope.yt-img-shadow, 3: img#img.style-scope.yt-img-shadow, 4: img#img.style-scope.yt-img-shadow, 5: img#img.style-scope.yt-img-shadow, 6: img#img.style-scope.yt-img-shadow, 7: img#img.style-scope.yt-img-shadow, 8: img#img.style-scope.yt-img-shadow, 9: img#img.style-scope.yt-img-shadow
, … }
document.images[0]
<img id="img" class="style-scope yt-img-shadow" alt="" src="https://yt3.ggpht.com/-k…ffffff-rj-k-no/photo.jpg" width="32" height="32">
document.images[0].src
"https://yt3.ggpht.com/-kJBfC5yP2B8/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdIK7wwEnPG3QbjikkyNvAcxMAUnQ/s88-mo-c-c0xffffffff-rj-k-no/photo.jpg"
document.scripts
HTMLCollection { 0: script, 1: script, 2: script, 3: script, 4: script, 5: script, 6: script, 7: script, 8: script, 9: script
, … }
document.scripts[0]
<script src="https://www.googletagser…t/osd.js?cb=%2Fr20100101">
document.scripts[0].src
"https://www.googletagservices.com/activeview/js/current/osd.js?cb=%2Fr20100101"
bhai kya khaty ho ap
Harry bhai please meri help kroo please mera Visual studio code install to ho gya h but Run nhi ho ra usme kuch please help kro. Bhai please
Awosem tutorial
After completing this course Please make video for ruby and linux. Please brother. Love and respect from Bangladesh.
Sir enroll android studio course please 😊
best javascript tutorial in youtube
Excellent coder
ap se coding sakh kar me apne class me sab ko haran kya mare teacher ne pocha atna acha coding kaha se sakhya me bola code with harry YouTube pe kamal ka banda hai coding ase sakhta hai jise urdu hu 😎😎😎.
ap se coding sakh kar me apne class me sab ko haran kya mare teacher ne pocha atna acha coding kaha se sakhya me bola code with harry YouTube pe kamal ka banda hai coding ase sakhta hai jise urdu hu 😎😎😎.
Ui/UX Training Come with me and subscribe