tag:blogger.com,1999:blog-39520096549062378082024-03-24T16:32:31.958-07:00progrramers Progrramers is optimized for Web Development Tutorials of Laravel & MEAN Stack Frameworks, ExpressJS, AngularJS, NodeJS, JavaScript, PHP, SQLProgrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.comBlogger68125tag:blogger.com,1999:blog-3952009654906237808.post-79081932336239039962023-11-02T04:56:00.000-07:002023-11-02T04:56:18.670-07:00Career Paths in Machine Learning<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGg_aleD_4-TCJlnC1RUS_rGdCNhLZXoNby6T2WjhaGkMTmxHnXuLNYz4d6nscnUO3jIyauI-dTjVfW3KKw4dx2uYhUJL9LzqsCljtETtRxrO1o85q3EdKzjdsH3sKg1c_xs34Zp2r5HcDRUO2Xij10h8LK-HSF6m271ifAt89VHXwb501T9lletMXWA/s1600/Career_Paths_in_Machine_Learning.jpg" alt = "Career Paths in Machine Learning" ></noscript>
<p>Machine learning is a rapidly growing field with a wide range of career opportunities. Machine learning engineers, data scientists, and other machine learning professionals are in high demand across all industries, from tech giants to startups.</p>
<p>Here are some of the most popular career paths in machine learning:</p>
<ol>
<li><strong>Machine Learning Engineer</strong>: Machine learning engineers design, build, and maintain machine learning models and systems. They work on data collection, preprocessing, model training, and deployment.</li>
<li><strong>Data Scientist</strong>: Data scientists use machine learning and statistical techniques to analyze data and extract valuable insights. They often work with large datasets to solve complex business problems.</li>
<li><strong>Research Scientist</strong>: Research scientists are typically involved in cutting-edge research in machine learning and artificial intelligence. They may work in academia, industry research labs, or at tech companies.</li>
<li><strong>AI/ML Researcher</strong>: AI/ML researchers focus on advancing the field of machine learning by developing new algorithms and models. They often publish their findings in academic journals and conferences.</li>
<li><strong>Data Analyst</strong>: Data analysts work with data to identify trends, create visualizations, and provide actionable insights for decision-makers. Machine learning is often used to enhance their analytical capabilities.</li>
<li><strong>Computer Vision Engineer</strong>: Computer vision engineers specialize in developing algorithms and models for image and video analysis. They work on applications like facial recognition, object detection, and autonomous vehicles.</li>
<li><strong>Natural Language Processing (NLP) Engineer</strong>: NLP engineers work on language-related tasks, such as text analysis, sentiment analysis, chatbots, and language translation using machine learning techniques.</li>
<li><strong>Robotics Engineer</strong>: Robotics engineers use machine learning to enhance the capabilities of robots, making them more adaptive and intelligent. They work in fields like autonomous robotics and industrial automation.</li>
<li><strong>AI Ethics and Fairness Researcher</strong>: With the growing concern over AI bias and ethical issues, there is a demand for professionals who specialize in ensuring AI and ML systems are developed in a responsible and unbiased manner.</li>
<li><strong>Machine Learning Product Manager</strong>: Product managers with expertise in machine learning oversee the development of ML-based products and services, ensuring they align with business goals and user needs.</li>
<li><strong>Machine Learning Consultant</strong>: Consultants help organizations implement machine learning solutions, providing expertise on strategy, model selection, and system integration.</li>
<li><strong>AI/ML Instructor or Educator</strong>: As the demand for machine learning knowledge grows, there are opportunities to teach and educate others through courses, workshops, and online tutorials.</li>
<li><strong>AI/ML Entrepreneur</strong>: If you have a novel machine learning idea, you can start your own AI/ML company. This path often involves a combination of technical skills and entrepreneurial abilities.</li>
</ol>
<p>To get started in a machine learning career, you will need a strong foundation in computer science and mathematics. A bachelor's degree in computer science, mathematics, or a related field is required for most machine learning jobs. Many employers also prefer candidates with a master's degree or PhD in machine learning, artificial intelligence, or a related field.</p>
<p>Keep in mind that the machine learning field evolves rapidly, and new roles and opportunities may emerge. To build a career in machine learning, it's important to continuously update your skills, stay informed about the latest developments in the field, and consider formal education or certifications if necessary. Networking and participating in machine learning communities and conferences can also be beneficial for career growth.</p>
<h2>Manchine Learning Jobs</h2>
<p><strong>Here are some tips for finding a machine learning job</strong>:</p>
<ol>
<li>Network with other machine learning professionals. Attend meetups, conferences, and other events where you can meet people who work in the field of machine learning.</li>
<li>Contribute to open-source machine learning projects. This is a great way to gain experience and demonstrate your skills to potential employers.</li>
<li>Build a portfolio of your work. This could include machine learning projects you have worked on, blog posts you have written, or tells you have given.</li>
<li>Prepare for machine learning interviews. There are many resources available online and in libraries that can help you prepare for machine learning interviews.</li>
<li>The job outlook for machine learning engineers and other machine learning professionals is very positive. The Bureau of Labor Statistics projects that employment of machine learning engineers will grow 22% from 2020 to 2030, much faster than the average for all occupations.</li>
</ol>
<p>If you are interested in a career in machine learning, there is no better time to get started. The field is growing rapidly and there are many opportunities for talented and motivated individuals.</p>
<p><strong>You can Also Read</strong></p>
<p><a href="https://www.progrramers.com/2023/11/what-is-machine-learning.html">What is Machine Learning?</a></p>Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com0tag:blogger.com,1999:blog-3952009654906237808.post-47698498472828644982023-11-02T04:48:00.001-07:002023-11-02T04:48:26.877-07:00What is Machine Learning?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzLDKoAjME9yiAKiCfSVy_zXJUIqQkn0eaFnxJ4R9XdSrIfm0W3KXunsca_NuBgkabAQjPP0kRWVgJFkxV-o-b7UHOZIPv-mxOkL4Nr4-gvLCQhIq3l5Owky18f4nKtTeiUTv7Z6ZbNfnzK-ElPPyOlgnhLN4QFdMClA1VXB2QcLK79krTNdAU2N_Ebjg/s1600/What_is_Machine_Learning.jpg" alt = "What is Machine Learning" ></noscript>
<p><strong>Machine Learning</strong> (<strong>ML</strong>) is a subset of <strong>artificial intelligence</strong> (<strong>AI</strong>) that allows software applications to become more accurate in predicting outcomes without being explicitly programmed to do so. Machine learning algorithms use historical data as input to predict new output values.</p>
<p>It focuses on the development of algorithms and statistical models that enable computers to improve their performance on a specific task through experience. In essence, machine learning systems use data to learn and make predictions or decisions without being explicitly programmed for every possible scenario. The core idea is to give computers the ability to learn from data and adapt their behavior based on that learning.</p>
<p><strong>Key Point of above paragraph</strong></p>
<ul>
<li>Machine Leaning is a type AI.</li>
<li>It allows software application to become more accurate</li>
<li>Machine Leaning uses historical data to predict new outcomes.</li>
<li>There is no need of explicitly programmed code for the outcomes of every possible scenario.</li>
</ul>
<h2>Where Machine Learning is used</h2>
<p>Machine learning is used in a wide range of applications, from recommendation systems and fraud detection to self-driving cars and medical diagnosis. It has the potential to automate tasks, improve decision-making, and enhance our understanding of complex data patterns, making it a vital component of modern AI systems. Here are some key concepts and components of machine learning:</p>
<ul>
<li><strong>Data</strong>: Data is the foundation of machine learning. ML algorithms require large datasets to learn patterns, relationships, and trends. These datasets can be structured (e.g., databases) or unstructured (e.g., text, images, and videos).</li>
<li><strong>Algorithms</strong>: Machine learning algorithms are mathematical models that are used to identify patterns and relationships within data. These algorithms can be categorized into various types, including supervised learning, unsupervised learning, and reinforcement learning, each with its own characteristics and applications.</li>
<li><strong>Training</strong>: ML models are trained on historical data, which involves the process of providing the algorithm with examples and letting it learn from those examples. During training, the algorithm adjusts its internal parameters to minimize the difference between its predictions and the actual outcomes.</li>
<li><strong>Prediction and Inference</strong>: After training, the ML model can make predictions or inferences on new, unseen data. For example, a trained ML model for image recognition can classify new images it has never seen before.</li>
<li><strong>Feedback Loop</strong>: Machine learning systems often incorporate a feedback loop, where the model's predictions are compared to real outcomes, and the model is updated or retrained to improve its performance over time.</li>
</ul>
<p><strong>ML algorithms</strong> can be used to solve a wide range of problems, including:</p>
<ul>
<li><strong>Classification</strong>: Predicting the category of a new data point, such as whether an email is spam or not spam.</li>
<li><strong>Regression</strong>: Predicting a numerical value, such as the price of a house or the number of customers who will visit a store on a given day.</li>
<li><strong>Clustering</strong>: Grouping similar data points together, such as grouping customers based on their purchase history.</li>
<li><strong>Anomaly detection</strong>: Identifying unusual or unexpected data points, such as fraudulent transactions or medical conditions.</li>
<li><strong>Recommendation systems</strong>: Recommending products, movies, or other items to users based on their past preferences.</li>
</ul>
<h2>Type of Machine Learning Algorithms</h2>
<p><strong>ML algorithms</strong> are trained on a set of known data, called the training set. The algorithm learns to identify patterns in the training data and then uses those patterns to make predictions on new data.</p>
<p>There are three main types of machine learning algorithms:</p>
<ul>
<li><strong>Supervised learning</strong>: In supervised learning, the algorithm is given both the input data and the desired output data. The algorithm learns to predict the desired output data for new input data.</li>
<li><strong>Unsupervised learning</strong>: In unsupervised learning, the algorithm is only given the input data. The algorithm learns to identify patterns in the input data without any prior knowledge of the desired output.</li>
<li><strong>Reinforcement learning</strong>: In reinforcement learning, the algorithm learns by interacting with its environment. The algorithm is rewarded for taking actions that lead to desired outcomes and penalized for taking actions that lead to undesired outcomes.</li>
</ul>
<h2>Growth of Machine Learning as Tool</h2>
<p>Machine learning is a rapidly growing field with a wide range of applications. It is used in industries such as healthcare, finance, technology, and retail.</p>
<p>Here are some examples of how machine learning is used in the real world:</p>
<ul>
<li><strong>Email spam filters</strong>: Machine learning algorithms are used to identify and filter out spam emails.</li>
<li><strong>Fraud detection</strong>: Machine learning algorithms are used to detect fraudulent transactions in real time.</li>
<li><strong>Product recommendations</strong>: Machine learning algorithms are used to recommend products to users based past purchase on their history and browsing behavior.</li>
<li><strong>Medical diagnosis</strong>: Machine learning algorithms are used to assist doctors in diagnosing diseases and recommending treatments.</li>
<li><strong>Self-driving cars</strong>: Machine learning algorithms are used to power the self-driving features in cars.</li>
</ul>
<p>Machine learning is a powerful tool that can be used to solve a wide range of problems. As the amount of data available continues to grow, machine learning is likely to become even more important in the future.</p>
<p><a href="https://www.progrramers.com/2023/11/career-paths-in-machine-learning.html">Career Paths in Machine Learning</a></p>Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com0India20.593684 78.96288-7.7165498361788458 43.80663 48.903917836178849 114.11913tag:blogger.com,1999:blog-3952009654906237808.post-87803986377869608812023-10-05T20:45:00.000-07:002023-10-05T20:45:12.239-07:00What is JavaScript? - Prgrramers Explained<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIZC6RldsssVQlIhtx6hm3U3qfT1xuGRFYCK4pbqx7Mg6sVkMerJzu6uZHz10SCobzna2z431V-GnI-cUaekSY0hHOZ9B9e43C-34Cf4JnQbPgkBjMrDiODEkkj0RpdnpXIOcAto4Zac/h120/Learn+JavaScript+on+Progrramers+-+What+is+JavaScript.jpg" alt = "Learn JavaScript on Progrramers : What is JavaScript?" ></noscript>
<p><strong>JavaScript</strong> is a high-level, dynamic, and versatile programming language primarily used for adding interactive features and behavior to websites or web applications. It is often referred to as the "<strong>scripting language</strong>" for web development because it can be embedded directly into HTML code and unlike other programing languages (for e.g., C++), <strong>no need to compile</strong> to create dynamic and interactive web pages.</p>
<h2><strong>The Key Features of JavaScript</strong></h2>
<p><a title="JavaScript Tutorials" href="https://www.progrramers.com/search/label/JavaScript" target="_blank">JavaScript</a> is a very popular computer language around the world that is used for modern web development, due to its key features that make it completely flexible and user-friendly for developers. Following are some of the major features of JavaScript:</p>
<ul>
<li><strong>Client-Side Scripting</strong>: JavaScript runs in web browsers, allowing it to manipulate the <strong>Document Object Model</strong> (DOM) of a web page. This enables developers to change the content and appearance of web pages dynamically against the response to user actions without sending request to server.</li>
<li><strong>High-Level Language</strong>: JavaScript is a <strong>high-level language</strong>, which means it is designed to be more human-readable and easier to work with compared to low-level languages like Assembly or C.</li>
<li><strong>Dynamic Typing</strong>: JavaScript is dynamically typed, meaning variable types are determined at runtime, allowing for flexibility but also requiring careful handling of data types.</li>
<li><strong>Interactivity</strong>: JavaScript is commonly used for various web-related tasks, such as form validation, animations, image sliders, and interactive maps, making websites more engaging and user-friendly.</li>
<li><strong>Event-Driven</strong>: JavaScript is heavily event-driven, responding to user actions like clicks, keypresses, and mouse movements. This makes it well-suited for building responsive web applications.</li>
<li><strong>Cross-Platform</strong>: JavaScript is supported by all major web browsers, making it a cross-platform language. Developers can write code that works consistently across different browsers.</li>
<li><strong>Libraries and Frameworks</strong>: There are numerous JavaScript libraries and frameworks available, such as React, Angular, and Vue.js, that simplify the development of complex web applications by providing pre-built components and tools.</li>
<li><strong>Server-Side Development</strong>: In addition to client-side development, JavaScript can also be used for server-side development using technologies like Node.js. This allows developers to use the same language on both the client and server, improving code consistency and developer efficiency.</li>
</ul>
<p>In a whole sum JavaScript is an integral part of modern web development and is used alongside HTML and CSS to create interactive and dynamic web applications. It continues to evolve, with new features and capabilities being added to the language over time.</p>
<h2><strong>What is JavaScript Hoisting?</strong></h2>
<p>The <strong>hoisting</strong> feature in JavaScript, while it can be a source of confusion if not understood properly, also offers some benefits, and can be used intentionally in your code. Here are some <strong>advantages of hoisting</strong> in JavaScript:</p>
<ul>
<li><strong>Flexibility in Code Organization</strong>: Hoisting allows you to declare variables and functions at any point within a function or global scope, and you can still use them before their actual declaration in the code. This flexibility can help with code organization by allowing you to group related variables and functions together logically in your code, even if they are used before their declaration.</li>
<li><strong>Function Declarations Before Use</strong>: Hoisting with function declarations allows you to define functions after they are used in your code, which can make your code more readable and intuitive. This is particularly helpful when you have a set of related functions and you want to call them in a specific order.</li>
<li><strong>Ease of Debugging</strong>: When debugging code, hoisting can sometimes make it easier to identify issues related to variable and function usage. Since all declarations are moved to the top of their containing scope during the compilation phase, it's easier to spot undeclared variables or functions.</li>
</ul>
<p>However, it's important to note that while these benefits exist, relying too heavily on hoisting can also lead to code that is difficult to understand and maintain. To maximize the benefits of hoisting while minimizing potential issues, consider the following best practices:</p>
<ul>
<li>Declare <strong>variables</strong> and <strong>functions</strong> at the top of their respective scopes to make your code more predictable and easier to read.</li>
<li>Avoid depending on hoisting for variable initialization or function assignment before their actual declaration.</li>
<li>Use let and const instead of var for <strong>variable declarations</strong> to improve block scoping and reduce <strong>hoisting-related surprises</strong>.</li>
<li>Always strive for clear and well-organized code, even if hoisting allows for flexibility in declaration placement.</li>
<li>Understanding how hoisting works and using it judiciously can help you write more maintainable and organized JavaScript code.</li>
</ul>
<hr />
<h3>JavaScript Tutorials Link</h3>
<ul>
<li><a href="https://www.progrramers.com/2018/05/Java-Script-Tutorials-Introduction.html">Java Script Tutorials - Introduction</a></li>
<li><a href="https://www.progrramers.com/2018/06/java-script-tutorials-what-java-script.html">Java Script Tutorials - What Java Script Can Do?</a></li>
<li><a href="https://www.progrramers.com/2019/10/javascript-how-to-how-create-cascading-dropdown-using-plain-js-progrramers.html">JavaScript How To : How To Create Cascading Dropdown Using Plain JS - Progrramers</a></li>
<li><a href="https://www.progrramers.com/2020/05/javascript-tutorials-where-and-how-to-use-javascript.html">JavaScript Tutorials : Where And How To Use JavaScript - Progrramers</a></li>
<li><a href="https://www.progrramers.com/2020/05/javascript-tutorial-5-methods-to-target-html-element.html">JavaScript Tutorial : 5+ Methods To Target HTML Element In JavaScript, HTML JavaScript DOM</a></li>
<li><a href="https://www.progrramers.com/2020/06/javascript-tutorial-what-are-ways-to-get-output-data-javascript.html">JavaScript Tutorial: What Are Ways To Get Output Data In JavaScript?</a></li>
<li><a href="https://www.progrramers.com/2022/03/javascript-tutorial-css-selectors-combinators.html">JavaScript Tutorial: Target HTML Elements With CSS Selectors & Combinators</a></li>
</ul>
<hr />
<h3>JavaScript Tutorials <span style="font-weight: bold; color: red;">YouTube</span> Videos Link</h3>
<ul>
<li><a href="https://www.youtube.com/watch?v=ZgDIXIrmY8g">Get Started With JS: Find Out What JavaScript Can Do!</a></li>
<li><a href="https://www.youtube.com/watch?v=2fIEdXOyTWI">JS Tutorial : JavaScript Statement & Syntax (2024)</a></li>
<li><a href="https://www.youtube.com/watch?v=7yyIXDY2ng0">JS Tutorials : What is variables and how to use it (2024)</a></li>
<li><a href="https://www.youtube.com/watch?v=F4DqTVVx8JQ">JS Tutorials : What is variables scope in JavaScript. (2024)</a></li>
<li><a href="https://www.youtube.com/watch?v=qy4oS_BqjCo">JS Tutorials : What is Operators in JavaScript (Arithmetic Operators 2024)</a></li>
<li><a href="https://www.youtube.com/watch?v=Ci9c53NO-ow">JS Tutorials: What are Assignment Operators in JavaScript | JS#006 #javascript #javascript_tutorial</a></li>
</ul>
<p>Please Subscribe to Our YouTube Channel : <a href="https://www.youtube.com/@progrramers/">www.YouTube.com/@progrramers</a></p>
<div class="separator" style="clear: both; text-align: center;"><iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="ZgDIXIrmY8g" width="400" height="322" src="https://www.youtube.com/embed/ZgDIXIrmY8g"></iframe></div>Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com0tag:blogger.com,1999:blog-3952009654906237808.post-52770043654598253732023-01-22T19:09:00.001-08:002023-01-22T19:13:38.355-08:00HTML for Beginners, Everything You need to know.<p>HTML stands for Hypertext Markup Language. It is the standard language used to create web pages. <a title="HTML Document" href="https://www.progrramers.com/2017/11/html-document.html">HTML documents</a> consist of elements and tags, which are used to create the structure and content of a webpage.</p>
<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGNM_1eswL_pd1Wd461l5lLO8MNNtvy1U72-UaFl4JN9v5wMIkEYkmOviYvMthXaZ8xmpSbvsOXdva1MphP9UiflJmJBypNOVzEdWqIE-B6a5z61P-CaxzdoizP-kmH00_3LUz8pdCGRM/h120/HTML+Important+Tags+%2526Elements.jpg"></noscript>
<p>HTML consists of a series of tags, which are used to define the structure and content of a web page. The most basic HTML tags include the <html>, <head>, <title>, <body>, and <p> tags.</p>
<p>An HTML element is a block of content, such as a paragraph, heading, or image. Elements are surrounded by tags, which are used to define the type of element and provide additional information about it. For example, the <code><p></code> tag is used to create a paragraph element, while the <code><img></code> tag is used to create an image element.</p>
<p>The basic structure of an HTML document consists of a head and a body. The head contains information about the document, such as the title and meta data, while the body contains the actual content of the webpage.</p>
<p>The <code><!DOCTYPE></code> tag is used to specify the version of HTML that the document is written in. The <code><html></code> tag surrounds the entire document, and within it, the <code><head></code> and <code><body></code> tags are used to define the head and body sections of the document.</p>
<p>The <code><head></code> section contains information about the document, such as the title, which is displayed in the browser's title bar or tab, and <a title="HTML Metadata" href="https://www.progrramers.com/2017/11/html5-tutorial-html-meta.html">metadata</a>, which provides information about the document to search engines and other web crawlers. The <code><title></code> tag is used to define the title of the document, while the <code><meta></code> tag is used to provide additional information such as keywords and a description.</p>
<p>In addition to these basic tags, there are many other tags that can be used to create more complex web pages. These include tags for headings, lists, links, images, and more.</p>
<p>For example, headings are defined using the <h1> to <h6> tags, with <h1> being the highest level heading and <h6> being the lowest. Lists can be created using the <ul> (unordered list) and <ol> (ordered list) tags, along with the <li> tag for each list item.</p>
<p>The <code><body></code> section contains the actual content of the webpage. The content is divided into elements, such as <a title="HTML Heading" href="https://www.progrramers.com/2017/12/html5-tutorial-html-headings.html">HTML headings</a>, <a title="HTML Paragraph" href="https://www.progrramers.com/2017/12/html5-tutorial-html-paragraph-and.html">HTML paragraphs</a>, and images, which are defined using tags. Common tags used in the body include:</p>
<ul>
<li><code><h1></code> to <code><h6></code>: headings</li>
<li><code><p></code>: paragraphs</li>
<li><code><img></code>: images</li>
<li><code><a></code>: links</li>
<li><code><ul></code>: unordered lists</li>
<li><code><ol></code>: ordered lists</li>
<li><code><li></code>: list items</li>
<li><code><div></code>: divisions or sections of the page, often used for layout and styling purposes</li>
<li><code><span></code>: a small piece of content, often used for styling purposes</li>
</ul>
<p>Images can be added to a web page using the <img> tag. The "src" attribute is used to specify the URL of the image file, while the "alt" attribute is used to provide a text description of the image for accessibility purposes.</p>
<p>HTML also includes several <a title="HTML Attributes" href="https://www.progrramers.com/2017/11/html-tutorial-html-attributes.html">attributes</a>, which are used to provide additional information about an element. For example, the <code>src</code> the attribute is used to specify the source of an image or script and the <code>href</code> the attribute is used to specify the link of an anchor tag.</p>
<p>HTML also includes tags for creating tables, forms, and other types of content. The <table> tag is used to create tables, with <tr> (table row), <th> (table header), and <td> (table data) tags used to define the rows, headers, and cells of the table, respectively. Forms can be created using the <form> tag, along with various input types such as text fields, checkboxes, and radio buttons, which are defined using the <input> tag.</p>
<p>HTML5 is the latest version of the HTML language and it was published in October 2014. HTML5 introduced new tags and attributes that can be used to create more interactive and multimedia-rich web pages. Some of the new tags in HTML5 include:</p>
<ul>
<li><strong><article></strong> – used to represent a self-contained composition in a document, such as a forum post, a magazine or newspaper article, or a blog entry</li>
<li><strong><aside></strong> – used to represent a section of a page that contains content that is tangentially related to the content around the aside element, and which could be considered separate from that content</li>
<li><strong><audio></strong> – used to embed audio files, such as music or sound effects, into a web page</li>
<li><strong><canvas></strong> – used to create graphics and animations on the fly using JavaScript</li>
<li><strong><figcaption></strong> – used to provide a caption for a <figure> element</li>
<li><strong><figure></strong> – used to represent a piece of self-contained flow content, typically with a caption, that is typically referenced as a single unit from the main flow of the document</li>
<li><strong><footer></strong> – used to represent a container for the footer of a document or section</li>
</ul>
<p>It is used in conjunction with other languages such as JavaScript and CSS to create dynamic, interactive websites.</p>
<p><a title="Cascading Style Sheets (CSS)" href="https://www.progrramers.com/2018/01/css-tutorial-introduction.html">Cascading Style Sheets (CSS)</a> is a separate language that is used to control the layout and style of an HTML document. CSS can be used to change the font, color, & size, etc. spacing of elements, as well as to control the layout of the page. CSS can be added to an HTML document in several ways, including:</p>
<ul>
<li>using the <code>style</code> attribute within an HTML element</li>
<li>using a <code><style></code> tag in the head of the document</li>
<li>linking to an external CSS file using the <code>link</code> tag</li>
</ul>
<p><a title="JavaScript" href="https://www.progrramers.com/2018/05/Java-Script-Tutorials-Introduction.html">JavaScript</a> is another language that is often used in conjunction with HTML and CSS. JavaScript is a programming language that can be used to add interactivity and dynamic content to a webpage. JavaScript can be added to an HTML document in several ways, including:</p>
<ul>
<li>using the <code>script</code> tag within the body of the document</li>
<li>linking to an external JavaScript file using the <code>script</code> tag</li>
</ul>
<p>There are more HTML element that described below:</p>
<ol>
<li><strong><html></strong> - Defines the start and end of an HTML document</li>
<li><strong><head></strong> - Contains meta information about the document, such as the title</li>
<li><strong><title></strong> - Defines the title of the document, which is displayed in the browser's title bar</li>
<li><strong><body></strong> - Contains the main content of the web page</li>
<li><strong><p></strong> - Defines a paragraph of text</li>
<li><strong><h1></strong> to <strong><h6></strong> - Defines headings, with <h1> being the highest level and <h6> being the lowest</li>
<li><strong><ul></strong> and <ol> - Defines unordered and ordered lists, respectively</li>
<li><strong><li></strong> - Defines a list item</li>
<li><strong><a></strong> - Defines a hyperlink</li>
<li><strong><img></strong> - Defines an image</li>
<li><strong><div></strong> - Defines a section of the document as a block-level element</li>
<li><strong><span></strong> - Defines a section of the document as an inline element</li>
<li><strong><header></strong> - Defines a header section of a document or a section</li>
<li><strong><nav></strong> - Defines navigation links</li>
<li><strong><main></strong> - Defines the main content of a document</li>
<li><strong><article></strong> - Defines a self-contained composition in a document</li>
<li><strong><section></strong> - Defines a section of a document</li>
<li><strong><aside></strong> - Defines a section of a page that contains content related to the main content</li>
<li><strong><footer></strong> - Defines a container for the footer of a document or section</li>
<li><strong><form></strong> - Defines a form for user input</li>
<li><strong><input></strong> - Defines various types of input fields, such as text, radio buttons, and checkboxes</li>
<li><strong><select></strong> - Defines a drop-down list</li>
<li><strong><textarea></strong> - Defines a multiline input field</li>
<li><strong><label></strong> - Defines a label for an input element</li>
<li><strong><fieldset></strong> - Groups related elements in a form</li>
<li><strong><legend></strong> - Defines a caption for a fieldset</li>
<li><strong><button></strong> - Defines a clickable button</li>
<li><strong><table></strong> - Defines a table</li>
<li><strong><tr></strong> - Defines a table row</li>
<li><strong><th></strong> - Defines a table header cell</li>
<li><strong><td></strong> - Defines a table data cell</li>
<li><strong><thead></strong> - Defines a container for the header content in a table</li>
<li><strong><tbody></strong> - Defines a container for the body content in a table</li>
<li><strong><tfoot></strong> - Defines a container for the footer content in a table</li>
<li><strong><colgroup></strong> - Specifies groups of columns in a table for formatting</li>
<li><strong><col></strong> - Specifies properties for a column in a table</li>
<li><strong><caption></strong> - Defines a caption for a table</li>
<li><strong><style></strong> - Defines a section for CSS styles</li>
<li><strong><script></strong> - Defines a section for JavaScript code</li>
<li><strong><link></strong> - Defines a link to an external resource</li>
<li><strong><meta></strong> - Defines metadata about the document</li>
<li><strong><base></strong> - Defines the base URL for all relative URLs in a document</li>
<li><strong><audio></strong> - Defines an audio player</li>
<li><strong><video></strong> - Defines a video player</li>
</ol>
<p>There are many more which will be explored in upcoming articles. Meanwhile, stay tuned with us on <a title="Progrramers : Web Development Tutorials" href="https://www.progrramers.com">Progrramers</a>. We will see you again soon.</p>
<p>Thank You and Have a nice learning experience.</p>Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com0India20.593684 78.96288-7.7165498361788458 43.80663 48.903917836178849 114.11913tag:blogger.com,1999:blog-3952009654906237808.post-62718932690859024742022-12-11T19:09:00.003-08:002022-12-12T03:27:14.770-08:00What is HTML? - Advance Concept of HTML Progrramers Explained<noscript><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTD-DU4tMprNI5SD4T9m8b1cL69WWMJn1CnQh6mnnd4vyeGxNTUnAUeMChXQtZWZKAF5hdD42i_EydDfRGZn5jOiTAJezTI-3H-_HaWRYLjB8w5VUeusnnNP1vtY9D_cEfDrQ7MTh3WZQ/h120/What_is_HTML_Caption_Image.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="Caption Image of What is HTML?" border="0" data-original-height="1975" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTD-DU4tMprNI5SD4T9m8b1cL69WWMJn1CnQh6mnnd4vyeGxNTUnAUeMChXQtZWZKAF5hdD42i_EydDfRGZn5jOiTAJezTI-3H-_HaWRYLjB8w5VUeusnnNP1vtY9D_cEfDrQ7MTh3WZQ/s1600/What_is_HTML_Caption_Image.png" title="What is HTML? - Advance Concept of HTML Progrramers Explained" width="129" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Image no. one</td></tr></tbody></table></noscript>
<p>Hello, Friends Welcome Back to Progrramers. In this article, we will go to know “<strong>What is HTML?</strong>” We all, who are interested in computer programming, know very well that HTML is a language known as “<strong>Hyper Text Markup Language</strong>”. But the actual question is “What is a <strong>markup</strong> language?”.</p>
<p>So, before we go ahead, we must take a brief look at important points about What is HTML?</p>
<ol>
<li>First, we will contrast between standard and non-standard HTML webpages.</li>
<li>And we will come to the point of knowing “What is HTML and where it exists?”.</li>
<li>Then we will give a little focus on knowing the requirement of HTML and What does HTML do?</li>
<li>And then, we will take a brief look at HTML Elements.</li>
<li>At last, we will understand what HTML documents and HTML Web-page are.</li>
</ol>
<p><strong>The contrast between Standard and Non-Standard webpages</strong>.</p>
<p><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiNV6uGXE1fgIEte_knn9AB__Dj8lhuDcBRKQWolOLoFsHUhkIBfq8Z7fm4HyP7Xi2ydh3WvHdDnkjnG7g7hkCrNrh_kVdL0T0LUihCLMbDxKx01y5ltDO8Sr8XAXgHvmb5YOmO2m91svBn2MVdu4wAXtN78AnZIdvDTDYbe4asnTxhP2FhTA0ezOO/s1975/NewsPaper.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="News Page Cutting Image" border="0" data-original-height="1975" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiNV6uGXE1fgIEte_knn9AB__Dj8lhuDcBRKQWolOLoFsHUhkIBfq8Z7fm4HyP7Xi2ydh3WvHdDnkjnG7g7hkCrNrh_kVdL0T0LUihCLMbDxKx01y5ltDO8Sr8XAXgHvmb5YOmO2m91svBn2MVdu4wAXtN78AnZIdvDTDYbe4asnTxhP2FhTA0ezOO/w129-h200/NewsPaper.jpg" title="Understand the standard concept of article writting" width="129" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Image no. one</td></tr></tbody></table><br />Now you can see in <span style="text-decoration: underline;">image no. one</span> there is News Paper Image. It has many news articles. If you focus on it, every news article starts with a proper bold heading and subheading. Why it is done? It is done with a purpose. It is a standard format of the article that keeps readers engaged with the content. The heading tells all about the news. By reading the heading reader knows what the entire article is all about.</p><p><br /></p><p>This is a standard format that is also followed by the <strong>Webpages</strong>, <strong>Blogs</strong>, and <strong>Articles</strong> on World wide web. Now you can see in <span style="text-decoration-line: underline;">image no. two</span> there are two web pages side by side. When you observe both pages you will not find any difference except typography. But these two web pages have a big difference.</p><p><br /></p>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3V6AX6YiO_vy6weXaaGzk295_G8bus9ztseEEPL7Q8RDbKyoRvQLWUCFsRmV_93LcJ-j9rHAbYdT6bmqQdldARXNosns0WOFHa-lAAMg7M_TmHbyENOP_iRQ_JC0jhwxRIwDqol8CZ4Mbyd0RhsU4sqoq4y2cMD7Ur3_TOyuoT1zqlmYNX7rIKHfi/s1920/side_by_side_contrast_between_standard_non_standard_web_pages.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Side by Side comparison Image" border="0" data-original-height="1080" data-original-width="1920" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3V6AX6YiO_vy6weXaaGzk295_G8bus9ztseEEPL7Q8RDbKyoRvQLWUCFsRmV_93LcJ-j9rHAbYdT6bmqQdldARXNosns0WOFHa-lAAMg7M_TmHbyENOP_iRQ_JC0jhwxRIwDqol8CZ4Mbyd0RhsU4sqoq4y2cMD7Ur3_TOyuoT1zqlmYNX7rIKHfi/w640-h360/side_by_side_contrast_between_standard_non_standard_web_pages.png" title="Comparison of standard and non-standard web pages" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Image No. Two</td></tr></tbody></table><p><br /></p>
<p>The left side web page is formatted with <strong>HTML</strong> to Heading, Sub Heading, and Paragraphs. On the other side web page is also formatted with HTML but with the obsoleted version of HTML. Currently, the first draft of the <strong>HTML 5.3</strong> version is recommended by <strong>W3C</strong> (Wide Web Consortium) which is already retired in the year 2021. If we remove HTML from this web page, it will look something like shown in <span style="text-decoration: underline;">image no. three</span>.</p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMcr60qL7y2M0Gjr7UwXx_r3H5vt8tfjc0fWNqXjUbww0Z7MDouYsBlYcUlTyKiVYCi05LSCB2cPpFhsB275j-MVKlTUGarnPUZYf3LFnLj8bhtCppOGCgbaJS76TOTg692AH_p-gVOeVBKS_vCovMgquUgbPjTx-BSNF8zpu7lRFcpRd2Q5PUA-Vm/s957/a_web_ppge_without_html.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="A web page image with no HTML" border="0" data-original-height="918" data-original-width="957" height="614" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMcr60qL7y2M0Gjr7UwXx_r3H5vt8tfjc0fWNqXjUbww0Z7MDouYsBlYcUlTyKiVYCi05LSCB2cPpFhsB275j-MVKlTUGarnPUZYf3LFnLj8bhtCppOGCgbaJS76TOTg692AH_p-gVOeVBKS_vCovMgquUgbPjTx-BSNF8zpu7lRFcpRd2Q5PUA-Vm/w640-h614/a_web_ppge_without_html.png" title="A web page image with no HTML" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Image no. Three</td></tr></tbody></table><br /><p><br /></p>
<p>With the beginning of the <strong>Search Engine</strong> era, a huge change came into the center of the world wide web: searching any content on search engines like Google, Yandex, Bing, Yahoo, etc. If you are looking for something on the internet just open Google and type the main words related to your content and the search engine brings a list of websites ranked by their content quality, popularity, user reaction, and many more things. Search ranking required many more features to be accurate on the web pages and it can be done with <strong>HTML</strong>. HTML provides scope to format the content of the article and display it on web pages.</p>
<p>On your screen’s left side is a standard web page and, on another side, there is also a web page that follows no standard. If want to check, open a website <a href="https://www.seobility.net/en/seocheck/"><strong>https://www.seobility.net/en/seocheck/</strong></a> that can check search engine ranking and observe the results. You can in the results there is a big difference. The SEO score of the left side page is 66% but, on another side, the score is only 46%. We will discuss the SEO score in later videos.</p>
<p><strong>What is HTML and where it exists?</strong></p>
<p><strong><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xMXyj6d5f63Ci_03QMguecutAAgYMYDREoAsYub_PlhPN7ti7L9561cqAv7jawHF0KI1NAiSAW_KaVF6IcRL-1HIi83pPyvi_C8vtwn1qepHbXnxd_c4eHNRLHB9DoBVwPz9CVYgxizLAD34GPZZKp9tBJlkUhYhqnP10ZGDC3l5jA9npoQcw9d6/s1280/where_does_html_exist.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Where does HTML exist?" border="0" data-original-height="720" data-original-width="1280" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xMXyj6d5f63Ci_03QMguecutAAgYMYDREoAsYub_PlhPN7ti7L9561cqAv7jawHF0KI1NAiSAW_KaVF6IcRL-1HIi83pPyvi_C8vtwn1qepHbXnxd_c4eHNRLHB9DoBVwPz9CVYgxizLAD34GPZZKp9tBJlkUhYhqnP10ZGDC3l5jA9npoQcw9d6/w320-h180/where_does_html_exist.png" title="Where does HTML exist?" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Where does HTML exist?</td></tr></tbody></table><br />HTML</strong> is a <strong>client-side markup language</strong> program that exists on world wide web clients like “Web browser applications etc.”. HTML Stands for “<strong>H</strong>yper <strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage”. HTML is used the create web pages for web applications.</p>
<p><strong> </strong></p>
<p><strong>Why is HTML required what does HTML do?</strong></p>
<p><strong>The requirement of HTML</strong> can be understood by understanding the working method of data on the world wide web (internet). To understand this let’s assume the example of opening a webpage on a computer. Whenever the user clicks any link or enters a URL in the browser to open a webpage then a request is sent to the server and the server takes this request to process the query and develop the response data and send it to the user, as a result, the user gets the response data on the webpage.</p>
<p>These response data are called “Hyper Text Data” which is encoded and sometimes encrypted with another program and also required a data traveling medium which is called “Transmission Protocol”. This data must be displayed on the user’s screen in a proper readable format, therefore, the response data must be marked with appropriate tags to separate the heading, subheading, paragraph, links, and other kinds of data on web pages. On the user’s side, these marking tags must be parsed by a program which is these days known as HTML.</p>
<p><strong>What are the HTML Tags or Elements?</strong></p>
<p>An HTML web page consists of several <strong>HTML tags</strong>. Together these tags create a DOM tree which is processed on web browsers to build a web page. HTML tags are used to separate the data display format on web pages like headings, subheadings, paragraphs, lists, tables, links, and other kinds of data as shown in image no. four. Metadata is also a data type that exists on web pages in metaphase. These data cannot be accessed by users but they are accessible with appropriate algorithms like Search Engine Algorithms.</p>
<p><strong>What are HTML documents and HTML Web-page?</strong></p>
<p>Above mentioned lines may confuse you about HTML which elaborates that <strong>HTML exists on client-side web browsing applications</strong>, not on the serves. This confusion may be cleared by knowing something <strong>special about HTML</strong>.</p>
<p>The HTML coding which is done on servers and saved is called an HTML document. An HTML document must consist of a declaration of document type which signified the HTML version of the document, metatags, head tags, body tags, and the other required tags to build a web page. It is saved on servers with a proper filename and “.html” extension but it is not necessary to save the document with a “.html” extension. This part will be discussed in the coming articles.</p>
<p>Whenever the user opens the HTML document on a web browser it gives a standard formatted page on your device screen which is called a Web page. Web pages consist of a group or groups of HTML tags which is known as DOM.</p>
<p>DOM stands for Document Object Model that is parsed on webpages, it is an interface that represents the structure of a web page. It also connects web pages with styling, scripting, and programming languages, such as CSS, JavaScript, PHP, etc. We will go to know more about DOM in upcoming articles.</p>
<p>So stay tuned to progrramers on <a href="http://www.progrramers.com">www.progrramers.com</a> and keep learning.</p>
<p></p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="351" src="https://www.youtube.com/embed/fRQw6eHXPxA" width="480" youtube-src-id="fRQw6eHXPxA"></iframe></div><br /> <p></p>Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com0tag:blogger.com,1999:blog-3952009654906237808.post-14384581074183123732022-05-07T22:17:00.004-07:002022-05-08T04:53:54.255-07:00What is Model-View-Controller (MVC) ?<p><strong>Model-View-Controller</strong> (<strong>MVC</strong>) is a software architectural pattern that separates the logic of a programming framework into three modules that are linked in its main program. It allows dividing the software's business logic and user interface.</p><p><br />To understand MVC in the context of web development we need to understand What are the main programming modules of a Web Application. These modules are:</p><p><br />1. Server-Side Program<br />2. Client-Side Program<br />3. Database<br /></p><h2 style="text-align: left;">Server-Side Program</h2>The <strong>Server-Side program</strong> works on the server. It takes data from the <strong>Client-Side program</strong> via the GET or POST request method and stores the data in the <strong>Database</strong>. It also receives data from the database and provides the data to the client-side program to display the response. For Example <em>ASP.Net</em>, <em>Java</em>, <em>Perl</em>, <em>PHP</em>, <em>Python</em>, <em>NodeJS</em>, and <em>Swift</em> are the Server-Side Program.<div><br /><a href="/search/label/PHP" target="_blank" title="PHP PHP Tutorials"><strong>PHP</strong> </a>and <strong>NodeJS</strong> is very popular Server-Side open-source programing language. Open-source programming languages are available for free to use and build commercial applications. The most popular CMS (Content Management System) <strong>WordPress</strong> uses PHP as a Server-Side programing language.<br /><p></p><h2 style="text-align: left;">Client-Side Program</h2>The client-side program works on the client's (user's) devices, hence the same name. It collects the input data from users via Forms and sends it to Server-Side Programs to store data in Database or Sessions. It also fetches the data from Server and displays the response. For Example : <a href="/search/label/HTML" target="_blank" title="HTML Tutorials"><strong>HTML</strong></a>, <a href="/search/label/CSS" target="_blank" title="CSS CSS Tutorial"><strong>CSS</strong></a>, <a href="/search/label/JavaScript" title="JavaScript Tutorial"><strong>JavaScript</strong></a> are Client-Side Programs.</div><div><br />Client-side programs also control the behavior of data display. It decides the color, size, position, and many other things. Lazy load is one of the popular client-side methods that break a large set of data into chunks and loads it with a certain action like on state change or page scroll or button click etc.</div><div><br />JavaScript is the most popular Client-Side programing language worldwide. There is a Framework called Framework7 that is completely built on JavaScript and based on the Model-View-Controller pattern. It allows the creation of web applications as well as Mobile applications at the same time. It can also be integrated with Server-side Frameworks like Laravel.</div><div><br /><strong>Learn framework7</strong> - <a href="/search/label/Framework7" title="Learn Framework7">Framework7 Tutorial: What Is Framework7?</a><br /><h2 style="text-align: left;">Database</h2>A Database is a program that stores data for later use. The database collects data from server-side programs that are presented by clients (users). The database controls the flow of output data and decides what and how the data should be returned to the server-side in order to serve as a response. For Example <em>SQL</em>, <a href="/search/label/MongoDB" title="MongoDB Tutorials"><strong><em>MongoDB</em></strong></a>, <em>Oracle</em>, <em>MariaDB</em>, and <em>SQLite</em> are Database programs.</div><div><br /><strong>Learn MongoDB</strong> - <a href="/2019/06/what-is-mongodb-introduction-mongodb-architecture-nosql-concept-compression-sql-database.html" title="Learn MongoDB">What Is MongoDB? : Introduction, MongoDB Architecture, NoSQL Concept, and Comparison with SQL Database</a></div><div><br />So, with the above topic now we have a clear concept of three basic modules of a web application. Now we are moving back to Model-View-Controller which is our main topic. MVC i.e., Model-View-Controller pattern was designed to navigate all these three components in the web application.<br /><h2 style="text-align: left;">Basic Principle of MVC</h2>The basic principle of Model-View-Controller can be understood with the help of the below image.</div><div> <br />
<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XMKWsVyMN-_vWkrRO_sukDfruokGrC5tYO7RRTZQ-vTwpH2yvF3OUIwUJUuE16jcfVQyOl9WQGvZu2pn39EhFIskhmKeEkL2qnenFjCAZFwS_w7cL-IaUM6kM1c4XHiM5gN-SgHEJaQ6_BHduciZemKhyHbV-i-YexQd88Hod7T7izbhhKBjX2O_/s1600/What%20is%20MVC.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="What is MVC?" border="0" data-original-height="1226" data-original-width="1600" height="490" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XMKWsVyMN-_vWkrRO_sukDfruokGrC5tYO7RRTZQ-vTwpH2yvF3OUIwUJUuE16jcfVQyOl9WQGvZu2pn39EhFIskhmKeEkL2qnenFjCAZFwS_w7cL-IaUM6kM1c4XHiM5gN-SgHEJaQ6_BHduciZemKhyHbV-i-YexQd88Hod7T7izbhhKBjX2O_/s1600/What%20is%20MVC.jpg" title="MVC Explanation Image : progrramers" width="640" /></a></div><br />The Model View Controller (MVC) architecture pattern specifies that an application consists of a data model, presentation information, and control information. The pattern requires that each of these be separated into separate objects. MVC is more of an architectural pattern, but not for a complete application.</div><div><br />The Model can communicate with its data logic to the database. The model receives commands from the controller to pull data from the database or push the data to the database.</div><div><br />The View communicates only with the controller and receives the command from the controller on how to display data. The view is a User Interface it also sends the data to the controller via forms. The view has the responsibility to control the data displayed to the user.</div><div><br />By reading the above two paragraphs it can be easily understood that The Controller is a bridge between The Modal & The View that can control the initiation of The View and send/received the data to The View which was received from or sent to The Modal.</div><div><br />Now it is easy to understand that View can handle the Client-side programs and Controller is a Server-Side program and Modal is also a Server-Side program that directly communicates with the Database.<br /><h2 style="text-align: left;">Why should use MVC Frameworks?</h2>If you are a web developer and fond of writing neat & clean codes then MVC Frameworks can be the best choice for you because the most attractive concept of the MVC pattern is the separation of concerns.</div><div><br />This allows the front-end code to be separated from the back-end code and split into two separate components. So, it becomes much easier to manage the codes and make changes on one side without messing with each other.</div><div><br />Laravel & Mean-Stack are the best examples of Model-View-Controller (MVC). Learning Laravel is very easy because it has large community support and the Laravel framework gives the boosted security also.</div><div><br /><p></p><p><b>Learn Laravel</b> - <a href="/search/label/laravel" title="Learn Laravel">Laravel Tutorial: What Is Laravel?</a></p><p><br /></p><p>I’ll be continuing on my blog with this kind of article if you like my articles please follow me on my Facebook page: <a href="https://www.facebook.com/theprogrramers/" rel="nofollow, noindex">https://www.facebook.com/theprogrramers/</a></p><p><br /></p>
<p>Thanks for giving me your precious time here, God bless you & see you later.</p></div>Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com0India20.593684 78.96288-7.7165498361788458 43.80663 48.903917836178849 114.11913tag:blogger.com,1999:blog-3952009654906237808.post-1970785428321816952022-04-30T12:38:00.011-07:002022-05-01T01:59:53.372-07:00Laravel Tutorial : What is Laravel?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl3owmlEG7M6GnzxdDd8gcnKsL4TZPcZlHIozqZPE-4FDDjZiD0gegl8IV82UZE38O_aoglbVr8uy1Qbvm-v5DZOjQKgIh1e9-OOrmBH7jIvXBeqQ1_wuiBGoriJkq4P0RpJbWy3Oq-VA/s1600/Laravel+Tutorial+-+What+Is+Laravel.jpg" alt="Laravel Tutorial : What Is Laravel?"></noscript>
<p>Hi Web Artisans! I’m back with a brand new article for the <strong>Laravel Tutorial</strong> Series. When you are talking about web development then what are the things that come to your mind? Well, I guess it is Speed and Efficiency. You can correct me by writing in the comment section if I’m wrong but the chances are minimum.</p>
<p><strong>Speed and Efficiency</strong> are two important factors when developing a web application. Here speed is the term which refers to the total time taken in the development of a web application and efficiency can be termed as a smaller number of bugs and errors in the final product.</p>
<p>You may or may not agree with me about the definition of speed and efficiency in the context of web development but the people like Taylor Otwell must agree with me who create Laravel Framework and intended for the development of web applications following the <strong>model–view–controller</strong> architectural pattern and based on Symfony.</p>
<p>So, in this article, we will see <strong>What is Laravel and why it is used?</strong></p>
<h2>What is Laravel?</h2>
<p><strong>Laravel</strong> is an open-source PHP-based <strong>framework</strong> and it is used to develop Web Applications. Laravel follows the MVC i.e., model–view–controller architectural pattern and it provides the expressive and elegant syntax as a set of tools and resources to build robust PHP applications.</p>
<h2>Why Laravel Framework is used?</h2>
<p>The above sentences are just a brief introduction to the <strong>Laravel Framework</strong> but in fact, Laravel is much more. Laravel has the most comprehensive and complete documentation and video tutorial library of all modern web application frameworks, making it easy to get started with the framework.</p>
<p>The best part is the community. If you have skills and ideas for development, you also can be a Laravel contributor. Thousands of talented & skilled developers from around the world have contributed to the framework. This is why Laravel has a great development community.</p>
<p>Laravel makes development fun by easing common tasks used in many web projects, such as:</p>
<ul>
<li>Simple, fast routing engine.</li>
<li>Powerful dependency injection container.</li>
<li>Authentication Scaffolding.</li>
<li>Multiple back-ends for session and cache storage.</li>
<li>Expressive, intuitive database ORM.</li>
<li>Database agnostic schema migrations.</li>
<li>Robust background job processing.</li>
<li>Real-time event broadcasting.</li>
</ul>
<p> </p>
<h2>Laravel is the Progressive Framework</h2>
<p>Laravel's first beta release was made available on June 9, 2011, followed by the Laravel 1 release later in the same month and since then several updates was released. This is why Laravel is called a progressive framework. The current official version of Laravel is 9.x.</p>
<p>What kind of Framework is Laravel?</p>
<p>In terms of web application development, there are two types of Frameworks.</p>
<ul>
<li>Back End or Server-Side Frameworks</li>
<li>Front End or Client-Side Frameworks</li>
</ul>
<h2>Laravel is a Back End Framework</h2>
<p>Laravel is a Back End or Server-Side Framework. Unlike Front-End Framework Laravel can easily be used to develop business logic for very robust web applications. Laravel allows to enables the creation of simple pages, landings, and different forms. Apart from delivering output data, it boosts security during web attacks.</p>
<p>This is a much-needed reason why experts rate it as one of the best web frameworks for backend development. Laravel provides app maintenance and deployment services as well as several ways to use relational databases.</p>
<p>It offers very important key features like</p>
<ul>
<li>Security</li>
<li>Template Engine</li>
<li>Eloquent Object Relational Mapping</li>
<li>MVC Architecture</li>
<li>Dynamic Routing System</li>
</ul>
<h2>Front-End Frameworks integration with Laravel</h2>
<p>Front End is used to design web pages, develop complex user interfaces, associate data with DOM elements, style your components and make AJAX requests. It has nothing to do with business logic. For Front-End Development Laravel provides the mechanism to integrate Bootstrap and Vue JS Frameworks. For web & mobile application development simultaneously <a href="/search/label/Framework7">Framework7</a> also can be used which is a totally JavaScript-based Front End Framework.</p>
<p>Also Read: <a href="/2019/08/framework7-tutorial-what-is-framework7.html">What is Framework7?</a></p>
<p>Laravel also can easily other libraries like jQuery, React, D3.js, Underscore, LODASH, ALGOLIA PLACES, and Anime.js. JavaScript libraries contain various functions, methods, or objects to perform practical tasks on a webpage or JS-based application. JavaScript library has codes or functions those developers can reuse and repurpose. A developer writes these codes, and other developers reuse the same code to perform a certain task, like preparing a slideshow, instead of writing it from scratch. It saves them significant time and effort.</p>
<h2>Progrramers Laravel Tutorials</h2>
<p>programmers.com is determined to bring the most comprehensive and accurate tutorials for beginners and advanced business development concepts to professionals.</p>Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com0tag:blogger.com,1999:blog-3952009654906237808.post-65307726596656388692022-03-25T09:22:00.021-07:002022-03-29T09:17:47.161-07:00JavaScript Tutorial: Target HTML Elements with CSS Selectors & Combinators<div dir="ltr" style="text-align: left;"><noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfjZZlZjMeqKmgxlS20jroIZ6pYQCQxDvsDtZ116oUsycBTdutuJKg3OhYkC24xmFDxuOOszSDfECbtx2vD7QElH1uNErVgv2h4UFJ9dFK3PYdXx5yOZcxA6v4W908FVOL7G6ieKsfX5o/s1600/javascript-tutorial-css-selectors-combinators.jpg" alt="JavaScript Tutorial: Target HTML Elements with CSS Selectors & Combinators"></noscript>
<p>Hello <strong>programmers</strong>! Welcome back to <a title="Progrramers - Web Development Tutorials" href="https://www.progrramers.com/"><strong>Progrramers – Web Development Tutorials</strong></a>. In this <strong>JavaScript tutorial</strong>, we will explore the methods to target the <a title="HTML5 Tutorials" href="/search/label/HTML">HTML</a> Elements with <strong>CSS Selectors & Combinators</strong> using <strong>JavaScript</strong>. But before we step forward, allow me to inform you that you must know about the <strong>CSS Selectors & Combinators</strong>. If you’ve no idea about CSS Selectors & Combinators then please write it up in the comment section, I’ll post a separate article for that.</p>
<p>So, Let’s Start! We all know the fact that these days every single website is developed using multiple programming & scripting languages like <a title="PHP Tutorials" href="/search/label/PHP"><strong>PHP</strong></a>, <a title="JavaScript Tutorial" href="/search/label/JavaScript"><strong>JavaScript</strong></a>, <a title="CSS Tutorial" href="/search/label/CSS"><strong>CSS</strong></a>, etc. JavaScript is the most popular scripting language used on websites across the globe, therefore, it become essential to know the advanced uses of JavaScript.</p>
<p>We always become terrified of the target HTML Elements using JavaScript. Therefore, here we will try to present every content in a very simple way so that everything become crystal clear.</p>
<h2>What is the CSS Selector?</h2>
<p>A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS <strong>property</strong> values inside the rule applied to them.</p>
<h3>CSS Syntax</h3>
<div class="prr_div_1">
<h2 class="prr_h2 head_count"> </h2>
<div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span>
<pre><code class="css">
<span style="color: blue;">selector</span>{property:value}
</code></pre>
</div>
</div>
<div class="prr_div_1">
<h2 class="prr_h2 head_count"> </h2>
<div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span>
<pre><code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{color:#ff0000;}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is an example paragraph.</p>
</body>
</html>
</code></pre>
</div>
<a class="prr_try_btn" href="/p/target-html-elements-with-css-selectors.html" target="_blank">Try Yourself</a></div>
<p><strong>Explanation</strong></p>
<p>In the above example, h1 is the selector of H1 <a title="HTML5 Tutorial - HTML Headings" href="/2017/12/html5-tutorial-html-headings.html"><strong>heading element</strong></a>. With this selector, you can target all the <h1> elements on the webpage.</p>
<p>You can also read: <a title="JavaScript Tutorial : 5+ Methods To Target HTML Element In JavaScript, HTML JavaScript DOM" href="https://www.progrramers.com/2020/05/javascript-tutorial-5-methods-to-target-html-element.html" target="_blank">JavaScript Tutorial : 5+ Methods To Target HTML Element In JavaScript, HTML JavaScript DOM</a></p>
<h2>What is the CSS Combinator?</h2>
<p>A CSS Combinator is something that describes the relation between <a title="HTML5 Tutorial - HTML Tags And Elements" href="https://www.progrramers.com/2017/11/html-tutorial-html-tags-and-elements.html">HTML Element</a> and the Selector. CSS Combinator is used to target one or more desired element(s) among the many elements. Just like the below example:</p>
<ul>
<li>descendant selector (space)</li>
<li>child selector (>)</li>
<li>adjacent sibling selector (+)</li>
<li>general sibling selector (~)</li>
</ul>
<div class="prr_div_1">
<h2 class="prr_h2 head_count"> </h2>
<div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span>
<pre><code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1~p{color:#ff0000;}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is an example paragraph.</p>
</body>
</html>
</code></pre>
</div>
<a class="prr_try_btn" href="/p/target-html-elements-with-css-selectors_25.html#" target="_blank">Try Yourself</a></div>
<p> </p>
<p><strong>Explanation</strong></p>
<p>In the above example, you can see the adjacent paragraph of h1 is colored with ‘Red’ but which paragraph is before H1 tag is not styled with red color. This is done with the help of combinators.</p>
<p> </p>
<h2>How CSS Selectors and Combinators can be used in JavaScript?</h2>
<p>To use CSS selectors &amp; combinators in JavaScript we have to use method which is querySelector() or querySelecrorAll(). Both methods are the part of document class of core JavaScript where CSS Selector & Combinators are used as parameters. You can see in the below example:</p>
<div class="prr_div_1">
<h2 class="prr_h2 head_count"> </h2>
<div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span>
<pre><code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1~p{color:#ff0000;}
</style>
</head>
<body>
<span>My Text</span>
<script>
document.querySelector("span").innerHTML="Hello Programmers!";
</script>
</body>
</html>
</code></pre>
</div>
<a class="prr_try_btn" href="/p/target-html-elements-with-css-selectors_81.html" target="_blank">Try Yourself</a></div>
<p><strong>Explanation</strong></p>
<p>When you run the code in Try Your Self you can find “My Text” inside <span> element is changed with “Hello Programmers!” text. Here what is going on that the querySelector() method targets the <span> element and changes it’s inner HTML content by using innerHTML property. The innerHTML property sets or returns the HTML content inside of an element.</p>
<p> </p>
<p>You can also read: <a title="JavaScript Tutorial: What Are Ways To Get Output Data In JavaScript?" href="https://www.progrramers.com/2020/06/javascript-tutorial-what-are-ways-to-get-output-data-javascript.html" target="_blank">JavaScript Tutorial: What Are Ways To Get Output Data In JavaScript?</a></p>
<p> </p>
<h2>What is the difference between qureySelector() and qureySelectorAll() ?</h2>
<p>Before we move ahead it might be possible that a question will be raised in your mind what’s the difference between <strong>querySelector()</strong> and <strong>querySelectorAll()</strong>? The answer is very simple querySelector() is a method that is used to target the only first HTML element occupied in a webpage by using CSS Selectors &amp; Combinators but querySelectorAll() targets and returns all the similar kinds of elements by using the same <strong>CSS Selectors</strong> &amp; <strong>Combinators</strong>.</p>
<h2>How to target HTML element with querySelector() method?</h2>
<p>This is very simple likewise in the previous article we have done with document.getElementByID(“element-ID-Attribute”). Here is only the difference that whenever we target by <strong>document.getElementByID()</strong> method we use Id attribute string inside the parenthesis as parameter but here in querySelector(“#element-ID-Attribute”) we can also use elements Id attribute started with ‘#’ and if we use the class of element then we must be started with ‘.’ like in CSS. . <strong>Element's tag name</strong> can be also used. You can also check the below examples:</p>
<div class="prr_div_1">
<h2 class="prr_h2 head_count"> </h2>
<div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span>
<pre><code class="html">
<script>
document.querySelector("p").style.color="red";
</script>
</code></pre>
</div>
<a class="prr_try_btn" href="/p/target-html-elements-with-css-selectors_28.html" target="_blank">Try Yourself</a></div>
<p><strong>Explanation</strong></p>
<p>The above example shows that querySelector(“#demo”) method targeted only the first element of the webpage and add a <a title="HTML5 Tutorial - HTML Style Attribute, Element And CSS" href="https://www.progrramers.com/2017/12/html5-tutorial-html-style-attribute.html"><strong>style attribute</strong></a> with <a title="CSS Tutorial - How To Use CSS?" href="https://www.progrramers.com/2018/01/css-tutorial-how-to-use-css.html"><strong>CSS Color</strong></a> property & red color value there for only the first paragraph text turned red.</p>
<div class="prr_div_1">
<h2 class="prr_h2 head_count"> </h2>
<div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span>
<pre><code class="html">
<script>
document.querySelectorAll("p").forEach(e => {
e.style.color="red";
});
</script>
</code></pre>
</div>
<a class="prr_try_btn" href="/p/target-html-elements-with-css-selectors_19.html" target="_blank">Try Yourself</a></div>
<p><strong>Explanation</strong></p>
<p>In the above example, you can see all the paragraph's colors turn into ‘Red’ because we have used to add style attribute property with the red color value to all paragraphs by using <strong>foreach loop</strong>.</p>
<p>The querySelectorAll() target and returns a node list of all the similar kinds of elements on the webpage this is why we have used foreach loop in this case.</p>
<p>Keep going with our upcoming articles on JavaScript where we will discuss foreach loop.</p>
<p>This is why it becomes easy to target the HTML element with CSS Selectors & Combinators. Look at the more examples given below and try them yourself.</p>
<h2>How to use ID & Class Attributes</h2>
<p><a title="HTML HTML5 Tutorial - Attributes Id And Class" href="https://www.progrramers.com/2017/12/html5-tutorial-attributes-id-and-class.html"><strong>ID</strong> and <strong>Class</strong></a> are <a title=" HTML HTML5 Tutorial - HTML Attributes" href="https://www.progrramers.com/2017/11/html-tutorial-html-attributes.html"><strong>attributes</strong> </a>of an element and both can be used with any HTML element. ID refers to the identity of any HTML element occupied on a loaded document on a webpage. Id of an element on a loaded webpage must unique. For e.g., <h2 id=”demo”></h2> where demo is a unique id reference of <h2> element and after it no HTML element id can be referred as ‘demo’.</p>
<p>Although using it twice or more will not through any error until any kind of coding conflict occurs but it is against the system's nature. An Id attribute of an HTML element can have a single id.</p>
<p>Class attribute refers an HTML element as part of a class. For e.g., <h2 class=”demo demo1”></h2>, <h2 class=”demo demo2”></h2>, <h3 class=”demo demo1”></h3>. Example show that class attribute same value can be used multiple times on same loaded <a title="What Is HTML Document?" href="https://www.progrramers.com/2017/11/html-document.html"><strong>HTML document</strong></a> on webpage and a class attribute can have the multiple values.</p>
<p>Now take a look at the below examples and understand.</p>
<div class="prr_div_1">
<h2 class="prr_h2 head_count"> </h2>
<div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span>
<pre><code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 id="demo">This is Heading</h2>
<h2 id="demo1">This is Heading</h2>
<h2 id="demo2">This is Heading</h2>
<h2 id="demo3">This is Heading</h2>
<p>Id must be unique on a webpage becuase an Id attribute of HTML Element referes unique identity of that element.</p>
</body>
</html>
</code></pre>
</div>
</div>
<div class="prr_div_1">
<h2 class="prr_h2 head_count"> </h2>
<div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span>
<pre><code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 class="demo red">This is Heading</h2>
<h2 class="demo green">This is Heading</h2>
<h2 class="demo blue">This is Heading</h2>
<h2 class="demo brown">This is Heading</h2>
<p>Class can be used multiple time with same or different type of HTML element becuase it refers </p>
<script>
document.querySelectorAll("h2.demo").forEach(e=>{
e.setAttribute("style","color:"+e.classList[1]);
});
</script>
</body>
</html>
</code></pre>
</div>
</div>
<p>More examples will be covered in our YouTube Video please subscribe. Click Here to Subscribe <a title="Progrramers-Web Development Tutorials" href="https://www.youtube.com/channel/UCbcBJ8-k22nO_r-HGh4VYCw">Progrramers-YouTube Channel</a>.</p>
<p>Finally, the conclusion is that querySelector() and querySelectorAll() methods are most used in any professional website. Especially in <strong>jQuery</strong> library is selector functions are built with these methods. If you find any problems or any questions in your mind please write them down in the comments. I’ll be there with the best possible solution for you. And rest programming is always about making improvements. <a title="Progrramers Facebook Page" href="https://www.facebook.com/theprogrramers"><strong>Facebook</strong> </a>founder & <strong>CEO Mark Zuckerberg</strong> recently told that Facebook could be more efficient than today if we would have done coding in past likewise today, we do.</p>
<p>I really wish to see you in my rest article.</p>
<p>If you want to get a clearer concept, please also subscribe progrramers YouTube Channel. Please Click on <a title="Progrramers-YouTube Channel" href="https://www.youtube.com/channel/UCbcBJ8-k22nO_r-HGh4VYCw">Subscribe Button</a>.</p>
</div>Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com0tag:blogger.com,1999:blog-3952009654906237808.post-80020825108546266562020-06-03T12:42:00.000-07:002020-06-03T12:55:32.822-07:00JavaScript Tutorial: What are ways to get output data in JavaScript?<div dir="ltr" style="text-align: left;" trbidi="on">
<p>In the previous chapter of <strong>JavaScript</strong>, we have learned the method to target the <strong>HTML Element</strong>. Now we are about to move on 'How many possible ways are there to display output in JavaScript?'</p><p>Although JavaScript executes many of task that has no concern with the display but most of the times different types of JavaScript output data required to display on browser.</p><p>JavaScript can display output data in different ways. Below are the <strong>properties</strong>, <strong>methods</strong>, and <strong>functions</strong> that can be used to display output data in JavaScript.</p><ol><li>Using innerHTML property</li><li>Using innerText property</li><li>Using textContent property</li><li>Using document.write() method</li><li>Using alert()</li><li>Using console.log()</li><li>Using print()</li></ol><h2>Using innerHTML property</h2><p>The innerHTML property is part of the <strong>Document Object Model (DOM)</strong> that allows JavaScript code to manipulate a website being displayed. Specially it allows reading and replacing everything within a DOM Element (HTML tag).</p><p>The innerHTML property can output the data in the form of HTML content. You check in the example.</p><br /><div class="prr_div_1"><h2 class="prr_h2 head_count"></h2><div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span><pre><code class="html"><script>
document.write(document.getElementById("test").innerHTML);
</script>
</code></pre></div><a href="/p/what-are-ways-to-get-output-data-in.html" class="prr_try_btn" target="_blank">Try Yourself</a></div><br /></p><h2>Using innerText property</h2><p>The innerText property sets or returns the text content of the specified node and all its descendants.</p><p>If innerText property is used then child nodes are removed and replaced by a single text node.</p><br /><div class="prr_div_1"><h2 class="prr_h2 head_count"></h2><div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span><pre><code class="html"><script>
document.write(document.getElementById("text").innerText);
</script>
</code></pre></div><a href="/p/what-are-ways-to-get-output-data-in_3.html" class="prr_try_btn" target="_blank">Try Yourself</a></div><br /><h2>Using textContent property</h2><p>The textContent property us similar to the innerText property of JavaScript but there is a difference between them. We will discuss those differences later in this article.</p><br /><div class="prr_div_1"><h2 class="prr_h2 head_count"></h2><div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span><pre><code class="html"><script>
document.write(document.getElementById("text").textContent);
</script>
</code></pre></div><a href="/p/what-are-ways-to-get-output-data-in_53.html" class="prr_try_btn" target="_blank">Try Yourself</a></div><br />
<h2>Using document.write() method</h2><p>The document.write() is a method which writes a string of text to document stream. The write() method writes HTML expression or JavaScript code to a document. The write() method is used for testing purposes mostly.</p><p>If document.write() method is used after fully loaded HTML page then it will override all the existing HTML and gives new HTML Page.</p><br /><div class="prr_div_1"><h2 class="prr_h2 head_count"></h2><div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span><pre><code class="html"><script>
document.write(document.getElementById("text").textContent);
</script>
</code></pre></div><a href="/p/what-are-ways-to-get-output-data-in_32.html" class="prr_try_btn" target="_blank">Try Yourself</a></div><br /><h2>Using alert()</h2><p>The alert() method in JavaScript displays an alert box with a specified message along with an 'OK' button. It is often used to make sure that information comes through the user. The alert() box takes the focus away from the current window and forces the browser to read the message.</p><br /><div class="prr_div_1"><h2 class="prr_h2 head_count"></h2><div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span><pre><code class="html"><script>
function getAlert(){
alert(document.getElementById("test").innerHTML);
}
</script>
</code></pre></div><a href="/p/what-are-ways-to-get-output-data-in_65.html" class="prr_try_btn" target="_blank">Try Yourself</a></div><br /><h2>Using console.log()</h2><p>The console.log() is a function in JavaScript that is used to print any kind of variables defined before console.log()or to just print any message that needs to be displayed to the user.</p><p>console.log() is used for debugging purposes we can call the console.log() method in the browser to display data.</p><br /><div class="prr_div_1"><h2 class="prr_h2 head_count"></h2><div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span><pre><code class="html"><script>
console.log(document.getElementById("test").innerHTML);
</script>
</code></pre></div><a href="/p/what-are-ways-to-get-output-data-in_60.html" class="prr_try_btn" target="_blank">Try Yourself</a></div><br /><h2>Using print()</h2><p>JavaScript print method is used to print the contents of the current window. It basically opens a print dialog box in the browser.</p><br /><div class="prr_div_1"><h2 class="prr_h2 head_count"></h2><div class="prr_div_2"><span class="prr_tool_tip">Code Copied</span><pre><code class="html"><script>
function getPrint(){
print();
}
</script>
</code></pre></div><a href="/p/what-are-ways-to-get-output-data-in_70.html" class="prr_try_btn" target="_blank">Try Yourself</a></div><br /><h2>What is the difference between innerHTML, innerText, and textContent?</h2><p>innerHTML property allows us to work with rich text and doesn't automatically encode and decode text. We can get the data to display in a rich text format where CSS can also work.</p><p>innerText property retrieves and sets the content from the HTML tag as plain text where spaces are trimmed in results but the CSS styling can be displayed in results. </p><p>textContent property retrieves and sets the content similarly innerText but spaces and whitespace cannot be trimmed and CSS styling cannot be displayed in results.</p><noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyfI5qU57VXEL72DJOi9ayy573iDCWaq9gEof6JZzmqeXOjQFGYqp_pKpEbzkjpy_UK9fEwwaBxULo_xupmXwzG6OquOS_LFZEZIgfy_gmad0tj9-XbhXsP47BZHKtfTiymFsjuJakgQU/s1600/What+are+ways+to+get+output+data+in+JavaScript_compress.jpg" alt="JavaScript Tutorial: What are ways to get output data in JavaScript?"></noscript><iframe allowfullscreen="" frameborder="0" height="344" src="https://www.youtube.com/embed/KiyAVW-IxUg" width="459"></iframe>
</div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com12tag:blogger.com,1999:blog-3952009654906237808.post-6618765366887337982020-05-23T09:08:00.000-07:002020-06-04T11:33:18.189-07:00JavaScript Tutorial : 5+ methods to target HTML Element in JavaScript, HTML JavaScript DOM<div dir="ltr" style="text-align: left;" trbidi="on"><p><strong>ID</strong> and <strong>Class</strong> attributes are the most common selectors that widely used to target the <strong><a title="HTML5 Tutorials" href="/search/label/HTML" target="_blank" rel="noopener">HTML</a> DOM</strong> while working with <a title="JavaScript Tutorials" href="/search/label/JavaScript?max-results=7" target="_blank" rel="noopener"><strong>JavaScript</strong></a>. Have you ever thought why we mostly prefer to use the id and class while many of the methods are available to target the <strong><a title=" HTML HTML5 Tutorial - HTML Tags And Elements" href="/2017/11/html-tutorial-html-tags-and-elements.html" target="_blank" rel="noopener">HTML Elements</a></strong> in JavaScript?</p>
<p>First of all, we look at all the methods to target the HTML Elements using JavaScript.</p>
<p>For reference you can check the multiple examples below.</p>
<h2>How to target HTML elements using ‘id’?</h2>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html">
<div id="test"></div>
<script>
//we want to print "Hello World inside div"
document.getElementById("test").innerHTML="Hello World!";
</script>
</code></pre>
</div>
<a href="/p/5-methods-to-target-html-element-in_23.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<p>In this method we target the Single HTML element within the <strong>DOM tree</strong> using its ID attribute. While using ID, it always returns a single node of HTML DOM.</p>
<p>The most important thing is that using two or more HTML elements with the same ID on the same web page can produce the unexpected error, therefore, we should be careful using the ID attribute while creating the web page.</p>
<h2>How to target HTML Elements using ‘class’?</h2>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html">
<!--Different HTML tags with same classes-->
<h1 class="test"></h1>
<div class="test"></div>
<p class="test"></p>
<span class="test"></span>
<script>
document.getElementsByClassName("test")[0].innerHTML="This Heading";
document.getElementsByClassName("test")[1].innerHTML="This is div";
document.getElementsByClassName("test")[2].innerHTML="This is paragraph";
document.getElementsByClassName("test")[3].innerHTML="This is span";
</script>
</code></pre>
</div>
<a href="/p/5-methods-to-target-html-element-in.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<p>In this method we target one or more HTML Elements with the same class name. When we target HTML Elements with the class name, each HTML element with the same class becomes the part of that class, it returns a list of nodes (referred to as <strong>NodeList</strong> in the console) instead of a single node where each node can be referred with the index number like given in above example.</p>
<p>The <strong>index number</strong> of each node is decided by its appearance on the web page. For e.g. the index of the very first node is referred to as [0] and second as [1] and so on. If the position of any node is changed on the webpage then its index will be also changed accordingly and it might affect the index of rest upcoming nodes also.</p>
<p>Even we target a single element with the class name, it returns a list of nodes but the difference is that there is only a single node present in that list.</p>
<p>Therefore it is a better idea to use class names but in a structured way.</p>
<p>We will study more about classes in further chapters</p>
<h2>How to target HTML Elements using ‘tag name’?</h2>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html">
<h1 class="test"></h1>
<div class="test"></div>
<p class="test"></p>
<span class="test"></span>
<span class="test"></span>
<script>
document.getElementsByTagName("H1")[0].innerHTML="This Heading";
document.getElementsByTagName("DIV")[0].innerHTML="This is div";
document.getElementsByTagName("P")[0].innerHTML="This is paragraph";
document.getElementsByTagName("SPAN")[0].innerHTML="This is first span";
document.getElementsByTagName("SPAN")[1].innerHTML="This is second span";
</script>
</code></pre>
</div>
<a href="/p/5-methods-to-target-html-element-in_5.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<p>In this method we target one or more HTML elements with their tag name. You can see in the above example. Likewise class case, it also returns a set the node list where each node can be accessed by the specific index number.</p>
<h2>How to target HTML Elements using the ‘name’ attribute?</h2>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html">
<!--Different HTML tags with same classes-->
<form action="">
<div><input type="text" name="fname" placeholder="first name" value="John"/></div><br/>
<div><input type="text" name="lname" placeholder="last name" value="Doe"/></div><br/>
<div><input type="email" name="email" placeholder="email" value="john@progrramers.com"/></div><br/>
<div><input type="url" name="website" placeholder="website" value="https://progrramers.com"/></div><br/>
<div><input type="button" name="submit" value="Save" onclick="formdata()"/></div><br/>
</form>
<p name="test"></p>
<script>
function formdata(){
var fname=document.getElementsByName('fname')[0].value;
var lname=document.getElementsByName('lname')[0].value;
var email=document.getElementsByName('email')[0].value;
var website=document.getElementsByName('website')[0].value;
document.getElementsByName("test")[0].innerHTML = "First name: "+fname+"<br/>Last name: "+lname+"<br/>Email: "+email+"<br/>Website: "+website;
}
</script>
</code></pre>
</div>
<a href="/p/5-methods-to-target-html-element-in_71.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<p>In this method we target one or more HTML elements with their name attribute. You can see in the above example. Likewise class case, it also returns a set the node list where each node can be accessed by the specific index number.</p>
<p>Note: Name attribute’s value also can be accessible in the post method of server-side scripts like PHP. We will deal with it during the tutorials of server-side scripts.</p>
<h2>How to target HTML Elements using the ‘querySelector’ method?</h2>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html">
<div id="test_id"></div>
<div class="test_class"></div>
<script>
document.querySelector('#test_id').innerHTML="This is First DIV Element.";
document.querySelector('.test_class').innerHTML="This is Second DIV Element.";
</script>
</code></pre>
</div>
<a href="/p/5-methods-to-target-html-element-in_53.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<p>In this method we target single HTML Element using CSS selector. In CSS if we want to target element with tag name we use the tag name, or if we want to use the ID or Class then we use ‘#’ with ID and ‘.’ with the class name. Similarly we can use CSS all selector to with query selector method.</p>
<p>Likewise ID case, it returns only the first node present on the web page.</p>
<h2>How to target HTML Elements using ‘querySelectorAll’ method?</h2>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html">
<div id="test_id"></div>
<div class="test_class"></div>
<div class="test_class"></div>
<script>
document.querySelectorAll('#test_id')[0].innerHTML="This is First DIV Element.";
document.querySelectorAll('.test_class')[0].innerHTML="This is Second DIV Element.";
document.querySelectorAll('.test_class')[1].innerHTML="This is Third DIV Element.";
console.log(document.querySelectorAll("DIV"));
</script>
</code></pre>
</div>
<a href="/p/5-methods-to-target-html-element-in_6.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<p>This method is the same as the query selector method but in this method we target one or more HTML Elements using <strong>CSS selector</strong> and it returns a set the node list where each node can be accessed by the specific index number.</p>
<p>You have seen all the examples given above. These are the methods to target the HTML DOM or HTML DOMs in JavaScript. You must know a few things also which are mentioned below</p>
<ol>
<li>The methods that return the list of nodes can be looped. <strong><a href="#exmpl7">Check example 7</a></strong> ahead.</li>
<li>Although node list can be looped they aren’t referred to as an array because array must have few methods like push, splice & sort but not in case of node list.</li>
<li>ID, Class, and Name are the attributes that can be directly accessed in JavaScript. For reference <strong><a href="#exmpl8">Check example 8</a></strong>.</li>
<li>Id & name attribute can have one value at a time and can be used only once on the webpage but the class can have multiple values at the same time. The value should be separated by space. For e.g. class=”container box primary”. There are three different classes in the example container, box & primary.</li>
</ol>
<h2 id="exmpl7">How to apply loop on a NodeList?</h2>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<span class="prr_tool_tip">Code Copied</span>
<pre><code class="html"><div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<script>
var el=document.querySelectorAll('.test'),n=1;
el.forEach(element => {
element.innerHTML="This is DIV No. "+(n++);
});
</script>
</code></pre>
</div>
<a href="/p/5-methods-to-target-html-element-in_31.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<h2 id="exmpl8">How to Find ID, Class & Name Attribute Values?</h2>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html"><div id="test_id">This DIV has id Attribute</div>
<!--Class can have multiple value-->
<div class="test_class1 test_class2 test_class3">This DIV has class Attribute</div>
<div name="test_name">This DIV has name Attribute</div>
<p id="result_1"></p>
<p id="result_2"></p>
<p id="result_3"></p>
<script>
document.getElementById("result_1").innerHTML = document.getElementById("test_id").id;
document.getElementById("result_2").innerHTML = document.getElementsByClassName("test_class1")[0].className;
document.getElementById("result_3").innerHTML = document.getElementsByName("test_name")[0].getAttribute("name");
</script>
</code></pre>
</div>
<a href="/p/5-methods-to-target-html-element-in_86.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<noscript><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxjC-Q9PwLcngIp2uMD5EYAOLZcfTPc216E81nHG7ZdXqiKEsq0eC87QhPKRBG8aaVm6MZXqo66eY-NsdJxxJVS4JryUR_XDak1BiY7UzHWf_0jq7ZQWuLHfVho1lNzTR-EEKtOwxDvNg/s640/5%252B+Methods+To+Target+HTML+Element+In+JavaScript%252C+HTML+JavaScript+DOM.jpg" width="640" /></noscript></div>Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com14tag:blogger.com,1999:blog-3952009654906237808.post-12779862761825095362020-05-14T11:53:00.000-07:002020-05-14T19:56:35.316-07:00JavaScript Tutorials : Where and How to Use JavaScript - progrramers<div dir="ltr" style="text-align: left;" trbidi="on">
<p>In the previous chapter of <strong><a href="/search/label/JavaScript" rel="dofollow" target="_blank">JavaScript Tutorials</a></strong>, we have learned about <a href="https://www.progrramers.com/2018/06/java-script-tutorials-what-java-script.html">what JavaScript can do?</a> Now we are about to learn that <strong>How and Where to use JavaScript on an HTML Document?</strong></p>
<h2>How to use JavaScript on HTML Documents?</h2>
<p>Before we go forward we need to understand the most important thing and that is ‘How a web page is parsed on a web browser? This question is most important because until unless we don’t understand the working principle of a webpage, we can’t develop it with any client-side scripting language like <strong>JavaScript</strong>.</p>
<p>We already know that JavaScript manipulates the HTML DOM by changing its inner HTML, inner Text, values, and style. JavaScript is used to perform a certain task or chain of the task and execute it on the browser by changing the status of HTML DOMs. To do so we have to find and target the specific HTML DOM with various methods that we will learn in upcoming chapters. </p>
<p>To understand the above sentences we need to check the below example.</p>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of JavaScript</title>
</head>
<body>
<div id="test"></div>
<script>
document.getElementById("test").innerHTML = "Hello World!";
</script>
</body>
</html>
</code></pre>
</div>
<a href="/p/javascript-tutorial-where-how-to-use.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<p>What we see in the example above given. There are two things in the above example</p>
<p>The first thing we see there is an HTML document contains a DIV element with an attribute named ID. The value of the ID is ‘test’. We required printing Hello World inside the DIV element dynamically using JavaScript when a web page is loaded.</p>
<p>Second thing, there is also a script tag just before the end of body tag where are some codes are written which is not likely HTML codes. Actually the codes written in script tags are JavaScript. JavaScript codes are written between <script> tags on HTML documents.</p>
<p>Now to understand the working principle of the above example you can copy and paste the above code in your favorite HTML editor and save the file with .html file extension and run into your favorite browser. You will see ‘Hello World’ printed on the web page.</p>
<p>On the web page loading process, we simply target the HTML DIV tag by its ID using “document.getElementById()” method and setting the value ‘Hello World’ of its ‘innerText’ so that when the web page completely falls on the browser it prints ‘Hello World’ text.</p>
<p>This is how we target the HTML DOM on an HTML web page using JavaScript. This was only an example but in professional projects, we do something like this on a large scale. We will sure study that in this tutorial series.</p>
<p> </p>
<h2>Why & when use type attribute within <script> tags?</h2>
<p>Now we know that <strong>JavaScript</strong> codes are written inside <strong><script> </strong>tags. Let’s check a few another example given below</p>
<h3>JavaScript codes with a type attribute in script tags</h3>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Use of Type Attribute</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript">
document.getElementById("test").innerHTML="JavaScript is a Scripting Language.";
</script>
</body>
</html>
</code></pre>
</div>
<a href="/p/javascript-tutorial-where-how-to-use_14.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<h3>JavaScript codes without type attribute in script tags</h3>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of HTML5 Version Doctype</title>
</head>
<body>
<div id="test"></div>
<script>
document.getElementById("test").innerHTML="JavaScript is a Scripting Language.";
</script>
</body>
</html></code></pre>
</div>
<a href="/p/javascript-tutorial-where-how-to-use_20.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<p>In both examples can you see the difference? You can see in example 2 <script> tag is used with type attribute and in example no 3 <script> tag is used without type attribute.</p>
<p>This is happening because of the HTML Document version. Before HTML version 5 JavaScript is not the default scripting language of HTML so we must specify the type of scripting language. Older browsers are not able to find the type of script language therefore JavaScript might not work.</p>
<p>But since <strong>HTML 5<sup>th</sup></strong> version <strong>JavaScript</strong> is becoming the default scripting language, therefore, we are not forced to use type attribute in script tag while working with JavaScript.</p>
<p>Note: Above both examples can work in the latest browsers without type attribute. The problem comes with only older browsers.</p>
<h2>Where to use JavaScript on HTML Documents?</h2>
<p>Above all the examples are demonstrating to us how to use JavaScript on an HTML Document. Now let’s move on Where to use JavaScript on HTML Documents?</p>
<p>Before we go ahead first we need to understand how an HTML Document is parsed on a browser and become a web page. Usually, HTML Document is parsed on a browser top to bottom and left to right. It means that the most top line of the document is parsed first into left to right direction therefore whole HTML DOMs must be parsed over web browsers before JavaScript functions are called.</p>
<p>If it doesn’t happen then the browser console will throw the script error and it can be case wise different. Another thing is that by default JavaScript declared functions and variables are stored on the top level in primary memory while launching the web page whether they are declared on top of page or bottom of the page, therefore, we should not worry about where we are trying to keep our JavaScript codes on HTML document. Therefore we can place JavaScript declared functions and variable between the <head> tags like the below-mentioned example</p>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Declared Functions</title>
<script>
//declared functions and variables
var x = "You have clicked the button."
function myFunction(){
document.getElementById('test').innerHTML=x;
}
</script>
</head>
<body>
<div id="test"></div>
<button onclick="myFunction()">Click</button>
</body>
</html>
</code></pre>
</div>
<a href="/p/javascript-tutorial-where-how-to-use_2.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<p>We should worry about only JavaScript calling functions which must be executed at the most end of part of the web page so that All HTML DOMs can found easily found which are targeted by JavaScript. It is good practice to place JavaScript codes on the most bottom part of HTML <body> tags, mention like below example</p>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Calling Functions</title>
<script>
//declared functions and variables
var x = "You have clicked the button."
function myFunction(){
document.getElementById('test').innerHTML=x;
}
</script>
</head>
<body>
<div id="test"></div>
<button id="test-button">Click</button>
<script>
//calling function defined in <head> tags
document.getElementById("test-button").onclick=function(){
myFunction();
}
</script>
</body>
</html>
</code></pre>
</div>
<a href="/p/javascript-tutorial-where-how-to-use_35.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<p>Also, it is observed that placing JavaScript code at the bottom of <body> tags improves the display speed because script interpretation slows down the display.</p>
<p>Above shown examples are a type of internal JavaScript but there is another type of JavaScript also which can improve the development speed without harming the performance of the web site.</p>
<h2>What are the types of placement of JavaScript on an HTML Document?</h2>
<ol>
<li>Internal JavaScript</li>
<li>External JavaScript</li>
</ol>
<h3>What is Internal JavaScript?</h3>
<p>Internal JavaScript is a practice in which all the JavaScript codes are written separately in every document. The drawback of this practice is that we have to write a similar type of code again and again which slows down the development speed. All the above show examples are a type of internal JavaScript.</p>
<h3>What is External JavaScript?</h3>
<p>In this practice JavaScript codes are written in a separate file which has the file extension “.js”. To embed the external JavaScript file on the web pages we have to use <script> tags with a specific attribute named ‘src’ which holds the location path of the external JavaScript file.</p>
<p>Take a look at a below-given example. This example is created using jQuery CDN. You will learn <strong>jQuery</strong> in further chapters.</p>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Absolute Path Over jQuery Content Delivery Network (CDN)</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<div id="test"></div>
<button id="test-button">Click</button>
<script>
$(document).ready(function(){
$('#test-button').click(function(){
$('#test').html("Hello World!")
});
});
</script>
</body>
</html>
</code></pre>
</div>
<a href="/p/javascript-tutorial-where-how-to-use_89.html" class="prr_try_btn" target="_blank">Try Yourself</a>
</div>
<br />
<p><strong>Few points must be noticed while creating an external JavaScript file.</strong></p>
<ol>
<li>JavaScript file created with .js extension is not a web page rather a script page.</li>
<li>JavaScript file cannot contain the <script> tags.</li>
<li>Multiple JavaScript pages can be used on a single HTML document.</li>
<li>It is important to declare the HTML web page doctype because before HTML5 JavaScript not default scripting language. We have to specify the ‘type’ attribute in <script> tags to make active scripting language.</li>
</ol>
<h3>What are the advantages of external JavaScript?</h3>
<ol>
<li>HTML and JavaScript codes are separated while using external JavaScript</li>
<li>JavaScript code which required to be executed again & again on different pages is not required to write multiple times.</li>
<li>It makes developers easy to maintain and develop the program fast.</li>
<li>You can use different specialist code editor at the same time. For example, Notepad++ is best for HTML, and VSCode is best suitable for JavaScript.</li>
<li>External JavaScript code can be cached into the client device therefore cached JavaScript file can speed up the page load.</li>
</ol>
<h3>Using absolute and relative path reference for external JavaScript</h3>
<p> External JavaScript files can embed on HTML documents using relative or absolute path references which show below in the examples.</p>
<p>To understand relative or absolute file path learn <a title="Learn HTML File Path to Understand Relative and Absolute Path" href="https://www.progrramers.com/2017/12/html5-tutorial-html-file-path.html">HTML5 Tutorial - HTML File Path</a></p>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="javascript">//declared functions and variables
var x = "You have clicked the button."
function myFunction(){
document.getElementById('test').innerHTML=x;
}
</code></pre>
</div>
<!--a href="#" class="prr_try_btn">Try Yourself</a-->
</div>
<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count"></h2>
<div class="prr_div_2">
<pre><code class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of External JS file using absolute path</title>
<script src="script.js"></script>
</head>
<body>
<div id="test"></div>
<button id="test-button">Click</button>
<script>
//calling function defined in <head> tags
document.getElementById("test-button").onclick=function(){
myFunction();
}
</script>
</body>
</html>
</code></pre>
</div>
<!--a href="#" class="prr_try_btn">Try Yourself</a-->
</div>
<br />
<p>Copy the JavaScript codes given in <strong>example 7</strong> and paste into your favorite text editor and save as script.js and after that once again create a new file in the text editor and copy HTML codes from <strong>example 8</strong> and paste into the text editor and save the document as 'example8.html'. Both the files must be located into same directory. </p>
<p>After that run the example8.html file in the browser, you will see on the web page there is a button named '<strong>Click</strong>'. When you click the button then a sentence 'You have clicked the button' will appear on the screen. This means the JavaScript codes written in a separate file is embedded properly and working fine.</p>
<p>On HTML file example8.html you can see <strong><script></strong> tag with '<strong>src</strong>' attribute having the value '<strong>script.js</strong>' which the name of JavaScript file. Actually the source of JavaScript is fetching on the web page from that file which is embedded with HTML document through a 'Relative path'.</p>
<p>Similarly, look back into <strong>example 6</strong> where you can find <script> tag with 'src' attribute having a value 'https://code.jquery.com/jquery-3.5.1.min.js'. It is an example of an absolute URL. To know more about the relative and the absolute path you have to read our another topic <a title="Learn HTML File Path to Understand Relative and Absolute Path" href="https://www.progrramers.com/2017/12/html5-tutorial-html-file-path.html">HTML5 Tutorial - HTML File Path.</a></p>
<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjGFZxZusSMh9296biZ4jLCxZ8Ee1Knr84pVVx20QosW1FbegTu0Dijfc_W_gYBORTffWrRhqNGfAEqQldb0C_ZCEXwONFkoQyQjwwIHOfPgm9RPx0CpYHUJ0zVEh_WssWvxVeOBXZ4jg/s1600/JavaScript+Tutorials+-+Where+And+How+To+Use+JavaScript+-+Progrramers.jpg" alt="JavaScript Tutorials : Where And How To Use JavaScript - Progrramers"></noscript>
</div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com2tag:blogger.com,1999:blog-3952009654906237808.post-89492505385930931712019-10-23T11:17:00.000-07:002019-10-28T07:16:15.160-07:00JavaScript How To : How to create Cascading Dropdown Using Plain JS - progrramers<div dir="ltr" style="text-align: left;" trbidi="on">
Hello programmers! This is a new “<strong>JavaScript How To”</strong> post which describes ‘How to create <strong>Cascading Dropdown Using Plain JS</strong>’. This is an example of <strong>multiple dependent dropdown lists</strong>. <strong>Multiple dependent cascading dropdown</strong> <strong>lists </strong>are very useful when you want to display the data in specific categories. You can <strong>change drop down options based on another dropdown</strong> lists.<br />
<div class="separator" style="clear: both; display: none; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjpGrd6-AKuHChyr503zgMMfpXHHwX8ciHJD0aTPRrDiYMD34dqGICcyJ9RMt3gowsCJItLnWd5pMJh1tTSDnulVYqiQcqcACJyt1z5Go2Szxl9X24so08aO4RbNYGGCny97T71A2MpiY/s1600/How+to+create+Cascading+Dropdown+Using+Plain+JS%25E2%2580%2599.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="JavaScript How To : How to create Cascading Dropdown Using Plain JS - progrramers" border="0" data-original-height="900" data-original-width="1600" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjpGrd6-AKuHChyr503zgMMfpXHHwX8ciHJD0aTPRrDiYMD34dqGICcyJ9RMt3gowsCJItLnWd5pMJh1tTSDnulVYqiQcqcACJyt1z5Go2Szxl9X24so08aO4RbNYGGCny97T71A2MpiY/s200/How+to+create+Cascading+Dropdown+Using+Plain+JS%25E2%2580%2599.jpg" title="JavaScript How To : How to create Cascading Dropdown Using Plain JS - progrramers" width="200" /></a></div>
<br />
First of all, you can click on <strong>Try yourself</strong> button in below example and check what are we going to create and after that you will find all the require source code of this project. You can also bookmark the repository of <a href="https://github.com/progrramers" rel="noopener" target="_blank" title="progrramers GitHub Community"><strong>progrramers GitHub community</strong></a> where you can find and download the source code of other projects.<br />
If you like our posts please give <strong>thumbs up</strong> <span style="color: blue; font-size: 28px;">👍</span> on our Facebook page and also share with your near n dears.<br />
<div style="display: block;">
<div id="fb-root">
</div>
<script async="" crossorigin="anonymous" defer="" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v4.0&appId=134223867260407&autoLogAppEvents=1"></script>
<br />
<div class="fb-like" data-action="recommend" data-href="https://developers.facebook.com/theprogrramers" data-layout="button_count" data-show-faces="true" data-size="large" data-width="">
</div>
</div>
<br />
<div style="display: block;">
</div>
<br />
<h2>
<strong>Diagram</strong></h2>
In this example we are assuming that there is a school. It has multiple class rooms, every class room contains multiple sections, every section contains multiple subjects and at last every section period will held on a different room. You can see the whole scenario in below image given for the reference.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhBHJZDdbLTYRdXWac2NYPbstz281tCvHIBrWMeLwxOYjcvHL_wClkeNootd7i8yjwHvgATpZqcwRsQ4rHw1-JNnltX_hOy_t9DlBPFkVl6Sd1OGUfyT-mYYztbRm7taCOnVgdiCBcF50/s1600/multiple+dependent+dropdown+lists.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="How to create Cascading Dropdown Using Plain JS - progrramers" border="0" data-original-height="800" data-original-width="1280" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhBHJZDdbLTYRdXWac2NYPbstz281tCvHIBrWMeLwxOYjcvHL_wClkeNootd7i8yjwHvgATpZqcwRsQ4rHw1-JNnltX_hOy_t9DlBPFkVl6Sd1OGUfyT-mYYztbRm7taCOnVgdiCBcF50/s640/multiple+dependent+dropdown+lists.jpg" title="How to create Cascading Dropdown Using Plain JS - progrramers" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">How to create Cascading Dropdown Using Plain JS - progrramers</td></tr>
</tbody></table>
<br />
<div style="text-align: left;">
The data will be in tree structure which is used to parse as options in '<code>SELECT</code>' elements. Let's see the work flow of the final product.</div>
<h2>
<strong>Work Flow </strong></h2>
<ol>
<li>Classes names only append into select element onload first.</li>
<li>When Selecting a Class then section options will append, available with that class. Same work flow for sections, subjects and rooms.</li>
<li>When Class gets changed then sections, subjects and rooms also get reset. Same work flow for sections, subjects and rooms. Synopsis when a drop down element updated then all next siblings also gets reset.</li>
</ol>
Now you can copy the code and paste it into your favorite editor and save as ‘anyname.html’ and run into your favorite browser. Analyze the code and if you are getting any problem then feel free to write down into the comment section I’ll try to be more specific into the answers.<br />
<br />
You can also get this code on github : <a href="https://github.com/progrramers/Source-Code/blob/master/How%20to%20create%20Cascading%20Dropdown%20Using%20Plain%20JS.html" rel="nofollow" target="_blank" title="GitHub : progrramers">How to create Cascading Dropdown Using Plain JS.html</a>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
How to create Cascading Dropdown Using Plain JS :</div>
<div class="prr_div_2">
<pre><code class="html">
<!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>Document</title>
<style>
*{box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
.classform{border: 5px groove #00acf0;background: #c5c5c5;border-radius: 4px;}
div{padding:5px;}
.classform>div{width:450px;display:block;margin-left:auto;margin-right:auto;}/*for responsive look*/
label{background: #00acf0;color:rgb(255, 255, 255);text-shadow:1px 1px 1px #777}
label,select{display:inline-block;padding:6px;border-radius:3px}
label{width:100px;}
select{width:250px;}
</style>
</head>
<body>
<div class="classform">
<div><label for="class">Class: </label> <select name="class" id="class"></select></div>
<div><label for="section">Section: </label> <select name="section" id="section"></select></div>
<div><label for="subject">Subject: </label> <select name="subject" id="subject"></select></div>
<div><label for="room">Room: </label> <select name="room" id="room"></select></div>
</div><hr/>
<a href="https://www.facebook.com/theprogrramers">Follow us on Facebook Page</a>
<script>
//class structure data in JS object format
var structure = [
{label:"class",value:"1",child:[
{label:"section",value:"A",child:[
{label:"subject",value:"Math",child:[
{label:"room",value:"1 (A)",child:[]},
]},
{label:"subject",value:"Hindi",child:[
{label:"room",value:"1 (A)",child:[]},
]},
{label:"subject",value:"Science",child:[
{label:"room",value:"1 (A)",child:[]},
]},
]},
{label:"section",value:"B",child:[
{label:"subject",value:"Math",child:[
{label:"room",value:"1 (B)",child:[]},
]},
{label:"subject",value:"Hindi",child:[
{label:"room",value:"1 (B)",child:[]},
]},
{label:"subject",value:"Science",child:[
{label:"room",value:"1 (B)",child:[]},
]},
]},
{label:"section",value:"C",child:[
{label:"subject",value:"Science",child:[
{label:"room",value:"1 (B)",child:[]},
]}
]},
{label:"section",value:"D",child:[
{label:"subject",value:"Math",child:[
{label:"room",value:"1 (B)",child:[]},
]}
]},
]},
{label:"class",value:"2",child:[
{label:"section",value:"A",child:[
{label:"subject",value:"Science",child:[
{label:"room",value:"2 (A)",child:[]},
]},
{label:"subject",value:"Sanskrit",child:[
{label:"room",value:"2 (A)",child:[]},
]},
{label:"subject",value:"English",child:[
{label:"room",value:"2 (A)",child:[]},
]},
]},
{label:"section",value:"B",child:[
{label:"subject",value:"Math",child:[
{label:"room",value:"2 (B)",child:[]},
]},
{label:"subject",value:"Civics",child:[
{label:"room",value:"2 (B)",child:[]},
]},
{label:"subject",value:"Geography",child:[
{label:"room",value:"2 (B)",child:[]},
]},
{label:"subject",value:"Economics",child:[
{label:"room",value:"2 (B)",child:[]},
]},
]},
{label:"section",value:"C",child:[
{label:"subject",value:"Math",child:[
{label:"room",value:"2 (C)",child:[]},
]}
]},
{label:"section",value:"D",child:[
{label:"subject",value:"Math",child:[
{label:"room",value:"2 (D)",child:[]},
]}
]}
]},
{label:"class",value:"3",child:[
{label:"section",value:"C",child:[
{label:"subject",value:"Hindi",child:[
{label:"room",value:"3 (A)",child:[]},
]}
]}
]},
];
//global variable declaration to store value stepwise
var cindex, sindex, jindex;
//calling funfction onload
window.onload = function(){
classstrucure(structure, document.querySelectorAll('[name=class]'));
}
document.querySelector('body').addEventListener('change',function(e){
if(e.target.tagName.toLowerCase() == "select"){
if(e.target.value!==""){
//check of nextsibling is null or not
nextsibling = e.target.closest('DIV').nextSibling.nextSibling;
if(nextsibling!==null){
var _nameAttr=e.target.getAttribute("name");
var nextElm = nextsibling.querySelectorAll('SELECT');
//for your project only you have to change the attributes name
if(_nameAttr==='class'){
cindex = structure.map(function(i){return i.value}).indexOf(e.target.value);
classstrucure(structure[cindex].child, nextElm);
//for your project only you have to change the attributes name
}else if(_nameAttr==='section'){
sindex = structure[cindex].child.map(function(i){return i.value}).indexOf(e.target.value);
classstrucure(structure[cindex].child[sindex].child, nextElm);
//for your project only you have to change the attributes name
}else if(_nameAttr==='subject'){
jindex = structure[cindex].child[sindex].child.map(function(i){return i.value}).indexOf(e.target.value);
classstrucure(structure[cindex].child[sindex].child[jindex].child, nextElm);
}
}
}else{
//e.target.value is empty then same function will fire with defferent parameters
clearsturcture(e.target.closest('DIV').nextSibling);
}
}
});
//function create the structure of class step wise
function classstrucure(data, el){
//first clear all the select element onload
//clear all next sibling accept itself
el.forEach(element => {
clearsturcture(element.closest('DIV'));
});
// clearsturcture(el[0].closest('DIV'));
var opt = '<option value="">--Select--</option>';
//creating options elemnet
for(var i=0;i<data.length;i++){
opt += '<option value="'+data[i].value+'">'+data[i].value+'</option>';
}
//appending option on each element
el.forEach(element => {
element.innerHTML = opt;
});
}
//clear all the next drop down element after itself
function clearsturcture(parentEl){
while (parentEl) {
if(parentEl.tagName !== undefined){
//appending initial option on every next sibling
parentEl.querySelector('SELECT').innerHTML = '<option>--Select--</option>';
}
//looping through last existing sibling and target
parentEl = parentEl.nextSibling;
}
}
</script>
</body>
</html>
</code></pre>
</div>
<a class="prr_link" href="https://www.progrramers.com/p/javascript-how-to-how-create-cascading.html" rel="dofollow" target="_blank" title="How to create tab window in html using JavaScript and CSS – progrramers example">Try Yourself</a>
</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<strong><u>Related Topics</u></strong><br />
<br />
<div class="related-protopics" lang-name="howto"></div>
</div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com2tag:blogger.com,1999:blog-3952009654906237808.post-90070914570842785252019-10-15T13:11:00.005-07:002022-03-21T18:54:16.764-07:00MongoDB Tutorial : How to get lowercase hexadecimal string from MongoDB ObjectId() – Mongodb Objectid Operations<div dir="ltr" style="text-align: left;" trbidi="on">
<h2>
<strong>What is MongoDB ObjectId() ?</strong></h2>
ObjectIds are small unique ID that generated very fast and ordered. <strong>ObjectId</strong> values consist of 12 bytes, where the first four bytes are a timestamp that reflect the seconds since the <strong>Unix epoch</strong>, 5-byte random value, and last 3-byte counter, starting with a random value.<br />
<br />
In MongoDB, each document stored in a collection requires a unique _id field that acts as a primary key. If an inserted document omits the _id field, the MongoDB driver automatically generates an ObjectId for the <strong>_id</strong> field.<br />
<br />
<strong>MongoDB ObjectId</strong> is generated by <strong>MongoDB Drivers</strong> and the Server using a default <strong>Algorithm</strong>. By default <strong>typeof</strong> MongoDB ObjectId is object.<br />
<br />
MongoDB ObjectId 12 bytes can be break up in to following:<br />
<br />
<table>
<tbody>
<tr>
<td width="319"><strong>Size</strong></td>
<td width="442"><strong>Description</strong></td>
</tr>
<tr>
<td width="319">4 Bytes</td>
<td width="442">4-byte value representing the seconds since the Unix epoch</td>
</tr>
<tr>
<td width="319">3 Bytes</td>
<td width="442">3-byte machine identifier</td>
</tr>
<tr>
<td width="319">2 Bytes</td>
<td width="442">2-byte process id</td>
</tr>
<tr>
<td width="319">3 Bytes</td>
<td width="442">3-byte counter, starting with a random value</td>
</tr>
</tbody>
</table>
<br />
Above is a description of <strong>MongoDB ObjectId</strong>. Most of the time developers requires unique id of the objects to be rendered on web page. In <strong>MongoDB ObjectId</strong> are the <strong>primary key</strong> and best for using as <strong>unique ID</strong>. Therefore here on the <strong>progrramers.com</strong> we are giving the solution for ‘<strong>How to get lowercase hexadecimal mongodb _id string from ObjectId() in MongoDB ?</strong>’<br />
<br />
<strong>Below is the example database which we are using the MongoDB tutorial :</strong>
<br /><br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<div class="progrramers_code">
<code>
> db.cars.find().toArray();<br />
[<br />
{<br />
"_id" : ObjectId("5d53065a520ea88ac000e981"),<br />
"name" : "Ford",<br />
"color" : "blue",<br />
"weight" : "300KG"<br />
},<br />
{<br />
"_id" : ObjectId("5d53066a520ea88ac000e982"),<br />
"name" : "Opel",<br />
"color" : "red"<br />
},<br />
{<br />
"_id" : ObjectId("5d530677520ea88ac000e983"),<br />
"name" : "Mustang",<br />
"color" : "silver"<br />
},<br />
{<br />
"_id" : ObjectId("5d53069f520ea88ac000e984"),<br />
"name" : "porsche",<br />
"color" : "black"<br />
}<br />
]<br />
><br />
</code>
</div>
<br />
<br />
There are many methods available that can be use to extract the <strong>lowercase hexadecimal mongodb _id string</strong> from MongoDB ObjectId. We will try to approach all possible ways by using <strong>MongoDB methods</strong> and <strong>JavaScript methods</strong> as well.<br />
<br />
<h3 style="text-align: left;">
How to get lowercase hexadecimal string from MongoDB ObjectId using ‘valueOf()’ method</h3>
Syntax : <strong>db.collectionname.findOne()._id.valueOf()</strong><br />
<br />
<div class="progrramers_code">
<code>
> db.cars.findOne()._id.valueOf();<br />
5d53065a520ea88ac000e981<br />
><br />
</code>
</div>
<br />
<br />
<strong>Explanation</strong><br />
<br />
In this method first db.collectionname.findOne() will return the JavaScript Object in form of ‘<strong>property : value</strong>’ pair then by using JavaScript Object. Property method we will get ObjectId() e.g. ‘ObjectId("5d53065a520ea88ac000e981")’. After that <strong>valueOf()</strong> function extract the <strong>lowercase hexadecimal MongoDB _id string</strong> e.g. ‘5d53065a520ea88ac000e981’ from MongoDB ObjectId(). The data-type of the result will be ‘string’.<br />
<br />
<h3 style="text-align: left;">
How to get lowercase hexadecimal string from MongoDB ObjectId using ‘str’ method</h3>
<br />
Syntax : <strong>db.collectionname.findOne()._id.str</strong><br />
<br />
<div class="progrramers_code">
<code>
> db.cars.findOne()._id.str;<br />
5d53065a520ea88ac000e981<br />
><br />
</code>
</div>
<br />
<br />
<strong>Explanation</strong><br />
<br />
In this method first db.collectionname.findOne() will return the JavaScript Object like above mentioned method e.g. ‘ObjectId("5d53065a520ea88ac000e981")’. After that ‘<strong>str</strong>’ method extract the <strong>lowercase hexadecimal mongodb _id</strong> string e.g. ‘5d53065a520ea88ac000e981’ from MongoDB ObjectId(). The data-type of the result will be ‘string’.<br />
<br />
<h3 style="text-align: left;">
How to get value of the ObjectId() in MongoDB using stored functions</h3>
<br />
There is a special system collection named system.js that can store JavaScript functions for reuse. We can latter call the function using ‘<strong>db.eval()</strong>’ or ‘<strong>db.loadServerScripts()</strong>’ methods and get results.<br />
<br />
Syntax : <strong>db.system.js.save({_id:”functionname”,value:function(parameters){//code here}})</strong><br />
<br />
<div class="progrramers_code">
<code>
> db.system.js.save({<br />
... _id:"getObjectID",<br />
... value:function(){<br />
... var doc = db.cars.findOne();<br />
... return doc._id.valueOf();<br />
... }<br />
... });<br />
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })<br />
> db.eval("return getObjectID()")<br />
WARNING: db.eval is deprecated<br />
5d53065a520ea88ac000e981<br />
><br />
</code>
</div>
<br />
<strong>Explanation</strong><br />
<br />
Below example first stores the object in ‘doc’ variable in form of ‘<strong>property: value</strong>’ pair then by using JavaScript Object. Property method we will get ObjectId() e.g. ‘ObjectId("5d53065a520ea88ac000e981")’. After that <strong>valueOf()</strong> function extract the <strong>lowercase hexadecimal MongoDB _id string</strong> e.g. ‘5d53065a520ea88ac000e981’ from MongoDB ObjectId(). The data-type of the result will be ‘string’. The whole function expression stored in variable and saved in ‘system.js’ collection.<br />
<b><span style="color: red;">Note :</span></b> db.eval is deprecated from MongoDB version 3.2 but finally db.eval is removed from MongDB version 4.2 but db.loadServerScripts() method can be used instead<br />
<br />
Above stored function is called using ‘db.eval()’ method, below is another method to call stored function in MongoDB shell.<br />
<br />
<div class="progrramers_code">
<code>
> db.system.js.save({<br />
... _id:"getObjectID",<br />
... value:function(){<br />
... var doc = db.cars.findOne();<br />
... return doc._id.valueOf();<br />
... }<br />
... });<br />
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })<br />
> db.loadServerScripts()<br />
> getObjectID()<br />
WARNING: db.eval is deprecated<br />
5d53065a520ea88ac000e981<br />
><br />
</code>
</div>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<h3 style="text-align: left;">
How to get value of the ObjectId() in MongoDB using plain JavaScript</h3>
MongoDB stored functions uses pure JavaScript so it is possible to apply various JavaScript methods to perform a certain task. Now we will see how to get the hexadecimal string in bulk using ‘Array.map()’ function from <strong>JavaScript Arrary of ObjectId()</strong>.<br />
<br />
<div class="progrramers_code">
<code><br />
> db.system.js.save({<br />
... _id:"getObjectID",<br />
... value:function(){<br />
... var doc = db.cars.find().toArray();<br />
... return doc.map(function(i){return i._id.valueOf()});<br />
... }<br />
... });<br />
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })<br />
> db.eval("return getObjectID()");<br />
WARNING: db.eval is deprecated<br />
[<br />
"5d53065a520ea88ac000e981",<br />
"5d53066a520ea88ac000e982",<br />
"5d530677520ea88ac000e983",<br />
"5d53069f520ea88ac000e984"<br />
]<br />
><br />
</code>
</div>
<br />
<br />
<h3 style="text-align: left;">
How to get value of the ObjectId() in MongoDB using forEach loop</h3>
In this example we will see how to use forEach loop in <strong>MongoDB Stored function</strong> to extract <strong>hexadecimal MngoDB _id string</strong> in bulk from JavaScript Arrary of ObjectId().<br />
<br />
<div class="progrramers_code">
<code><br />
> db.system.js.save({<br />
... _id:"getObjectID",<br />
... value:function(){<br />
... var doc = db.cars.find().toArray();<br />
... var myArr = [];<br />
... doc.forEach(element => {<br />
... myArr.push(element._id.valueOf());<br />
... });<br />
... return myArr;<br />
... }<br />
... });<br />
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })<br />
> db.eval("return getObjectID()");<br />
WARNING: db.eval is deprecated<br />
[<br />
"5d53065a520ea88ac000e981",<br />
"5d53066a520ea88ac000e982",<br />
"5d530677520ea88ac000e983",<br />
"5d53069f520ea88ac000e984"<br />
]<br />
><br />
</code>
</div>
<br />
<br />
<h3 style="text-align: left;">
How to get value of the ObjectId() in MongoDB using for Loop</h3>
In this example we will see how to use for loop in MongoDB Stored function to extract <strong>hexadecimal MongoDb _id string</strong> in bulk from JavaScript Arrary of ObjectId().<br />
<br />
<div class="progrramers_code">
<code><br />
> db.system.js.save({<br />
... _id:"getObjectID",<br />
... value:function(){<br />
... var doc = db.cars.find().toArray();<br />
... var myArr = [];<br />
... for(var i=0;i<doc.length;i++){<br />
... myArr.push(doc[i]._id.valueOf());<br />
... }<br />
... return myArr;<br />
... }<br />
... });<br />
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })<br />
> db.eval("return getObjectID()");<br />
WARNING: db.eval is deprecated<br />
[<br />
"5d53065a520ea88ac000e981",<br />
"5d53066a520ea88ac000e982",<br />
"5d530677520ea88ac000e983",<br />
"5d53069f520ea88ac000e984"<br />
]<br />
><br />
</code>
</div>
<br />
<br />
<h3 style="text-align: left;">
Mongodb compare Objectid to String</h3>
<br />
<div class="progrramers_code">
<code><br />
> typeof db.cars.findOne().toString();<br />
string<br />
><br />
</code>
</div>
<br />
<br />
<h3 style="text-align: left;">
How to get value of the ObjectId() in MongoDB using JavaScript substring</h3>
In this example we will see how to use JavaScript substring method in MongoDB Stored function to extract <strong>hexadecimal MongoDB _id string</strong> from ObjectId().<br />
<br />
<div class="progrramers_code">
<code><br />
> db.system.js.save({<br />
... _id:"getObjectID",<br />
... value:function(){<br />
... var doc = db.cars.findOne();<br />
... return doc._id.toString().substring(10, 34);<br />
... }<br />
... });<br />
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })<br />
> db.eval("return getObjectID()");<br />
WARNING: db.eval is deprecated<br />
5d53065a520ea88ac000e981<br />
><br />
</code>
</div>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Same method can be used to extract <strong>hexadecimal MongoDB _id string</strong> in bulk from <strong>JavaScript Arrary of ObjectId()</strong>.<br />
<br />
<div class="progrramers_code">
<code><br />
> db.system.js.save({<br />
... _id:"getObjectID",<br />
... value:function(){<br />
... var doc = db.cars.find().toArray();<br />
... return doc.map(function(i){<br />
... return i._id.toString().substring(10, 34)<br />
});<br />
... }<br />
... });<br />
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })<br />
> db.eval("return getObjectID()");<br />
WARNING: db.eval is deprecated<br />
[<br />
"5d53065a520ea88ac000e981",<br />
"5d53066a520ea88ac000e982",<br />
"5d530677520ea88ac000e983",<br />
"5d53069f520ea88ac000e984"<br />
]<br />
><br />
</code>
</div>
<br />
<br />
<h3 style="text-align: left;">
How to get value of the ObjectId() in MongoDB using JavaScript slice</h3>
In this example we will see how to use JavaScript slice method in MongoDB Stored function to extract hexadecimal <strong>MongoDb _id string</strong> from ObjectId().<br />
<br />
<div class="progrramers_code">
<code><br />
> db.system.js.save({<br />
... _id:"getObjectID",<br />
... value:function(){<br />
... var doc = db.cars.findOne();<br />
... return doc._id.toString().slice(10, 34);<br />
... }<br />
... });<br />
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })<br />
> db.eval("return getObjectID()");<br />
WARNING: db.eval is deprecated<br />
5d53065a520ea88ac000e981<br />
><br />
</code>
</div>
<br />
<br />
Same method can be used to extract hexadecimal string in bulk from JavaScript Arrary of ObjectId().<br />
<br />
<div class="progrramers_code">
<code><br />
> db.system.js.save({<br />
... _id:"getObjectID",<br />
... value:function(){<br />
... var doc = db.cars.find().toArray();<br />
... return doc.map(function(i){<br />
... return i._id.toString().slice(10, 34)<br />
});<br />
... }<br />
... });<br />
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })<br />
> db.eval("return getObjectID()");<br />
WARNING: db.eval is deprecated<br />
[<br />
"5d53065a520ea88ac000e981",<br />
"5d53066a520ea88ac000e982",<br />
"5d530677520ea88ac000e983",<br />
"5d53069f520ea88ac000e984"<br />
]<br />
><br />
</code>
</div>
<br />
<br />
<h3 style="text-align: left;">
How to get typeof the ObjectId() in MongoDB using JavaScript</h3>
Getting the typeof ObjectId()<br />
<br />
<div class="progrramers_code">
<code><br />
> typeof db.cars.findOne()._id;<br />
object<br />
><br />
</code>
</div>
<br />
<br />
<h3 style="text-align: left;">
How to get the typeof function variable stored in system.js</h3>
<br />
<div class="progrramers_code">
<code><br />
> typeof db.eval("return getObjectID()");<br />
WARNING: db.eval is deprecated<br />
object<br />
><br />
</code>
</div>
<br />
<h3 style="text-align: left;">
How to get the typeof output value</h3>
<br />
<div class="progrramers_code">
<code><br />
> typeof db.eval("return getObjectID()")[0];<br />
WARNING: db.eval is deprecated<br />
string<br />
><br />
</code>
</div><br/><br/>
<strong><u>Related Topics</u></strong><br />
<br />
<div class="related-protopics" lang-name="howto"></div>
<div class="separator" style="clear: both; display: none; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6DaTWxfgarB2QHlL1gcNyqApBd6HQ00ICFWVhwO69-BK9bt7iRtgeA0AdPocWI_D7GhVKnjxdcjYyyibWlokknbs_p5Qgcpu1JmLzn8OCrn7Bbd56fRpu_uS0iBvSYfntGUAcryrB5s/s1600/MongoDB+Tutorial+How+to+get+lowercase+hexadecimal+string+from+MongoDB+ObjectId%2528%2529+%25E2%2580%2593+Mongodb+Objectid+Operations.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6DaTWxfgarB2QHlL1gcNyqApBd6HQ00ICFWVhwO69-BK9bt7iRtgeA0AdPocWI_D7GhVKnjxdcjYyyibWlokknbs_p5Qgcpu1JmLzn8OCrn7Bbd56fRpu_uS0iBvSYfntGUAcryrB5s/s320/MongoDB+Tutorial+How+to+get+lowercase+hexadecimal+string+from+MongoDB+ObjectId%2528%2529+%25E2%2580%2593+Mongodb+Objectid+Operations.jpg" width="320" /></a></div>
<br /></div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com17tag:blogger.com,1999:blog-3952009654906237808.post-70276985481254485822019-09-30T13:14:00.001-07:002022-03-21T18:56:59.475-07:00MongoDB Data Types – progrramers explained<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
Hello world! We have seen <a href="https://www.progrramers.com/2019/08/why-eventlisteners-donot-work-dynamic-html-dom-progrramers-explanation.html" rel="dofollow noopener" target="_blank" title="MongoDB Tutorial : CRUD Operations In MongoDB, Insert, Find, Update And Delete Document – Progrramers">How to do CRUD operation in MongoDB</a> earlier now it’s time to know what are <strong>data type</strong> which helps us create more efficient database using <strong>MongoDB</strong>. <strong>MongoDB supports more than 15 data types</strong> but more important is that what kind of data type is basically used to store the documents.</div>
<div style="text-align: left;">
<br /></div>
<strong>MongoDB uses binary-encoded serialization</strong> of JSON-like documents called <strong>BSON</strong> to store documents and make remote procedure calls. Like JSON, BSON supports the embedding of documents and arrays within other documents and arrays. BSON also contains extensions that allow representation of <strong>data types</strong> that are not part of the JSON specifications. Being more specific BSON is a binary format in which zero or more ordered key/value pairs are stored as a single entity. We call this entity a <em>document</em>.<br />
<br />
<strong>Data type</strong> is an important part of Database. When you store the data in database with proper data type it reflects faster performance, therefore data type is important. For e.g. a number can be stored as an integer or string both but if we require numbers later for mathematical calculation then it is good to store the numerical value as integer to get faster mathematical calculations.<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
In MongoDB each BSON type has both integer and string identifiers as listed in the following table:<br />
<br />
<table border="1" style="width: 512px;">
<tbody>
<tr>
<td width="163"><strong>Type</strong></td>
<td width="163"><strong>Number</strong></td>
<td width="255"><strong>Alias</strong></td>
<td width="152"><strong>Notes</strong></td>
</tr>
<tr>
<td width="163">Double</td>
<td width="63">1</td>
<td width="155">“double”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">String</td>
<td width="63">2</td>
<td width="155">“string”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Object</td>
<td width="63">3</td>
<td width="155">“object”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Array</td>
<td width="63">4</td>
<td width="155">“array”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Binary data</td>
<td width="63">5</td>
<td width="155">“binData”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Undefined</td>
<td width="63">6</td>
<td width="155">“undefined”</td>
<td width="132">Deprecated.</td>
</tr>
<tr>
<td width="163">ObjectId</td>
<td width="63">7</td>
<td width="155">“objectId”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Boolean</td>
<td width="63">8</td>
<td width="155">“bool”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Date</td>
<td width="63">9</td>
<td width="155">“date”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Null</td>
<td width="63">10</td>
<td width="155">“null”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Regular Expression</td>
<td width="63">11</td>
<td width="155">“regex”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">DBPointer</td>
<td width="63">12</td>
<td width="155">“dbPointer”</td>
<td width="132">Deprecated.</td>
</tr>
<tr>
<td width="163">JavaScript</td>
<td width="63">13</td>
<td width="155">“javascript”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Symbol</td>
<td width="63">14</td>
<td width="155">“symbol”</td>
<td width="132">Deprecated.</td>
</tr>
<tr>
<td width="163">JavaScript (with scope)</td>
<td width="63">15</td>
<td width="155">“javascriptWithScope”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">32-bit integer</td>
<td width="63">16</td>
<td width="155">“int”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Timestamp</td>
<td width="63">17</td>
<td width="155">“timestamp”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">64-bit integer</td>
<td width="63">18</td>
<td width="155">“long”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Decimal128</td>
<td width="63">19</td>
<td width="155">“decimal”</td>
<td width="132">New in version 3.4.</td>
</tr>
<tr>
<td width="163">Min key</td>
<td width="63">-1</td>
<td width="155">“minKey”</td>
<td width="132"></td>
</tr>
<tr>
<td width="163">Max key</td>
<td width="63">127</td>
<td width="155">“maxKey”</td>
<td width="132"></td>
</tr>
</tbody>
</table>
<br />
Some of the most important data types are explained below:<br />
<br />
<strong>String</strong><br />
<br />
String data type is the most commonly used datatype to store the data. String in MongoDB must be UTF-8 valid. MongoDB $regex queries support UTF-8 in the regex string.<br />
<br />
<strong>NumberDecimal</strong><br />
<br />
The decimal BSON <strong>data type</strong> uses the IEEE 754 decimal128 floating-point numbering format which supports 34 decimal digits (i.e. significant digits) and an exponent range of −6143 to +6144. Decimal 128 datatype is introduced in 3.4 version of MongoDB.<br />
<br />
<strong>NumberLong (Integer)</strong><br />
<br />
The mongo shell treats all numbers as floating-point values by default. The mongo shell provides the NumberLong() wrapper to handle 64-bit integers.<br />
<br />
<strong>NumberInt (Integer)</strong><br />
<br />
The mongo shell treats all numbers as floating-point values by default. The mongo shell provides the NumberInt() constructor to explicitly specify 32-bit integers.<br />
<br />
<strong>Date</strong><br />
<br />
<strong>BSON Date</strong> is a 64-bit integer that represents the number of milliseconds since the Unix epoch (Jan 1, 1970). This results in a representable date range of about 290 million years into the past and future.<br />
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<strong>Timestamp</strong><br />
<br />
BSON has a special timestamp type for internal MongoDB use and is not associated with the regular Date type. Timestamp values are a 64 bit value where the first 32 bits are a time_t value (seconds since the Unix epoch) and the second 32 bits are an incrementing ordinal for operations within a given second.<br />
<br />
Within single mongod instance timestamp values are always unique.<br />
<br />
<strong>Array</strong><br />
<br />
Arrays are the data type that can store single or multiple arrays or values within a single key.<br />
<br />
<strong>Object</strong><br />
<br />
Objects are the data type that used for embedded documents<br />
<br />
<strong>Object ID</strong><br />
<br />
ObjectIds are small unique ID that generated very fast and ordered. ObjectId values consist of 12 bytes, where the first four bytes are a timestamp that reflect the seconds since the Unix epoch, 5-byte random value, and last 3-byte counter, starting with a random value.<br />
<br />
In MongoDB, each document stored in a collection requires a unique _id field that acts as a primary key. If an inserted document omits the _id field, the MongoDB driver automatically generates an ObjectId for the _id field.<br />
<br />
<a href="https://www.progrramers.com/2019/10/mongodb-tutorial-how-get-lowercase-hexadecimal-string-mongodb-objectid-mongodb-objectid-operations.html" rel="dofollow" target="_blank" title="MongoDB Tutorial : How to get lowercase hexadecimal string from MongoDB ObjectId() – Mongodb Objectid Operations."><strong>MongoDB Tutorial : How to get lowercase hexadecimal string from MongoDB ObjectId() – Mongodb Objectid Operations.</strong></a>
<br />
<br />
<strong>Boolean</strong><br />
<br />
This data type is store Boolean values i.e. True or False.<br />
<br />
<strong>Min/Max Keys</strong><br />
<br />
This type is used to compare a value against the lowest and highest BSON elements. The min and max keys indicate that the system should avoid normal query planning. Instead they construct an index scan where the index bounds are explicitly specified by the values given in min and max.<br />
<br />
<strong>Null</strong><br />
<br />
This data type is used to store null data.<br />
<br />
<strong>Binary data</strong><br />
<br />
This data type is used to store binary form of data.<br />
<br />
<strong>Regular Expression</strong><br />
<br />
This data type is used to store regular expression.<br />
<br />
<strong>Data Modeling in MongoDB</strong><br />
<br />
Unlike SQL databases, where you must determine and declare a table’s schema before inserting data, MongoDB’s collections, by default, does not require its documents to have the same schema. Data in MongoDB has a flexible schema documents in the same collection. They offer to create different fields, structure and data types in and common fields in same collection. This flexibility gives you data-modeling choices to match your application and its performance requirements.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="display: none; margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia0x8h3pMryiVgp5YUmg_KTUAwsRn3x_7x6Rcq8-j5R0B4uO1tVN80m_2C3A6_iNFhd4QGdVwOiGMSVcDo92ULvhDwXZSHHIMpZsPKr3hp6-ujkEANFtsgcsRyjLdvAvVKguHndQZk_ig/s1600/MongoDB+Tutorial+-+MongoDB+Data+Type.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="MongoDB Data Types – progrramers explained" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia0x8h3pMryiVgp5YUmg_KTUAwsRn3x_7x6Rcq8-j5R0B4uO1tVN80m_2C3A6_iNFhd4QGdVwOiGMSVcDo92ULvhDwXZSHHIMpZsPKr3hp6-ujkEANFtsgcsRyjLdvAvVKguHndQZk_ig/s640/MongoDB+Tutorial+-+MongoDB+Data+Type.jpg" title="MongoDB Data Types – progrramers explained" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">MongoDB Data Types – progrramers explained</td></tr>
</tbody></table>
<br /></div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com2tag:blogger.com,1999:blog-3952009654906237808.post-71286701596386109682019-09-15T11:23:00.000-07:002019-10-15T13:26:55.178-07:00MongoDB Tutorial : CRUD Operations in MongoDB, Insert, Find, Update and Delete Document – Progrramers<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_count">
Hello Programmers! In previous chapters we were introduced with <strong>MongoDB</strong>. Now we know that MongoDB is <strong>NoSQL database</strong> program that provides a mechanism for storage and retrieval of data in documents of tree structured collections and also we learnt ‘how to <strong>create/remove database and collections</strong> in <strong>MongoDB shell'</strong>.<br />
<br />
<div class="separator" style="clear: both; display: none; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigAs79j-9HEPvwZ-y3EpgRdRWA_iuCgj4Kg7LuAS2pCw3F-3Ny4F0WD4X0lMBxwQZRg1zs75UkoIeQX2hTsJWn5hOua6qSXEZC9pM1m9dEI5grGjHelHI0mnUaDQzYJghvMManLLulsK0/s1600/MongoDB+Tutorial+-+CRUD+Operations+in+MongoDB%252C+Insert%252C+Find%252C+Update+and+Delete+Document+%25E2%2580%2593+Progrramers.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MongoDB Tutorial - CRUD Operations in MongoDB, Insert, Find, Update and Delete Document – Progrramers" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigAs79j-9HEPvwZ-y3EpgRdRWA_iuCgj4Kg7LuAS2pCw3F-3Ny4F0WD4X0lMBxwQZRg1zs75UkoIeQX2hTsJWn5hOua6qSXEZC9pM1m9dEI5grGjHelHI0mnUaDQzYJghvMManLLulsK0/s640/MongoDB+Tutorial+-+CRUD+Operations+in+MongoDB%252C+Insert%252C+Find%252C+Update+and+Delete+Document+%25E2%2580%2593+Progrramers.jpg" title="MongoDB Tutorial : CRUD Operations in MongoDB, Insert, Find, Update and Delete Document – Progrramers" width="640" /></a></div>
<span id="goog_1375806908"></span><span id="goog_1375806909"></span><br />
<br />
Before we go ahead in this MongoDB Tutorial, let's take a tour on <strong>CRUD operation</strong> in any database.<br />
<h2>
<strong>What is CRUD Operations in database?</strong></h2>
Any <strong>database program</strong> can perform only <strong>four possible operations</strong> as mentioned below :<br />
<ol>
<li><strong>Create</strong> or Insert data/ documents in database</li>
<li><strong>Read </strong>or Select or Find data/documents from database</li>
<li><strong>Update </strong>data/document in database</li>
<li><strong>Delete </strong>data/document from database</li>
</ol>
<strong>C</strong>reate, <strong>R</strong>ead, <strong>U</strong>pdate and <strong>D</strong>elete operations are whole together called <strong>CRUD Operations</strong> in database program.<br />
In this chapter of <strong>MongoDB</strong> Tutorial series we will see how to <strong>Insert</strong>, <strong>find</strong>, <strong>update</strong> and <strong>delete</strong> the documents in <strong>MongoDB shell</strong>.<br />
So let’s go ahead and see how it is done. In previous post we have created database named ‘<strong>cricket</strong>’ and inside that database we have created a collection named ‘<strong>teamindia</strong>’. Now we go to perform <strong>CRUD Operations</strong> on that database through <strong>MongoDB Shell</strong>.<br />
<h2>
<strong>MongoDB : Create or insert Operation </strong></h2>
Create or <strong>insert</strong> operations add new document to a collection. If the collection does not currently exist, insert operations will create the collection and add the document. Check the example for your reference<br />
<br />
<div class="progrramers_code">
<code>
>db.teamindia.insertOne({<br />
name:"Virat Kohali",<br />
role:["Batsman", "Captain"],<br />
batting:"Right-Hand Middle-Order",<br />
bowling:"Right-Arm-Medium",<br />
});<br />
>□<br />
</code>
</div>
<br />
<br />
Above is the example of insert single document to a collection. In MongoDB, insert operations target a single collection. All write operations in MongoDB are <strong>atomic</strong> on the level of a single document.<br />
In other words, <strong>atomicity</strong> means "<strong>indivisibility"</strong> and "<strong>irreducibility</strong>”. MongoDB write operations are atomic, only at the level of a single document. If you're modifying multiple subdocuments inside a document the operation is still atomic, but if you're modifying multiple documents, the operation is not atomic.<br />
<br />
<div class="progrramers_code">
<code>
>db.teamindia.insert({<br />
name:"M.S.Dhoni",<br />
role:["Wicketkeeper", "Batsman"],<br />
batting:"Right-Hand Lower-Middle-Order",<br />
bowling:"Right-Arm-Medium",<br />
});<br />
>□<br />
</code>
</div>
<br />
<br />
<strong>MongoDB shell provides following Methods to insert document in a collection</strong> :<br />
<ul>
<li><strong>db.collectionname.insert()</strong> – insert one or more document at same time</li>
<li><strong>db.collectionname.inserOne()</strong> – insert one document at a time <strong>(Introduced in MongoDB 3.2)</strong></li>
<li><strong>db.collectionname.insertMany()</strong> – insert multiple document at a time <strong>(Introduced in MongoDB 3.2)</strong></li>
</ul>
<h3>
<strong>Mathod: db.collectionname.insert();</strong></h3>
Using this method you can insert one or multiple document at a single write. It takes single data as a JavaScript object. MongoDB provides clients the ability to perform write operations in bulk. In this method, it takes array of JavaScript objects to insert multiple data at single write. Must check the below example carefully :<br />
Example of db.collectionname.insert()<br />
<h3>
<strong>Mathod: db.collectionname.insertOne();</strong></h3>
Using this method you can insert single document in a collections. It takes single data as a JavaScript object.<br />
Example<br />
<h3>
<strong>Mathod: db.collectionname.insertMany();</strong></h3>
Using this method you can insert one or multiple documents at a single write. Like db.collectionname.insert() method this (db.collectionname.insertMany()) method also takes array of JavaScript objects to insert multiple data at single write.<br />
<br />
<br />
<div class="progrramers_code">
<code>
>db.teamindia.insertMany([<br />
{<br />
name:"Sikhar Dhawan",<br />
role:["Batsman"],<br />
batting:"Left-Hand Opener",<br />
},<br />
{<br />
name:"Rohit Sharma",<br />
role:["Batsman", "Vice Captain"],<br />
batting:"Right-Hand Opener",<br />
},<br />
{<br />
name:"Kedar Jadav",<br />
role:["Allrounder","Batsman", "Bowler"],<br />
batting:"Right-Hand Middle-Order",<br />
bowling: "Right-Arm-Slinger-Off-Break"<br />
},<br />
{<br />
name:"Rabindra Jadeja",<br />
role:["Allrounder","Batsman", "Bowler"],<br />
batting:"Left-Hand Lower-Middle-Order",<br />
bowling: "Left-Arm-Off-Break"<br />
},<br />
{<br />
name:"Jasprit Bumrah",<br />
role:["Batsman", "Bowler"],<br />
batting:"Right-Hand Talender",<br />
bowling: "Right-Arm-Fast-Medium"<br />
},<br />
]);<br />
>□<br />
</code>
</div>
<br />
<br />
Check the above example carefully, Data in MongoDB has a <b>flexible schema documents</b> in the same collection. They do not need to have the same set of fields or structure, and common fields in a collection’s documents may hold different types of data.You can see in the above example.<br />
<br />
With MongoDB, you may embed related data in a single structure or document. These schema are generally known as “<b>denormalized</b>” models, and take advantage of MongoDB’s rich documents. Embedded data models allow applications to store related pieces of information in the same database record.<br />
<h2>
<strong>Difference between db.collectionname.insert() and db.collectionname.insertMany() : progrramers explanation</strong></h2>
The major difference between these two methods is the output response value after performing insert and insertmany operations. When inserting multiple document using insert method, you will get the <strong>response</strong> as <strong>BulkWriteResult</strong>() in <strong>JSON format</strong> (see in the below image) while inserting multiple document using insertMany you will get the acknowledge status as true/false and an array of ObjectId of inserted documents (see in the below image).<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTYETkSMvKWSj6m58LwXcQLX9m3inSoX2fkWNa__z-rqAM1qFQGxWXTVlG5oAxZYG6UDogFFSX6hwTh7UMAViPtUKFme-dRM1DO4zIMAKE8QvOpswpTi9uWQTsaxaqwXux5nhYY4nSjIc/s1600/MongoDB+Tutorial+-+difference+between+insert+and+insertMany.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="MongoDB Tutorial - difference between insert and insertMany" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTYETkSMvKWSj6m58LwXcQLX9m3inSoX2fkWNa__z-rqAM1qFQGxWXTVlG5oAxZYG6UDogFFSX6hwTh7UMAViPtUKFme-dRM1DO4zIMAKE8QvOpswpTi9uWQTsaxaqwXux5nhYY4nSjIc/s640/MongoDB+Tutorial+-+difference+between+insert+and+insertMany.jpg" title="MongoDB Tutorial : CRUD Operations in MongoDB, Insert, Find, Update and Delete Document – Progrramers" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">MongoDB Tutorial - difference between insert and insertMany</td></tr>
</tbody></table>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<span style="color: red;"><strong>Note</strong> :</span> The output response value is most important thing while you are working as <strong>professional</strong>. Professional programmers use the methods as per their requirement of output (return) values. <a href="https://www.progrramers.com/" rel="dofollow noopener" target="_blank" title="progrramers : a web school"><strong>Progrramers</strong> </a>also suggest using the insert method as per requirement of response value.<br />
<h2>
<strong>MongoDB : Read or find Operation </strong></h2>
Read or find operation retrieves the documents from collections.<br />
MongoDB shell provides following Methods to query document in collections :<br />
<ul>
<li><strong>db.collectionname.find();</strong> - find entire document(s) from a collection at a time</li>
<li><strong>db.collectionname.findOne();</strong> - find the single document from a collection <strong>(Introduced in MongoDB 3.2)</strong></li>
</ul>
<h3 style="text-align: left;">
Mathod : db.collectionname.find();</h3>
Using this method you can retrieve the document in a collection and it returns a cursor of the selected documents. You can specify query criteria, projection and other filters to this method like motioned in below example :<br />
<br />
<div class="progrramers_code">
<code>
>db.teamindia.find()<br />
{<br />
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f13"),<br />
"name" : "Sikhar Dhawan",<br />
"role" : [<br />
"Batsman"<br />
],<br />
"batting" : "Left-Hand Opener"<br />
}<br />
{<br />
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f14"),<br />
"name" : "Rohit Sharma",<br />
"role" : [<br />
"Batsman",<br />
"Vice Captain"<br />
],<br />
"batting" : "Right-Hand Opener"<br />
}<br />
<br />
>□<br />
</code>
</div>
<br />
While dealing with multiple output results, we can arrange <br />
<h3 style="text-align: left;">
Method : db.collectionname.findOne();</h3>
Using this method you can retrieves the document as per query criteria and it returns a single document. If the criteria matches with multiple records it returns first document in collection according to the natural order which reflects the order of documents on the disk.<br />
<br />
<div class="progrramers_code">
<code>
>db.teamindia.findOne()<br />
{<br />
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f13"),<br />
"name" : "Sikhar Dhawan",<br />
"role" : [<br />
"Batsman"<br />
],<br />
"batting" : "Left-Hand Opener"<br />
}<br />
<br />
>□<br />
</code>
</div>
<br />
<br />
<h2 style="text-align: left;">
<strong>MongoDB : Update Operation </strong></h2>
Using update operation you can modify existing document in a collection. MongoDB provides the following methods to update documents of a collection:<br />
<ul>
<li><strong>db.collection.update ();</strong> - Update document(s) in a collection</li>
<li><strong>db.collection.updateOne();</strong> - Update single document in a collection <strong>(Introduced in MongoDB 3.2)</strong></li>
<li><strong>db.collection.updateMany();</strong> - Update multiple document in a collection <strong>(Introduced in MongoDB 3.2)</strong></li>
<li><strong>db.collection.replaceOne();</strong> - Replace the entire content of a document except for the _id field <strong>(Introduced in MongoDB 3.2)</strong></li>
</ul>
<h3 style="text-align: left;">
Method : db.collectionname.updateOne();</h3>
Using this method you can update single document in a collection. It also takes multiple parameters as filter criteria. When filter criteria matches with multiple document then it updates the first matching document in the collection.<br />
<br />
<div class="progrramers_code">
<code>
>db.teamindia.findOne({batting : "Left-Hand Opener"})<br />
{<br />
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f13"),<br />
"name" : "Sikhar Dhawan",<br />
"role" : [<br />
"Batsman"<br />
],<br />
"batting" : "Left-Hand Opener"<br />
}<br />
> db.teamindia.updateOne({"name" : "Sikhar Dhawan"},{$set:<br />
{"batting" : "Right-Hand Opener"}})<br />
{ "acknowledged" : true, "matchedCount" : 1, "modifiedCount" : 1 }<br />
> db.teamindia.findOne({batting : "Left-Hand Opener"})<br />
null<br />
>□<br />
</code>
</div>
<br />
<h3 style="text-align: left;">
Method : db.collectionname.updateMany();</h3>
Using this method you can update multiple documents in a collection. It also takes multiple parameters as filter criteria. When filter criteria matches with multiple document then it updates the <strong>all matching document</strong> in the collection.<br />
<br />
<div class="progrramers_code">
<code>
> db.teamindia.find({"batting" : "Right-Hand Opener"}).pretty()<br />
{<br />
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f13"),<br />
"name" : "Sikhar Dhawan",<br />
"role" : [<br />
"Batsman"<br />
],<br />
"batting" : "Right-Hand Opener"<br />
}<br />
{<br />
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f14"),<br />
"name" : "Rohit Sharma",<br />
"role" : [<br />
"Batsman",<br />
"Vice Captain"<br />
],<br />
"batting" : "Right-Hand Opener"<br />
}<br />
> db.teamindia.updateMany({"batting" : "Right-Hand Opener"},{$set : <br />
{"batting" : "Left-Hand Opener"}})<br />
{ "acknowledged" : true, "matchedCount" : 2, "modifiedCount" : 2 }<br />
>□<br /><br />
</code>
</div>
<br />
<h3 style="text-align: left;">
Method : db.collectionname.replaceOne();</h3>
With this method your <strong>replace</strong> single document in a collection. It also takes multiple parameters as filter criteria like <strong>db.collectionname.updateOne().</strong> When filter criteria matches with multiple document then it <strong>replaces</strong> the first matching document in the collection.<br />
<br />
<div class="progrramers_code">
<code>
> db.teamindia.find({"name" : "Rohit Sharma"}).pretty()<br />
{<br />
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f14"),<br />
"name" : "Rohit Sharma",<br />
"role" : [<br />
"Batsman",<br />
"Vice Captain"<br />
],<br />
"batting" : "Left-Hand Opener"<br />
}<br />
> db.teamindia.replaceOne({"name" : "Rohit Sharma"},{"name" : "Rohit Kohali",<br />
"batting"<br />
: "Right-Hand Opener","bowling":"Right-Arm Off Breack"})<br />
{ "acknowledged" : true, "matchedCount" : 1, "modifiedCount" : 1 }<br />
>□<br /><br />
</code>
</div>
<br />
<br />
<span style="color: red;"><strong>Note</strong> :</span> All above update methods take special Boolean parameter. If upsert : true then new document will added to collections if no match found with filter criteria or if match found then the existing document will be update.
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<h2 style="text-align: left;">
<strong>MongoDB: Delete Operation </strong></h2>
Delete operations remove documents from a collection. MongoDB provides the following methods to delete documents of a collection.<br />
<ul>
<li>collection.remove(); - Removes single and multiple documents from a collection</li>
<li>collection.deleteOne(); - Removes single document form a collection <strong>(Introduced in MongoDB 3.2)</strong></li>
<li>collection.deleteMany(); - Removes multiple or entire documents form a collection <strong>(Introduced in MongoDB 3.2)</strong></li>
</ul>
In MongoDB, delete operations target a single collection. All write operations in MongoDB are atomic on the level of a single document.<br />
<br />
You can specify criteria, or filters, that identify the documents to remove. These filters use the same syntax as read operations.<br />
<br />
<h3 style="text-align: left;">
<strong>Method: db.collectionname.remove();</strong></h3>
In MongoDB, the db.collection.remove() method removes documents from a collection. You can remove all documents from a collection, remove all documents that match a condition, or limit the operation to remove just a single document.<br />
<br />
<div class="progrramers_code">
<code>
>db.teamindia.remove({"name" : "Rohit Sharma"});<br />
WriteResult({ "nRemoved" : 1 })<br />
>□<br />
</code>
</div>
<br />
<br />
<h3 style="text-align: left;">
Removing Single Document from a collection</h3>
To remove a single document, call the remove() method with the justOne parameter set to true or 1.<br />
<br />
<h3 style="text-align: left;">
<strong>Method: db.collectionname.deleteOne();</strong></h3>
This method deletes the first document that matches the filter. You can use the unique index such as <mark>_id</mark> field for exact match.<br />
<br />
<div class="progrramers_code">
<code>
>db.teamindia.deleteOne({"name" : "Kedar Jadav"});<br />
WriteResult({ "nRemoved" : 1 })<br />
>□<br />
</code>
</div>
<br />
<h3 style="text-align: left;">
<strong>Method: db.collectionname.deleteMany();</strong></h3>
This method deletes the entire documents that match the filter.<br />
<br />
<div class="progrramers_code">
<code>
>db.teamindia.deleteMany({"batting" : "Right-Hand Talender"})<br />
{ "acknowledged" : true, "deletedCount" : 3 }<br />
>□<br />
</code>
</div>
<br /></div>
<a href="https://www.progrramers.com/2019/10/mongodb-tutorial-how-get-lowercase-hexadecimal-string-mongodb-objectid-mongodb-objectid-operations.html" rel="dofollow" target="_blank" title="MongoDB Tutorial : How to get lowercase hexadecimal string from MongoDB ObjectId() – Mongodb Objectid Operations."><strong>MongoDB Tutorial : How to get lowercase hexadecimal string from MongoDB ObjectId() – Mongodb Objectid Operations.</strong></a>
</div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com7tag:blogger.com,1999:blog-3952009654906237808.post-68595348522632095762019-09-02T07:08:00.001-07:002019-10-28T07:18:08.607-07:00How to create horizontal tab window in html using JavaScript and CSS – progrramers<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_count">
Hello <strong>Programmers</strong>! Welcome to brand new episode of HTML, CSS and JavaScript ‘<strong>How To</strong>’ series on <a href="https://www.progrramers.com/" rel="dofollow noopener" target="_blank" title="progrramers : a web school"><strong>progrramers</strong></a>. This post will explain ‘<strong>How to create horizontal tab window in html using JavaScript and CSS</strong>’. I am not a big fan of <a href="https://getbootstrap.com/" rel="nofollow noopener" target="_blank" title="Bootstrap"><strong>Bootstrap</strong> </a>and <a href="https://jquery.com/" rel="nofollow noopener" target="_blank" title="jQuery"><strong>jQuery</strong> </a>therefore I’ll create the Horizontal Tabs with navigation bar using pure CSS and JavaScript.<br />
<div class="separator" style="clear: both; display: none; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCvYgIfVWMtIhgB3VNvfOiQM5IC_oR1QaPwY9w9f1dzDEQt1Wq11aYrLRKi-auMx8Ttcgpsczc36E2xs4GoJQRni8JhumosS0LTbUq5qQKo3NboKe58XGOJw8e_Tt1l6jkFFEa60DdQs/s1600/How+to+create+horizontal+tab+window+in+html+using+JavaScript+and+CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create horizontal tab window in html using JavaScript and CSS – progrramers" border="0" data-original-height="628" data-original-width="1200" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCvYgIfVWMtIhgB3VNvfOiQM5IC_oR1QaPwY9w9f1dzDEQt1Wq11aYrLRKi-auMx8Ttcgpsczc36E2xs4GoJQRni8JhumosS0LTbUq5qQKo3NboKe58XGOJw8e_Tt1l6jkFFEa60DdQs/s320/How+to+create+horizontal+tab+window+in+html+using+JavaScript+and+CSS.jpg" title="How to create horizontal tab window in html using JavaScript and CSS – progrramers" width="320" /></a></div>
<br />
First of all, you can click on <strong>Try yourself</strong> button in below example and check what are we going to create and after that you will find all the require source code of this project. You can also bookmark the repository of <a href="https://github.com/progrramers" rel="noopener" target="_blank" title="progrramers GitHub Community"><strong>progrramers GitHub community</strong></a> where you can find and download the source code of other projects.<br />
If you like our posts please give <strong>thumbs up</strong> <span style="color: blue; font-size: 28px;">👍</span> on our Facebook page and also share with your near n dears.<br />
<div style="display: block;">
<div id="fb-root">
</div>
<script async="" crossorigin="anonymous" defer="" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v4.0&appId=134223867260407&autoLogAppEvents=1"></script>
<br />
<div class="fb-like" data-action="recommend" data-href="https://developers.facebook.com/theprogrramers" data-layout="button_count" data-show-faces="true" data-size="large" data-width="">
</div>
</div>
<br />
<div style="display: block;">
</div>
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
How to create horizontal tab window in html using pure JavaScript and CSS :</div>
<div class="prr_div_2">
<pre><code class="html">
<div class="navbar">
<ul>
<li><a href="#" tab-name="tab-1" class="tab-link">Tab-1</a></li>
<li><a href="#" tab-name="tab-2" class="tab-link">Tab-2</a></li>
<li><a href="#" tab-name="tab-3" class="tab-link">Tab-3</a></li>
<li><a href="#" tab-name="tab-4" class="tab-link">Tab-4</a></li>
<li><a href="#" tab-name="tab-5" class="tab-link">Tab-5</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab tab-1"></div>
<div class="tab tab-2 hide"></div>
<div class="tab tab-3 hide"></div>
<div class="tab tab-4 hide"></div>
<div class="tab tab-5 hide"></div>
</div>
</code></pre>
</div>
<a class="prr_link" href="https://www.progrramers.com/p/how-to-create-horizontal-tab-window-in.html" rel="dofollow" target="_blank" title="How to create tab window in html using JavaScript and CSS – progrramers example">Try Yourself</a>
</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<br />
So let’s start<br />
<h2>
HTML Explanation</h2>
Below is the HTML code that has to be defined in your code that create the DOM of navbar links and the blocks of contents (tab elements). When the links are click then only adjacent <mark> <DIV> </mark> will display on browser and all other DIVs will be remain hidden. Please create an HTML file named <code>‘index.html’ </code>and paste the below codes into it and save.<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
HTML Codes</div>
<div class="prr_div_2">
<pre><code class="html">
<!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>How to create tab window in html using JavaScript and CSS – progrramers</title>
<style>
/*-----Paste CSS Code Here----------*/
</style>
</head>
<body>
<div class="header">
<h1>How to create tab window in html using JavaScript and CSS – progrramers</h1>
</div>
<div class="navbar">
<ul>
<li><a href="#" tab-name="tab-1" class="tab-link">Tab-1</a></li>
<li><a href="#" tab-name="tab-2" class="tab-link">Tab-2</a></li>
<li><a href="#" tab-name="tab-3" class="tab-link">Tab-3</a></li>
<li><a href="#" tab-name="tab-4" class="tab-link">Tab-4</a></li>
<li><a href="#" tab-name="tab-5" class="tab-link">Tab-5</a></li>
</ul>
</div>
<div class="tab-content">
</div>
<div class="tab tab-2 hide"></div>
<div class="tab tab-3 hide"></div>
<div class="tab tab-4 hide"></div>
<div class="tab tab-5 hide"></div>
</div>
<script>
//JavaScript Codes Goes Here
</script>
</body>
</html>
</code></pre>
</div>
</div>
<br />
<h2>
CSS Explanation</h2>
CSS will draw every elements as you desire. These codes should be placed between style tags into the head section.<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
CSS Codes</div>
<div class="prr_div_2">
<pre><code class="css">
*{box-sizing:border-box}
body{margin:0;padding: 0;font-family: Verdana, sans-serif}
/*---Navbar CSS Starts----*/
.header{background-color: #fafafa;color:#434343}
.header h1{margin:0;padding: 0;}
.navbar{background-color: #0056c7;}
.navbar ul{margin:0;list-style-type: none;overflow: hidden;}
.navbar ul li{float:left}
.navbar a{color:#ffffff;text-decoration: none;display:inline-block;padding:14px 18px;transition: all .3s ease-in-out}
.navbar a:hover{background-color: #ffffff;color:#0056c7}
/*---Navbar CSS Ends----*/
.tab-content{min-height:380px;border:5px solid #0056c7;border-top:0;position: relative;overflow: auto;}
.tab-content div{margin-left:53px;min-height: 380px;position: absolute}
.hide{display: none;}
</code></pre>
</div>
</div>
<br />
<code>.hide class</code> is predefined CSS class to hide the elements <b>dynamically</b><br />
<h2>
JavaScript Explanation</h2>
JavaScript code will fire the functions to <strong>hide</strong> and <strong>unhide</strong> the content-tabs when you click on navbar links. Here one thing also is to be mark that don’t get confused with ‘$’ it not a jQuery function variable. This is self defined function which is stored in ‘$’ variable which target the HTML elements using the CSS kind of selector.<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
JavaScript Codes</div>
<div class="prr_div_2">
<pre><code class="js">
var $ = function(_){return document.querySelectorAll(_)}; //donot confuse, this is not jQuery...
for(var i=0;i<$('.tab-link').length;i++){
$('.tab-link')[i].onclick = function(){
// alert(this.getAttribute("tab-name"));
$('.tab-content>.tab').forEach(element => {
element.classList.add("hide");
});
$('.'+this.getAttribute("tab-name"))[0].classList.remove('hide');
}
}
</code></pre>
</div>
</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<strong>Code Explanation</strong><br />
<strong><br /></strong>
<br />
<div>
<div>
<code>$ = function(_){return document.querySelectorAll(_)};</code> This function expression is defined the <strong><mark>'$'</mark></strong> varialbe which is used to target HTML DOMs.<br />
<br /></div>
<div>
</div>
<div>
<code>for(var i=0;i<$('.tab-link').length;i++) </code> loop query the length(count) of navbar links <strong><mark>'.tab-link'</mark></strong> and set the event function on it by looping itself on load.<br />
<br /></div>
<div>
</div>
<div>
<code>forEach</code> function loops the content <DIV> elements add the '.hide' class on each '<div class="tab tab-1">' So that every <DIV> elements become invisible.<br />
<br /></div>
<div>
</div>
<div>
<code>$('.'+this.getAttribute("tab-name"))[0].classList.remove('hide'); </code>this code fetch the value from tab-name attribute which is becomes a class selector of <mark><DIV></mark> elements and finally which class is matched that <mark><DIV></mark> become visible.<br />
<br /></div>
<div>
</div>
<div>
Hoping this post will usefull for you guys. Keep following <a href="https://www.progrramers.com/" rel="noopener" target="_blank" title="progrramers : a web school"><strong>progrramers : a web school</strong></a> and get latest updates. </div>
</div>
</div>
<strong><u>Related Topics</u></strong><br />
<br />
<div class="related-protopics" lang-name="howto"></div>
</div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com5tag:blogger.com,1999:blog-3952009654906237808.post-18093551486463385162019-08-29T20:21:00.004-07:002022-04-30T09:57:18.937-07:00Framework7 Tutorial : What is Framework7 ? - Progrramers Explained<div dir="ltr" style="text-align: left;">
<div class="custom_count">
<h2><strong>What is Framework7?</strong></h2>
<strong>Framework7</strong> is ready to use an <strong>open-source framework</strong> that is used to develop <strong>Web, Mobile (Android & IOS), and Desktop Applications</strong> with screen-oriented native looks and hybrid functionality. It has its own predefined JavaScript library designed to simplify <strong>HTML DOM</strong> tree traversal and manipulation, as well as event handling, <strong>CSS animation</strong>, and <strong>Ajax.</strong><br /><strong><br /></strong> <br />
<table class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="text-align: center;"><a style="margin-left: auto; margin-right: auto;" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiagelN7WomgKl-A2dBKXEF1UBHBHG4rp0XDD_kklpJ_0-Ul05-iRglNssalidDpBkkn5nurbllaTNcME8jwzLrvZkLdMRBanYhWJ78F7JroJtWZaTcsWcdBXf-2o16-_Kr6bF5BurMH6g/s1600/Framework7+Tutorial+-+Introduction+-progrramers.com.jpg"><img title="Framework7 Tutorial : What is Framework7 ? - Progrramers Explained" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiagelN7WomgKl-A2dBKXEF1UBHBHG4rp0XDD_kklpJ_0-Ul05-iRglNssalidDpBkkn5nurbllaTNcME8jwzLrvZkLdMRBanYhWJ78F7JroJtWZaTcsWcdBXf-2o16-_Kr6bF5BurMH6g/s640/Framework7+Tutorial+-+Introduction+-progrramers.com.jpg" alt="Framework7 Tutorial - Introduction - progrramers.com" width="640" height="360" border="0" data-original-height="900" data-original-width="1600" /></a></td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">Framework7 Tutorial - Introduction -progrramers.com</td>
</tr>
</tbody>
</table>
<div class="separator" style="clear: both; text-align: center;"> </div>
<strong><br /></strong> <strong><br /></strong> <strong>Framework7</strong> is the most flexible open-source framework that contains an in-built <strong>Model-View-Controller</strong> and can be used with almost any tools that you love to work with. It doesn’t force you to use anything except plain <strong>HTML, CSS, and JavaScript</strong>. Creating apps with Framework7 is easy as creating a website.<br /><br />Additionally, Framework7 comes with <strong>Vue.js</strong> & <strong>React</strong> components to bring <strong>components-syntax</strong>, structured data, and data bindings with the power and simplicity of <strong>Vue.js</strong> & <strong>React</strong>.<br />
<h3><strong>PWA: Progressive Web Apps</strong></h3>
<strong>Progressive web apps</strong> for desktops can be <strong>'installed'</strong> on the user's device much like native apps. They are fast. Feel integrated because they launched in the same way as other apps, and run in an app window, without an address bar or tabs.<br />
<h3><strong>Cordova: Android</strong></h3>
<strong>Cordova Android</strong> is an Android application library that allows for Cordova-based projects to be built for the Android Platform. Cordova-based applications are, at the core, applications written with web technology: HTML, CSS, and JavaScript. Apache Cordova is a project of The Apache Software Foundation (ASF).<br />
<h3><strong>Electron: Desktop Apps</strong></h3>
<strong>Electron</strong> is an open-source framework developed and maintained by GitHub. Electron allows for the development of desktop GUI applications using web technologies: It combines the Chromium rendering engine and the Node.js runtime.<br /><br />Framework7 paired with extra tools like <strong>PWA, Cordova, Electron, </strong>and<strong> NW.js</strong> allows for building native desktop apps and mobile apps with the native look and feel.<br />
<h3><strong>Framework7: Licensing</strong></h3>
Framework7 is an <strong>MIT-licensed open source project</strong> with its ongoing development made possible entirely by the support of sponsors and these awesome backers.</div>
<h3>Integration with Back End Frameworks</h3>
<p>Framework7 is a <strong>Front-End Framework</strong> but it also can be integrated with Back End Frameworks like <strong>Laravel</strong>. For web & mobile application development simultaneously Framework7 also can be used with Laravel. Laravel provides the mechanism to integrate Frameworks7. Laravel is a <strong>Back End</strong> (Server Side) development framework that comes with a stunning set of predefined tools, functions, and resources to build robust <strong>PHP applications</strong>. To explore more about Laravel you can also read <a title="What is Laravel?" href="/2022/04/what-is-laravel-framework.html">What is Laravel?</a></p>
<table class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="text-align: center;"><a style="margin-left: auto; margin-right: auto;" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLcaOXrJlc8z0ch7S1hHIHqH1yO7rTqA5tPbhzaaf8x60bxCxvGMv7iIYsIJPCgvNIU4Ddq2Vr2UeZ3bPezXUA_2VF-SEsG6RnUSS7UmqUOE0q83mfa7hf-bpsjH1Y_TnzmCpezUNrbY/s1600/Framework7+Tutorial+-+Tips+progrramers.com.png"><img title="Framework7 Tutorial : What is Framework7 ? - Progrramers Explained" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLcaOXrJlc8z0ch7S1hHIHqH1yO7rTqA5tPbhzaaf8x60bxCxvGMv7iIYsIJPCgvNIU4Ddq2Vr2UeZ3bPezXUA_2VF-SEsG6RnUSS7UmqUOE0q83mfa7hf-bpsjH1Y_TnzmCpezUNrbY/s640/Framework7+Tutorial+-+Tips+progrramers.com.png" alt="Framework7 Tutorial - Tips progrramers.com" width="640" height="360" border="0" data-original-height="350" data-original-width="620" /></a></td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">Framework7 Tutorial - Tips progrramers.com</td>
</tr>
</tbody>
</table>
<br /><br /><ins class="adsbygoogle" style="display: block; text-align: center;" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138"></ins>
<h2><strong>What we do in this tutorial: Progrramers</strong></h2>
In this tutorial, we learn How to work with framework7 to build web applications. Framework7 comes with a stunning set of ready to use <strong>UI modules</strong> like <strong>dialogs, popup, popover, action sheet, FAB, list views, smart select view, tabs, slider tabs, swipers, side panels, layout grid, preloaders, form elements, cards, expendable cards</strong> and many many more. We will learn how to work with these modules to create a sensational web application.<br /><br />Framework7 has a vast ecosystem along with an exclusive community forum and support. <a href="https://www.progrramers.com"><strong>progrramers.com</strong></a> searches for every possible solution for those problems which occur during the app production with framework7. Stay connected with us we'll see you soon ...</div>Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com0tag:blogger.com,1999:blog-3952009654906237808.post-17230283538066530562019-08-29T11:57:00.000-07:002019-09-24T19:51:51.814-07:00Why EventListeners don’t work on Dynamic HTML DOM? - progrramers explanation <div dir="ltr" style="text-align: left;" trbidi="on">
<h2>
<strong>What is HTML DOM?</strong></h2>
When a web page is loaded, the browser creates a <strong>Document Object Model </strong>of the page.<br />
The Document Object Model (<strong>DOM</strong>) is a programming <strong>API</strong> for <strong>HTML </strong>and <strong>XML documents</strong>. It defines the logical structure of documents and the way a document is accessed and manipulated.<br />
The HTML DOM is a standard object model and programming interface for HTML. It defines:<br />
<ul>
<li><strong>The HTML elements as objects</strong></li>
<li><strong>The properties of all HTML elements</strong></li>
<li><strong>The methods to access all HTML elements</strong></li>
<li><strong>The events for all HTML elements</strong></li>
</ul>
<div class="separator" style="clear: both; display: none; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMYePdU0xFW46Q9G-l-mAlLRxkhDnU3ZVLvPpKWbDckE5XyKs-bButZHGhPuey7okREQ11QHity6_vctTtW79LSg_YYBOj9BbT9W3WVFhZs149wZEquCKNpHhCJLSJVbkE2BzyNiSlEs8/s1600/Why+EventListeners+don%25E2%2580%2599t+work+with.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1200" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMYePdU0xFW46Q9G-l-mAlLRxkhDnU3ZVLvPpKWbDckE5XyKs-bButZHGhPuey7okREQ11QHity6_vctTtW79LSg_YYBOj9BbT9W3WVFhZs149wZEquCKNpHhCJLSJVbkE2BzyNiSlEs8/s320/Why+EventListeners+don%25E2%2580%2599t+work+with.JPG" width="320" /></a></div>
<h2>
<strong><br /></strong></h2>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD-yx-kakUMFFALT7epURbHZ-cpjD1CxMtocN86Ho5WURWzrjWjVUqGZmPivIzuAORDI1WyOvBe1eQ-FnUQOnH_mID9aKrGGX2VOPNyXELPyZFPPmuLhQLRN968RdbTsg9pBNloCgLB_c/s1600/What+is+HTML+DOM+-+progrramers+exlained.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="What is HTML DOM - progrramers exlained" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD-yx-kakUMFFALT7epURbHZ-cpjD1CxMtocN86Ho5WURWzrjWjVUqGZmPivIzuAORDI1WyOvBe1eQ-FnUQOnH_mID9aKrGGX2VOPNyXELPyZFPPmuLhQLRN968RdbTsg9pBNloCgLB_c/s640/What+is+HTML+DOM+-+progrramers+exlained.jpg" title="Why EventListeners don’t work on Dynamic HTML DOM? - progrramers explanation" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">HTML DOM TREE STRUCTURE</td></tr>
</tbody></table>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<h2>
<strong>What is HTML DOM Event?</strong></h2>
<strong>HTML DOM Events</strong> allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZtrJhO-7yOhmG_HsZkly2LLPQgkGPr2sLcnz3OYIad3XEdv-M-tqHX8FM9o0CzRhym8wZbFne8Vxfswlj2aPUaEw7S7Ud6hJOg77rEC8V1AGJ0SnDyspMZDpgHH9YhqhRg8xp5ogcTs/s1600/What+is+HTML+DOM+Event+-+progrramers+explained.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="What is HTML DOM Event? Explanation Image" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZtrJhO-7yOhmG_HsZkly2LLPQgkGPr2sLcnz3OYIad3XEdv-M-tqHX8FM9o0CzRhym8wZbFne8Vxfswlj2aPUaEw7S7Ud6hJOg77rEC8V1AGJ0SnDyspMZDpgHH9YhqhRg8xp5ogcTs/s640/What+is+HTML+DOM+Event+-+progrramers+explained.jpg" title="Why EventListeners don’t work on Dynamic HTML DOM? - progrramers explanation " width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">HTML DOM Event</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<h2>
<strong>What is an EventListener?</strong></h2>
An event listener is a <strong>procedure </strong>or <strong>function </strong>in a computer program that waits for an event to occur. For examples - the user clicking or moving the mouse, pressing a key on the keyboard, or an internal timer or interrupt are events.<br />
<h2>
<strong>What is Dynamic HTML DOM?</strong></h2>
An HTML DOM or DOM tree created with the combination of HTML and JavaScript after page loaded is referred as Dynamic HTML DOM. Dynamic HTML can be created after when the client side scripting language event occurred. For example – <strong>document.createElement(TAGNAME)</strong>;<br />
<h2>
<strong>What is Event delegation?</strong></h2>
Event delegation is the process of handling events at a higher level in the DOM that where they were first triggered, thanks to behavior known as <strong>Bubbling</strong>. For example - when an element on the page is, clicked, then a click event is fired on that element but it doesn’t stop there. The click event “<strong>bubbles up</strong>” the DOM tree, triggering the click events on any of the originally clicked element’s parents that are listening for one.<br />
<h2>
<strong>What is bubbling?</strong></h2>
When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors. The process is called “<strong>bubbling</strong>”, because events “<strong>bubble</strong>” from the inner element up through parents like a bubble in the water.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin5kFh_V9dhEckgkgPO-HmdYyAPTSEtTvgp0duUWcYYzllUjv9Xj_3sIsApxZ5DO0rMSlDoS3WNf15mp3ljs3o4pLBKTVyniHCikVRI2BO5zuYAnes7CSyiDrEVUMRUSsCu7h0I4dOTCc/s1600/What+is+bubbling.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="What is bubbling" border="0" data-original-height="560" data-original-width="520" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin5kFh_V9dhEckgkgPO-HmdYyAPTSEtTvgp0duUWcYYzllUjv9Xj_3sIsApxZ5DO0rMSlDoS3WNf15mp3ljs3o4pLBKTVyniHCikVRI2BO5zuYAnes7CSyiDrEVUMRUSsCu7h0I4dOTCc/s640/What+is+bubbling.png" title="Why EventListeners don’t work on Dynamic HTML DOM? - progrramers explanation " width="594" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-size: x-small;"><span style="text-align: left;">HTML DOM Event : </span><span style="background-color: white; color: #6a6a6a; font-family: arial, sans-serif; text-align: left;">Image courtesy W3.org</span></span></td></tr>
</tbody></table>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Above image describe the three phase of HTML DOM Event:<br />
<ul>
<li><strong>Capturing</strong> – The event goes down to the element (very rare use)</li>
<li><strong>Target</strong> – The event reach the target element</li>
<li><strong>Bubbling</strong> – The event bubbles up from the element</li>
</ul>
<br />
<h2>
<strong>Why EventListeners don’t work on Dynamic HTML DOM?</strong></h2>
<strong>HTML DOMs created dynamically</strong> don’t have its own Event Handlers because they aren’t static part of the DOM tree hence simple <strong>EventListeners </strong>cannot target it to fire the function but they are part of the loaded document, therefore to handle the events, we have to use Event <strong>Delegation</strong> to the HTML Elements appended dynamically.<br />
Next post will elaborate “<strong>How to Create Event Listeners for Dynamic</strong> <strong>HTML DOM?”<br/><br/></strong>
<strong><u>Related Topics</u></strong><br/><br/>
<div class="related-protopics" lang-name="html"></div>
</div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com3tag:blogger.com,1999:blog-3952009654906237808.post-33821668319514898662019-08-27T14:36:00.002-07:002022-04-30T21:35:28.501-07:00How to create HTML DOM Input type date ‘min’ and ‘max’ restriction using JavaScript? – Progrramers pro example<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_count">
<strong>Hello Programmers</strong>! This post will elaborate <strong>how to create ‘min’ and ‘max’ date restriction to HTML DOM Input type date</strong>. Today every small and large company requires <strong>web applications</strong> to maintain their Customers, Products and Accounts etc. These types of application generally include date restriction.<br />
<br />
<div class="separator" style="clear: both; text-align: center;display:none">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioYct0flv518b-eHUfCwB6sr1QQFUx34yAdQ5kfaZ4XdMKue2L8OxuqmMRxjLhpoG6wO-hK5K-yPMIfxdq8tBjb-Fy2GSXcoyAdJlbj43pEMoUvktG8voComuRa0R2czJTi2hAgCb2PT4/s1600/How-to-create-HTML-DOM-Inpu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to create HTML DOM Input type date ‘min’ and ‘max’ restriction using JavaScript? – progrramers pro examples" border="0" data-original-height="420" data-original-width="550" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioYct0flv518b-eHUfCwB6sr1QQFUx34yAdQ5kfaZ4XdMKue2L8OxuqmMRxjLhpoG6wO-hK5K-yPMIfxdq8tBjb-Fy2GSXcoyAdJlbj43pEMoUvktG8voComuRa0R2czJTi2hAgCb2PT4/s320/How-to-create-HTML-DOM-Inpu.jpg" title="How to create HTML DOM Input type date ‘min’ and ‘max’ restriction using JavaScript? – progrramers pro examples" width="320" /></a></div>
<br />
<br />
Suppose you have a product warranty management system and the product comes with 15 months warranty from date of product manufacture and 12 months from date of product sale. To maintain the warranty on that product you have to specify min and max warranty date criteria on the product management application.<br />
<br />
This post will show you step by step that ‘<strong>How to create HTML DOM Input type date ‘min’ and ‘max’ restriction using JavaScript?</strong>’<br />
<br />
Look at the below given example :<br />
<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
Simple example of date restriction in HTML Input type date :</div>
<div class="prr_div_2">
<pre><code class="html">
<input type="date" id="date" value="2019-08-21" min="2019-08-21" max="2019-08-28" />
</code></pre>
</div>
<a class="prr_link" href="https://www.progrramers.com/p/how-to-create-html-dom-input-type-date_93.html" rel="dofollow" target="_blank">Try Yourself</a>
</div>
<br />
<br />
<br />
Above example is a simple html code which describe how <strong>min</strong> and <strong>max</strong> attribute is use to create the date restriction. This code specified here to understand that how the date restrictions work.<br />
Now you go through another example given below this example explains How to set <strong>min attribute value</strong> to restrict past date using <strong>JavaScript</strong> in the beginner mode.<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
Dynemic minimum date restriction using JavaScript :</div>
<div class="prr_div_2">
<pre><code class="js">
var n = new Date(); //date constructor
var y = n.getFullYear(); //current full year
var m = n.getMonth()+1; //current month
var d = n.getDate(); //current day
//padStart fix length of sting as per requirement, for e.g. when month = 8 then month become 08
var today = y.toString().padStart(4, 0)+"-"+m.toString().padStart(2, 0)+"-"+d.toString().padStart(2, 0); //current date
var elem = document.getElementById("date"); //HTML DOM input type date
function restric(e){
e.value = today;
e.setAttribute("min",today);
}
restric(elem); //function called
</code></pre>
</div>
<a class="prr_link" href="https://www.progrramers.com/p/how-to-create-html-dom-input-type-date_48.html" rel="dofollow" target="_blank">Try Yourself</a>
</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
Above example sets only <strong>min attribute</strong> while another example given below sets both <strong>min</strong> and <strong>max attribute</strong> using JavaScript function. This example creates two variable ‘<strong>today</strong>’ and ‘<strong>maxday</strong>’ that provides the value for min and max attribute respectively.<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
Dynemic minimum date restriction using JavaScript :</div>
<div class="prr_div_2">
<pre><code class="js">
//get today
var n = new Date();
var y = n.getFullYear();
var m = n.getMonth()+1;
var d = n.getDate();
var today = y.toString().padStart(4, 0)+"-"+m.toString().padStart(2, 0)+"-"+d.toString().padStart(2, 0);
//get max day
var days = 7; //change the number of day that how many maximum days you want to restrict
var m = new Date(n.getTime() + (days * 24 * 60 * 60 * 1000));
var ymax = m.getFullYear();
var mmax = m.getMonth()+1;;
var dmax = m.getDate();
var maxday = ymax.toString().padStart(4, 0)+"-"+mmax.toString().padStart(2, 0)+"-"+dmax.toString().padStart(2, 0);
var elem = document.getElementById("date");
function restric(e){
e.value = today;
e.setAttribute("min",today);
e.setAttribute("max",maxday);
}restric(elem);
</code></pre>
</div>
<a class="prr_link" href="https://www.progrramers.com/p/how-to-create-html-dom-input-type-date_18.html" rel="dofollow" target="_blank">Try Yourself</a>
</div>
<br />
<br />
Also check the below example where min, max and current date is returned through a function called mydate(e) where ‘e’ is <strong>parameter</strong> referred as number of days. For e.g. if you want min date 7 days before and max date 7 days after from current then you simply set <strong>setAttribute(‘min’, mydate(-7))</strong> and <strong>setAttribute(‘max’, mydate(7))</strong> while calling JavaScript function <strong>restrict()</strong>.<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
Dynemic minimum date restriction using JavaScript :</div>
<div class="prr_div_2">
<pre><code class="js">
//don't confuse it is not jQuery:
var $ = function(_){return document.querySelectorAll(_)};
function myDate(e){
var n = new Date();
var t = new Date(n.getTime() + (e * 24 * 60 * 60 * 1000)); //get time in milisecond
var y = t.getFullYear();
var m = t.getMonth()+1;;
var d = t.getDate();
var date = y.toString().padStart(4, 0)+"-"+m.toString().padStart(2, 0)+"-"+d.toString().padStart(2, 0);
return date;
}
function restric(){
$("#date")[0].setAttribute("min",myDate(-7));
$("#date")[0].setAttribute("value",myDate(0));
$("#date")[0].setAttribute("max",myDate(7));
}restric();
</code></pre>
</div>
<a class="prr_link" href="https://www.progrramers.com/p/how-to-create-html-dom-input-type-date_27.html" rel="dofollow" target="_blank">Try Yourself</a>
</div>
<br />
<br />
<h2>
Pro example with <strong>explanation </strong></h2>
Finally coming on conclusion of this post let’s check one last example where date is returned through a function similarly above example, ‘<strong>r</strong>’ is an object which can suppose to be a server response which contains min, max and current date values. <strong>restric</strong>() function loops though ‘<strong>r</strong>’ object and set the min, max and current values to HTML DOM input.<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
Dynemic minimum and maximum date restriction using JavaScript - pro version coding</div>
<div class="prr_div_2">
<pre><code class="js">
//don't confuse it is not jQuery:
var $$ = function(_){return document.querySelectorAll(_)};
/* 'r' object can be parse as server response, for e.g. : e-commerce site maintain warranty one year from date of products sale.
minium and maximun can be set as product warranty period from date of sale*/
var r = [{name:"min", value:myDate(-3)},{name:"value",value:myDate(0)},{name:"max",value:myDate(3)}];
function myDate(e){
var n = new Date();
var t = new Date(n.getTime() + (e * 24 * 60 * 60 * 1000)); //get time in milisecond
var y = t.getFullYear();
var m = t.getMonth()+1;;
var d = t.getDate();
var date = y.toString().padStart(4, 0)+"-"+m.toString().padStart(2, 0)+"-"+d.toString().padStart(2, 0);
return date;
}
//creating a function to set Attribute to HTML DOM input
function restric(){
//forEach loop for sertting attribute min, value and max value on HTML DOM input
r.forEach(function(key) {
//target the DOM with QuerySeletorAll using DOM 'id'.
$$('#date')[0].setAttribute(key.name, key.value);
});
}restric(); //calling restric function on load
//when HTML DOM get changed then function will be fire it conditions hmatched.
$$('#date')[0].onchange = function(){
if(this.value < r[0].value || this.value > r[2].value){
this.value=r[1].value;
alert("This is invalid date selection. Please select the date between "+ r[0].value + " to "+ r[2].value);
}else{
if(this.getAttribute("min")==undefined ||this.getAttribute("min")==undefined){
alert("Correct Date Selected");
}
}
}
</code></pre>
</div>
<a class="prr_link" href="https://www.progrramers.com/p/how-to-create-html-dom-input-type-date.html" rel="dofollow" target="_blank">Try Yourself</a>
</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
onchange <strong>EventListener</strong> function expression declared for security purpose if someone delete the min and max attributes from element inspect module then this function <strong>expression</strong> will restrict the users to make invalid log in.<br />
<br />
Hoping this post will clear the whole concept of date restriction. If there is any problem then please write down in the comments and share your problem with us, It’ll will a pleasure to help you.
</div>
<strong><u>Related Topics</u></strong><br />
<br />
<!--div class="related-protopics" lang-name="howto"></div-->
<div class="related-protopics"><a title="JavaScript How To : How To Create Cascading Dropdown Using Plain JS - Progrramers explained" href="https://www.progrramers.com/2019/10/javascript-how-to-how-create-cascading-dropdown-using-plain-js-progrramers.html" target="_blank" rel="noopener dofollow">How To Create Cascading Dropdown Using Plain JS</a><br><a title="MongoDB Tutorial : How To Get Lowercase Hexadecimal String From MongoDB ObjectId() – Mongodb Objectid Operationsng Dropdown Using Plain JS - Progrramers explained" href="https://www.progrramers.com/2019/10/mongodb-tutorial-how-get-lowercase-hexadecimal-string-mongodb-objectid-mongodb-objectid-operations.html" target="_blank" rel="noopener dofollow">MongoDB Tutorial : How To Get Lowercase Hexadecimal String From MongoDB ObjectId() – Mongodb Objectid Operations</a><br><a title="JavaScript How To : How To Create Horizontal Tab Window In Html Using JavaScript And CSS - Progrramers explained" href="https://www.progrramers.com/2019/09/how-create-horizontal-tab-window-html-using-pure-javascript-css-progrramers.html" target="_blank" rel="noopener dofollow">How To Create Horizontal Tab Window In Html Using JavaScript And CSS</a><br><a title="JavaScript How To : How To Create HTML DOM Input Type Date ‘Min’ And ‘Max’ Restriction Using JavaScript? - Progrramers explained" href="https://www.progrramers.com/2019/08/how-to-create-html-dom-input-type-date.html" target="_blank" rel="noopener dofollow">How To Create HTML DOM Input Type Date ‘Min’ And ‘Max’ Restriction Using JavaScript?</a><br><a title="JavaScript How To : JavaScript How To : How To Get Javascript Date In Html Input Type=Date Value - Progrramers explained" href="https://www.progrramers.com/2019/08/how-to-get-javascript-date-html-input-type-date-value-progrramers.html" target="_blank" rel="noopener dofollow">JavaScript How To : How To Get Javascript Date In Html Input Type=Date Value</a><br><a title="JavaScript How To : How To Create Animated User Registration From With Validation Using HTML, CSS And JavaScript - Progrramers explained" href="https://www.progrramers.com/2019/06/create-animated-user-registration-from-validation-using-html-css-javascript.html" target="_blank" rel="noopener dofollow">How To Create Animated User Registration From With Validation Using HTML, CSS And JavaScript</a><br><a title="JavaScript How To : How To Create Animated Registration Form Using HTML, CSS & JavaScript - Progrramers explained" href="https://www.progrramers.com/2019/06/how-to-create-animated-registration-form-using-html-css-javascript.html" target="_blank" rel="noopener dofollow">How To Create Animated Registration Form Using HTML, CSS & JavaScript</a>v<a title="JavaScript How To : How To Submit The Multiple Rows Form Data With A Single Submit In PHP - Part 1 - Progrramers explained" href="https://www.progrramers.com/2018/02/how-to-create-multi-row-data-form-php.html" target="_blank" rel="noopener dofollow">How To Submit The Multiple Rows Form Data With A Single Submit In PHP - Part 1</a><br><a title="JavaScript How To : How To Check HTML Elements Are Properly Nested - Progrramers explained" href="https://www.progrramers.com/2017/12/how-to-check-html-elements-are-properly.html" target="_blank" rel="noopener dofollow">How To Check HTML Elements Are Properly Nested</a><br></div>
</div>
<h2>New Tutorial Topic on Progrramers</h2>
<a href="https://www.progrramers.com/2022/04/what-is-laravel-framework.html">Laravel Tutorial : What Is Laravel?</a>Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com2tag:blogger.com,1999:blog-3952009654906237808.post-90764069495270911762019-08-25T23:11:00.000-07:002019-10-22T13:13:07.141-07:00JavaScript How To : How to get javascript date in html input type=date value - progrramers<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_count">
Hello Programmers! This JavaScript tutorial will elaborate "<strong>How to get JavaScript Date in input type='date' element?</strong>".<br />
<br />
Sometimes beginners programmers face this general problem while creating dynamic web applications. When we try to fetch JavaScript Date value in HTML DOM <code><input type="date"></code> it doesn't set the date.<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
Set a date value for date field:</div>
<div class="prr_div_2">
<pre><code class="js">
document.getElementByID("demo_date").value = "2019-08-20";
</code></pre>
</div>
<a class="prr_link" href="https://www.progrramers.com/p/javascript-how-to-how-to-get-javascript.html" rel="dofollow" target="_blank">Try Yourself</a>
</div>
<br />
<strong>Above example return the result</strong><br />
<br />
<div style="background: #f1f1f1; border-left: 5px solid #339966; display: flex; padding: 50px 0px;">
<input id="displaydate" style="border: 2px solid #545454; padding: 5px; width: 350px;" type="date" value="2019-08-20" />
</div>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
In the above example a date string is set to HTML <code>input type=”date”</code> value very easily but when working with JavaScript date constructor <strong>‘new Date()’</strong>, it create problems. We have various solutions for this problem. You can try this one :
<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
Set a date value for date field:</div>
<div class="prr_div_2">
<pre><code class="js">
today = year.toString().padStart(4, '0')+'-'+month.toString().padStart(2, '0')+'-'+day.toString().padStart(2, '0');
</code></pre>
</div>
<a class="prr_link" href="https://www.progrramers.com/p/javascript-how-to-how-to-get-javascript_26.html" rel="dofollow" target="_blank">Try Yourself</a>
</div>
<br/>
<strong>Another solution using 'toISOString()' method.</strong>
<br/>
In below given example we have used JavaScript toISOString() method with a little trick. toISOString() method returns the International Standard time. Local-time may be different from other time standard. To rectify this problem we have find the time difference between UTC and local-time using 'getTimezoneOffset()' method, converted into milliseconds and added to the local-time. After that we have converted the time to ISOString() and extracted the date using substr(0, 10) method.
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_3">
Set a date value for date field:</div>
<div class="prr_div_2">
<pre><code class="js">
var d = new Date().getTimezoneOffset();
var date = new Date(new Date().getTime() - d * 60 * 1000);
document.querySelector('[name=date]').value=date.toISOString().substr(0, 10);
</code></pre>
</div>
<!--a class="prr_link" href="https://www.progrramers.com/p/javascript-how-to-how-to-get-javascript_26.html" rel="dofollow" target="_blank">Try Yourself</a-->
</div>
<div class="separator" style="clear: both; text-align: center;display:none">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7r-shGhVEq3-Pt4j-n68CIHx1196szzAyGKN-HW3q-iTOcjc1XAzG156q46bxex3rzlyVXyK9sAxvvXD9bMEk_fcSeSeeVxTu2Zc5v4RuGh4looHIjJcJHxjoRbgzrXRkJW_0ymHd8Ng/s1600/JavaScript+How+To+Get+Javascript+Date+In+Html+Input+Type%253DDate+Value+-+Progrramers.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="JavaScript How To : How To Get Javascript Date In Html Input Type=Date Value - Progrramers" border="0" data-original-height="420" data-original-width="550" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7r-shGhVEq3-Pt4j-n68CIHx1196szzAyGKN-HW3q-iTOcjc1XAzG156q46bxex3rzlyVXyK9sAxvvXD9bMEk_fcSeSeeVxTu2Zc5v4RuGh4looHIjJcJHxjoRbgzrXRkJW_0ymHd8Ng/s320/JavaScript+How+To+Get+Javascript+Date+In+Html+Input+Type%253DDate+Value+-+Progrramers.jpg" title="JavaScript How To : How To Get Javascript Date In Html Input Type=Date Value - Progrramers" width="320" /></a></div>
<br /></div>
</div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com1tag:blogger.com,1999:blog-3952009654906237808.post-76944563584260064322019-08-25T12:11:00.000-07:002019-08-25T12:51:01.206-07:00MongoDB Tutorial : How to create/remove collection using MongoDB Shell? - Progrramers<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_count">
Hello Programmers! In previous chapter we have seen How to <strong>create/remove database </strong>using <strong>MongoDB shell, </strong>in this chapter will see <strong>How to create/remove collection using MongoDB Shell? </strong>But before we go ahead we should know that what the MongoDB collections are? <br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAzvR6kTypT7lsqLUFQXOQavP4izb4G0hIQPVsFI-6QlYkKT6OQzqA4dL8LIxWMsDY7Iy_-5oMOPqe781eu-sB0S7sMf1AsvD8Ptc6nqU2U8uYAtdzOEonqSd5Fx54kXZEvixOZNWFUCI/s1600/MongoDB+Tutorials+-+how+to+create-remove+collections+using+MongoDB+shell.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="MongoDB Tutorials - How to create-remove collections using MongoDB shell" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAzvR6kTypT7lsqLUFQXOQavP4izb4G0hIQPVsFI-6QlYkKT6OQzqA4dL8LIxWMsDY7Iy_-5oMOPqe781eu-sB0S7sMf1AsvD8Ptc6nqU2U8uYAtdzOEonqSd5Fx54kXZEvixOZNWFUCI/s640/MongoDB+Tutorials+-+how+to+create-remove+collections+using+MongoDB+shell.jpg" title="MongoDB Tutorial : How to create/remove collection using MongoDB Shell? - Progrramers" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">MongoDB Tutorial : How to create/remove collection using MongoDB Shell? - Progrramers</td></tr>
</tbody></table>
<br />
<h2>
What is MongoDB Collections?</h2>
A group to <strong>MongoDB</strong> documents can be referred as a <strong>collection</strong>. A collection is the equivalent of an <strong>RDBMS</strong> table. A collection exists within a single database. Collections do not enforce a schema. Documents within a collection can have different fields. Data in MongoDB can have different schema documents in the same collection.<br />
<br/>
<div class="progrramers_code">
<code>
> db.teamindia.find().toArray()<br/>
[<br/>
{<br/>
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f13"),<br/>
"name" : "Sikhar Dhawan",<br/>
"role" : [<br/>
"Batsman"<br/>
],<br/>
"batting" : "Left-Hand Opener"<br/>
},<br/>
{<br/>
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f14"),<br/>
"name" : "Rohit Sharma",<br/>
"role" : [<br/>
"Batsman",<br/>
"Vice Captain"<br/>
],<br/>
"batting" : "Right-Hand Opener"<br/>
},<br/>
{<br/>
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f15"),<br/>
"name" : "Kedar Jadav",<br/>
"role" : [<br/>
"Allrounder",<br/>
"Batsman",<br/>
"Bowler"<br/>
],<br/>
"batting" : "Right-Hand Middle-Order",<br/>
"bowling" : "Right-Arm-Slinger-Off-Break"<br/>
},<br/>
{<br/>
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f16"),<br/>
"name" : "Rabindra Jadeja",<br/>
"role" : [<br/>
"Allrounder",<br/>
"Batsman",<br/>
"Bowler"<br/>
],<br/>
"batting" : "Left-Hand Lower-Middle-Order",<br/>
"bowling" : "Left-Arm-Off-Break"<br/>
},<br/>
{<br/>
"_id" : ObjectId("5d5e2e6cd1c0b7eafe211f17"),<br/>
"name" : "Jasprit Bumrah",<br/>
"role" : [<br/>
"Batsman",<br/>
"Bowler"<br/>
],<br/>
"batting" : "Right-Hand Talender",<br/>
"bowling" : "Right-Arm-Fast-Medium"<br/>
}<br/>
]<br/>
><span >□</span><br/>
</code>
</div>
<br />
<h2>
db.createCollection() Method</h2>
<strong>Below is the basic syntax of Create Collection Command:</strong><br />
<br />
<code class="progrramers_syntax">db.createCollection(<name>, <options>);</code> <br />
db.createCollection() method take two parameters:<br />
<ul>
<li><strong>Name</strong> : Name of the <strong>collection</strong> to be created</li>
<li><strong>Option</strong> : Specify options about <strong>memory size</strong> and <strong>indexing</strong> (Optional)</li>
</ul>
In the command, <strong>name</strong> is name of collection to be created. <strong>Options</strong> is a document and is used to specify <strong>configuration</strong> of collection.<br />
<br />
<div class="progrramers_code">
<code>
> use cricket<br />
switched to db cricket<br />
> db.createCollection("teamindia");<br />
{ "ok" : 1 }<br />
> □<br />
</code></div>
<br />
Above example explains how you can create a basic <strong>collection without use of options</strong>.<br />
<br />
<table class="progrramers_table">
<tbody>
<tr>
<th style="text-align: center;">Parameter</th>
<th style="text-align: center;">Type</th>
<th style="text-align: center;">Description</th>
</tr>
<tr>
<td style="text-align: center;">Name</td>
<td style="text-align: center;">String</td>
<td style="text-align: center;">Name of the collection to be created</td>
</tr>
<tr>
<td style="text-align: center;">Options</td>
<td style="text-align: center;">Document</td>
<td style="text-align: center;">(Optional) Specify options about memory size and indexing</td>
</tr>
</tbody>
</table>
<strong><br /></strong>
<strong>Options</strong> parameter is optional, so you need to specify only the name of the collection like above example. Following is the list of options you can use :<br />
<br />
<table class="progrramers_table">
<tbody>
<tr>
<th class="col-4" style="text-align: center;">Field</th>
<th class="col-4" style="text-align: center;">Type</th>
<th class="col-2" style="text-align: center;">Description</th>
</tr>
<tr>
<td style="text-align: center;">capped</td>
<td style="text-align: center;">Boolean</td>
<td style="text-align: center;">(Optional) If true, enables a capped collection. Capped collection is a fixed size collection that automatically overwrites its oldest entries when it reaches its maximum size. <strong>If you specify true, you need to specify size parameter also.</strong></td>
</tr>
<tr>
<td style="text-align: center;">autoIndexId</td>
<td style="text-align: center;">Boolean</td>
<td style="text-align: center;">(Optional) If true, automatically create index on _id field.s Default value is false.</td>
</tr>
<tr>
<td style="text-align: center;">size</td>
<td style="text-align: center;">number</td>
<td style="text-align: center;">(Optional) Specifies a maximum size in bytes for a capped collection. <strong>If capped is true, then you need to specify this field also.</strong></td>
</tr>
<tr>
<td style="text-align: center;">max</td>
<td style="text-align: center;">number</td>
<td style="text-align: center;">(Optional) Specifies the maximum number of documents allowed in the capped collection.</td>
</tr>
</tbody>
</table>
<br />
Now let’s try to create a collection using few parameters like mentioned in above table.<br />
<br />
<div class="progrramers_code">
<code>
> db.createCollection("players", { capped : true, autoIndexId : true, size :<br />
... 10485760, max : 20000 } )<br />
{<br />
"note" : "the autoIndexId option is deprecated and will be removed in a<br />
future release",<br />
"ok" : 1<br />
}<br />
>□<br />
</code>
</div>
<br />
<h3>
Example Explanation</h3>
Above is an example of creating a collection using ‘<strong>capped’</strong>, ‘<strong>autoIndexId’</strong>, ‘<strong>size’</strong> and ‘<strong>max’</strong> parameters. <strong>‘capped’</strong> parameter enables <strong>capped collections</strong> that has a fixed size which is specified in ‘<strong>size’</strong> parameter - 10485760 bytes (10MB). After the reaching at its size limit, it will overwrite the previous entries. This collection can store maximum <strong>20000 documents</strong> that specified in max parameter. <strong>autoIndexId</strong> parameter creates on _id field by default.<br />
<br />
<strong><span style="color: red;">Note:</span></strong> you have to be careful while using <strong>autoIndex</strong> parameter because the <strong>autoIndexId</strong> option is deprecated and will be removed in a future release<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<h2>
<strong>Collections can be created automatically</strong></h2>
<strong>MongoDB</strong> creates a new collection while you are inserting <strong>first document</strong> using a collection name and after that you can also insert documents in that collection. So you do not need to create the collections, collections can be created automatically.<br />
<br />
<div class="progrramers_code">
<code>
> db.<mark>language</mark>.insert({<br /><br />
... name:"JavaScript",<br />
... type:"Client Side",<br />
... tutorial: "Progrramer JavaScript Tutorials"<br />
... });<br />
WriteResult({ "nInserted" : 1 })<br />
> show collections<br />
<mark>language</mark><br /><br />
players<br />
sample<br />
system.indexes<br />
teamindia<br />
> db.<mark>language</mark>.find().toArray()<br /><br />
[<br />
{<br />
"_id" : ObjectId("5d62d624ed9a7864410433ef"),<br />
"name" : "JavaScript",<br />
"type" : "Client Side",<br />
"tutorial" : "Progrramer JavaScript Tutorials"<br />
}<br />
]<br />
>□<br />
</code>
</div>
<br />
<br />
In above example collection named ‘<strong>language</strong>’ is created when first document is inserted.<br />
<h2>
<strong>Show Collections</strong></h2>
In MongoDB, to view the list of collections inside a database show collection command is use.<br />
Below example shows first switch to database using use command and then get list of collections by using show collections command.<br />
<br />
<div class="progrramers_code">
<code>
> show collections<br/>
players<br/>
sample<br/>
system.indexes<br/>
teamindia<br/>
><span >□</span><br/>
</code>
</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<h2>
<strong>Remove Collections</strong></h2>
To <strong>remove</strong> or <strong>delete</strong> the collection in <strong>MongoDB</strong> <strong>drop()</strong> command is used. Below is the basic syntax of drop() collection.<br />
<br />
<code class="progrramers_syntax">db.collectionname.drop();</code> <br />
<br />
You can check the collection in collections list and drop the collection. In below example a collection named <strong>language</strong> is dropping.<br />
<br />
<div class="progrramers_code">
<code>
> show collections<br/>
language<br/>
players<br/>
sample<br/>
system.indexes<br/>
teamindia<br/><br/><br/>
> db.language.drop()<br/>
true<br/><br/><br/>
> show collections<br/>
players<br/>
sample<br/>
system.indexes<br/>
teamindia<br/>
><span >□</span><br/>
</code>
</div>
</div>
</div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com0tag:blogger.com,1999:blog-3952009654906237808.post-49786631617956398832019-08-24T11:46:00.001-07:002019-08-24T13:03:25.120-07:00MongoDB Tutorials : How to create/remove database using MongoDB shell? - progrramers<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_count">
Hello Programmers! In previous chapter we were introduced with <strong>MongoDB</strong>. Now we know that MongoDB is <strong>NoSQL database</strong> program that provides a mechanism for storage and retrieval of data in documents of <strong>tree structured collections</strong>.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkg9AsvMxjFpxuj55YOrM_xVIHFq1NbnFzKtBRQRDmHbIeGU2ygCdJaJ14vl4O79YyupRoP2HiWJuSeH5KykY0O24MD7LnVuj73IvlmE0A8vK8dcoQ_gVVvTrPOb_DfmhHH9LHLQ_UT2I/s1600/MongoDB+Tutorials+-+how+to+create-remove+database+using+MongoDB+shell.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="MongoDB Tutorials - how to create-remove database using MongoDB shell" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkg9AsvMxjFpxuj55YOrM_xVIHFq1NbnFzKtBRQRDmHbIeGU2ygCdJaJ14vl4O79YyupRoP2HiWJuSeH5KykY0O24MD7LnVuj73IvlmE0A8vK8dcoQ_gVVvTrPOb_DfmhHH9LHLQ_UT2I/s640/MongoDB+Tutorials+-+how+to+create-remove+database+using+MongoDB+shell.jpg" title="MongoDB Tutorials : How to create/remove database using MongoDB shell? - progrramers" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">MongoDB Tutorials : How to create/remove database using MongoDB shell? - progrramers</td></tr>
</tbody></table>
<br />
<br />
In this <strong>MongoDB Tutorial</strong> we will see how to create a Database in MongoDB.<br />
<h2>
use Command</h2>
In MongoDB ‘<strong>use command</strong>’ is used to create database. ‘use Command’ is also used to <strong>switch</strong> to another <strong>existing database</strong>. The command creates a <strong>new database</strong> if database is not existing otherwise it returns existing database.<br />
<h3>
Below is the basic syntax of use command :</h3>
<code class="progrramers_syntax"><strong>use <database_name></strong></code>
<br />
<br />
<div class="progrramers_code">
<code>
> use cricket<br/>
switched to db cricket<br/>
> <span >□</span><br/>
</code>
</div>
<br />
<br />
Above is example of use command that shows how to create a new to database.<br />
<h2>
db Command</h2>
db command shows the name of database that currently in use. By default ‘<strong>test</strong>’ database is selected but you can switch to other existing database by using ‘<strong>use command</strong>’.<br />
<br />
<br/>
<div class="progrramers_code">
<code>
> db <br/>
cricket<br/>
> <span >□</span><br/>
</code>
</div>
<br/>
<br />
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<h2>
show dbs Command</h2>
Show dbs command shows the list of database existed in MongoDB.<br />
<br />
<br/>
<div class="progrramers_code">
<code>
> show dbs <br/>
admin 0.078GB<br/>
cars 0.078GB<br/>
company 0.078GB<br/>
cricket 0.078GB<br/>
demo 0.078GB<br/>
local 0.078GB<br/>
myapp 0.078GB<br/>
mydb 0.078GB<br/>
school 0.078GB<br/>
test 0.078GB<br/>
> <span >□</span><br/>
</code>
</div>
<br />
<br />
<strong><span style="color: red;">Note:</span></strong> When you create new database using use command and then check the database list using show dbs, you will not find the new created database in this list until you do not create at least a <strong>collection</strong> in that database. By default ‘test’ database is selected if not creating new database then collection will be <strong>created and stored</strong> in ‘test’ database.<br />
<br />
Now we will see how to drop a database using MongoDB command.<br />
<h2>
dropDatabase() Method</h2>
In MongoDB dropDatabase() method is used to drop database.<br />
<br />
<strong>Below is the basic syntax of Drob Database Command:</strong><br />
<strong><br /></strong>
<code class="progrramers_syntax"><strong>dropDatabase()</strong></code>
<strong><br /></strong>
Switch to existing database using ‘<strong>use</strong>’ Command and write down the command <strong>dropDatabase</strong>() and hit Enter button and your existing database is deleted.<br />
<br />
<br />
<div class="progrramers_code">
<code>
> use demo<br/>
switched to db demo<br/>
> db.dropDatabase()<br/>
{ "dropped" : "demo", "ok" : 1 }<br/>
> show dbs<br/>
aams 0.078GB<br/>
admin 0.078GB<br/>
cars 0.078GB<br/>
company 0.078GB<br/>
cricket 0.078GB<br/>
local 0.078GB<br/>
myapp 0.078GB<br/>
mydb 0.078GB<br/>
school 0.078GB<br/>
test 0.078GB<br/>
> <span >□</span><br/>
</code>
</div>
<br />
<br />
<strong>dropDatabase()</strong> command deletes the selected database therefore you do not required to write any other filter criteria. If you haven’t select any database then it delete ‘test’ database by default.<br />
<br />
Next chapter in this tutorial series will elaborate <strong>How to create/remove collection using MongoDB Shell?</strong></div>
</div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com5tag:blogger.com,1999:blog-3952009654906237808.post-8815433254799670722019-08-18T12:41:00.001-07:002019-09-26T12:34:25.937-07:00Framework7 Tutorial : How to start with Framework7? Installation and initial setup of Framework7 - progrramers<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_count">
<h3 style="text-align: left;">
Getting started with Framework7</h3>
Working with <strong>Framework7, </strong>Installation and initial setup of Framework7 is very simple and easy when you start with its predefined examples placed in <strong>Kitchen Sink</strong> but at <strong><a href="https://www.progrramers.com/" rel="dofollow noopener" target="_blank" title="progrramers : a web school">programmers.com</a>,</strong> we will learn everything about Framework7 more broadly. Before moving on ‘<strong>How to start with Framework7?</strong>’ if you don’t know about Framework7 then I recommend please walk once through our previous post <strong>‘<a href="https://www.progrramers.com/2019/08/framework7-tutorial-what-is-framework7.html" rel="dofollow noopener" target="_blank" title="What is Framework7?">What is Framework7?</a>’.</strong><br />
<strong><br /></strong>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Eapo8CnKNix4tsTza3k4wAQiaFHL6yaaLqRsnQ0Lw0O5xjc-i4FjlrrfCQli3dEzgXi9aHEEE8VaGh8yznuY2tmdgJPe0x49SwiiDRJ3O4h9KCr3RsfJUgTX-LD9SjSycY5IP43rDhk/s1600/Framework7+Tutorial+-+Introduction+-progrramers.com.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Framework7 Tutorial - Introduction -progrramers.com" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Eapo8CnKNix4tsTza3k4wAQiaFHL6yaaLqRsnQ0Lw0O5xjc-i4FjlrrfCQli3dEzgXi9aHEEE8VaGh8yznuY2tmdgJPe0x49SwiiDRJ3O4h9KCr3RsfJUgTX-LD9SjSycY5IP43rDhk/s640/Framework7+Tutorial+-+Introduction+-progrramers.com.jpg" title="Framework7 Tutorial : How start with Framework7? Installation and initial setup of Framework - progrramers" width="640" /></a></div>
<strong><br /></strong>
<strong><br /></strong>
To understand whole process of Framework7 with practical examples I also recommend creating a localhost on your pc either with <strong>IIS (Internet Information Service)</strong> or <strong>Apache server</strong> or <strong>Node.JS</strong> because Framework7 routing system will not gonna work without http localhost. You can also go with other available http web server options like Nginx, WAMP, LAMP (only for linux), LightSpeed etc but below explained options are much more easy and in use these days.<br />
<br />
<h3 style="text-align: left;">
What is IIS?</h3>
<strong>IIS (Internet Information Service)</strong> is default <strong>http web server system</strong> of Window OS which can be installed easily on your pc by enabling the IIS feature under <strong>Turn windows feature on or off </strong>section. If you working with IIS then you don’t need to install any third party software on your pc.<br />
<br />
<h3 style="text-align: left;">
What is Apache?</h3>
<strong>Apache</strong> is an <strong>open-source</strong> and free <strong>web server software</strong>. The official name is <strong>Apache HTTP Server</strong>, and it's maintained and developed by the <strong>Apache Software Foundation</strong>. It allows website owners to serve content on the web. You can create your own Apache web server on pc by installing XAMPP. XAMPP is very easy to download, install, configure and run localhost http web server on your pc.<br />
<a title="Create Localhost http server on your pc" href="https://www.apachefriends.org/download.html" target="_blank" rel="nofollow" >XAMPP Download</a>
<br />
<h3 style="text-align: left;">
<b>What is Node.JS?</b></h3>
<strong>Node.js</strong> is an <strong>open source http web server</strong> and <strong>JavaScript runtime environment</strong> that built on <strong>Chrome's V8 JavaScript engine</strong>. Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) and the ability to run Node.JS on various platforms make it so special and very popular in a very short period of its launch.<br />
<a title="Create Localhost http server on your pc with nodeJS" href="https://nodejs.org/en/download/" target="_blank" rel="nofollow">NodeJS Download</a>
<br /><br />
Now let’s go ahead, in this <strong>Framework7</strong> <strong>tutorial series</strong> we will create a web application (website) with different modules of Framework7 and to create that, first of all we have to create Homepage for our <strong>web application</strong>.<br />
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<h2>
<strong>Create Homepage using Framework7</strong></h2>
Now first of all we have to create a folder inside <strong>web server root directory</strong> (which is ‘htdocs’ in XAMPP), you can specify any name but in this Framework Tutorial I’ll name it ‘<strong>myapp</strong>’ like shown in below image.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9218CJ-TqY3w04A2v7ULwABCIaKZ7lD5P7Q2TqUYtGV6bt5nJuTgprynpkCyvX91lfAMDB4Mo43CGZ0RfMzQ2PMzLmBw_Bodr7VCHs901JicMx9Ij25Qnva7EGpDEWk962-9IFkKqF_o/s1600/Framework7+Tutorial+-+How+start+with+Framework7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Framework7 Tutorial - How start with Framework7" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9218CJ-TqY3w04A2v7ULwABCIaKZ7lD5P7Q2TqUYtGV6bt5nJuTgprynpkCyvX91lfAMDB4Mo43CGZ0RfMzQ2PMzLmBw_Bodr7VCHs901JicMx9Ij25Qnva7EGpDEWk962-9IFkKqF_o/s640/Framework7+Tutorial+-+How+start+with+Framework7.jpg" title="Framework7 Tutorial : How start with Framework7? Installation and initial setup of Framework - progrramers" width="640" /></a></div>
<br />
<br />
<strong><span style="color: red;">Note</span> : In this Framework7 Tutorial we will create web application using core library.</strong><br />
<strong><br /></strong>
Now download the <strong>Source Code <code>.zip</code></strong> file of ‘myApp’ via below given link which helps you to set <strong>Framework7 Basic App HTML Layout</strong> and other source file to create web app.<br />
<br />
<br />
<a href="https://github.com/progrramers/Framework7" rel="noopener" target="_blank" title="Framework7 Tutorial on progrramers : a web school">Framework7 Release of version 5.0.0-beta.6 Ready to work Source Code on GitHub</a><br />
<br /></div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com1tag:blogger.com,1999:blog-3952009654906237808.post-60175252643804237832019-08-12T02:53:00.001-07:002019-08-15T03:25:46.218-07:00MongoDB Tutorial: What is MongoDB Shell? MongoDB store procedure equivalent explained - Progrramers<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_count">
<h3>
<strong>What is Mongo Shell?</strong></h3>
<b>Mongo Shell</b> is a practice field for beginners and can be used to perform advance administrative operation as well. Database and collections can be created, accessed, modified and deleted using MongoDB shell. <strong>Mongo Shell</strong> is a component of <strong>MongoDB Distributions</strong>. It is an interactive JavaScript interface to MongoDB.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZ0moPhzE5YInFc2MmOmuw7mNL8LxxfqQecXPIl_JnPVAxkmixrBbWhJHcgMfDLvyHG66RH-qFhLzsSlqLiRf_XYFrVjsJ019M6VHJ9FgF4Y9cr2MzHoimNPKwON8ept3PcnH4HaeTOI/s1600/MongoDB+Tutorials-+What+is+MongoDB+Shell+MongoDB+store+procedure+equivalent+explained+-+Progrramers.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="What is Mongo Shell?" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZ0moPhzE5YInFc2MmOmuw7mNL8LxxfqQecXPIl_JnPVAxkmixrBbWhJHcgMfDLvyHG66RH-qFhLzsSlqLiRf_XYFrVjsJ019M6VHJ9FgF4Y9cr2MzHoimNPKwON8ept3PcnH4HaeTOI/s640/MongoDB+Tutorials-+What+is+MongoDB+Shell+MongoDB+store+procedure+equivalent+explained+-+Progrramers.jpg" title="MongoDB Tutorial: What is MongoDB Shell? MongoDB store procedure equivalent explained - Progrramers" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><h3 style="text-align: center;">
<span style="font-weight: normal;">What is Mongo Shell?</span></h3>
</td></tr>
</tbody></table>
<br />
<br />
<strong>Mongo shell</strong> can be use to perform the <strong>CRUD operations</strong>. Once you have installed and have started MongoDB, connect the mongo shell to your running <strong>MongoDB instance</strong>.<br />
<strong>MongoDB</strong> supports <strong>AD hoc queries</strong> like field, range query, and regular expression searches. Queries can return specific fields of documents and also include user-defined JavaScript functions. Queries can also be configured to return a random sample of results of a given size.<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_2">
<pre><code class="js">
db.cars.find({color:"red"});
//Result : { "_id" : ObjectId("5d53066a520ea88ac000e982"), "name" : "Opel", "color" : "red" }
</code></pre>
</div>
</div>
<br />
<h3>
<strong>How to start</strong> <strong>MongoDB Shell</strong>?</h3>
To start MongoDB you have to install MongoDB first on your PC. You can easily setup MongoDB on your pc by taking reference of the below “How to Link”.<br />
<br />
<a href="https://www.progrramers.com/2019/08/mongodb-tutorial-how-to-install-mongodb.html" rel="noopener dofollow" target="_blank" title="MongoDB Tutorial : How to Install MongoDB?">MongoDb Tutorial : How to Install MongoDB?</a><br />
<br />
If you have Window OS 32-bit then you need to go MongoDB installed program file location (by default – “<strong>C:\Program Files\MongoDB\Server\3.2\bin\</strong>”) and double-click on mongod.exe to start the MongoDB instance and after that find another file named mongo.exe in same directory, double-click on that and MongoDB shell will be started.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKCtETp5z4RA07Z7c5_RuJAF6XzsqPXA64_6KVUuFix1iH707tQy5WI3yhBjih0Uad_AhFqwcdFqsGdTj79xp9iAw1C_yTkQy4D7AE7AiFeS85ka8XYGbFaht9bsmNhWWTIKllv2g2LXs/s1600/How+to+Start+MongoDB+Shell+in+Window7+32-Bit+-+progrramers.com.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="How to Start MongoDB Shell in Window7 32-Bit - progrramers.com" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKCtETp5z4RA07Z7c5_RuJAF6XzsqPXA64_6KVUuFix1iH707tQy5WI3yhBjih0Uad_AhFqwcdFqsGdTj79xp9iAw1C_yTkQy4D7AE7AiFeS85ka8XYGbFaht9bsmNhWWTIKllv2g2LXs/s640/How+to+Start+MongoDB+Shell+in+Window7+32-Bit+-+progrramers.com.jpg" title="MongoDB Tutorial: What Is MongoDB Shell? MongoDB Store Procedure Equivalent Explained - Progrramers" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">How to Start MongoDB Shell in Window7 32-Bit - progrramers.com</td></tr>
</tbody></table>
<br />
<br />
Else if you have Window OS 64-bit you need to go MongoDB installed program file location (by default – “<strong>C:\Program Files\MongoDB\Server\4.0\bin\</strong>”) and double-click on mongo.exe, MongoDB shell will be start along with the MongoDB instance.<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<h3>
<strong>Progrramers Recommends : Best Practice</strong></h3>
Set the Path for MongoDB instance and MongoDB Shell in Windows Environment Variables.<br />
<h3>
<strong>Store a JavaScript Function on the Server - MongoDB Stored Procedure Equivalent (MongoDB Procedure Operations)</strong></h3>
Store Procedure is the best way to extract faster performance from database programs because it minimizes the gap between data and database program. A stored procedure is a set of database statements that has been created and stored in the database. A stored procedure accepts input parameters from server side script and performs the task so that a single procedure can be used over the network by several clients using different input data.<br />
<br />
There is nothing called store procedure in MongoDB but MongoDB provides a highly efficient mechanism to perform the task like store procedure. MongoDB documents can store the JavaScript functions as data which can accept the parameters and execute the function accordingly.<br />
In MongoDB JavaScript functions can be saved in system.js document and execute later when required. For reference check below example:<br />
<br />
<div class="prr_div_1">
<h2 class="prr_h2 head_count">
</h2>
<div class="prr_div_2">
<pre><code class="js">
db.system.js.save(
{
_id:"getSum",value:function(a, b){
return a + b
}
}
);
db.eval("return getSum(2, 6)");
// Result : 8
</code></pre>
</div>
</div>
<br />
<h3>
<strong>CRUD operations in MongoDB Shell</strong></h3>
Like other database program <strong>MongoDB shell</strong> can be used to perform <strong>CRUD operations</strong>. CRUD operations refer to the basic functions like <strong>Create, Read (Find), Update and Delete</strong>.<br />
<h3>
<strong>MongoDB Shell: </strong><strong>Create</strong> or <strong>insert operation</strong></h3>
<strong>Create</strong> or <strong>insert operation</strong> adds new document inside a <strong>collection</strong>. If there is no collection found with specified name then first it creates the collection with specified name and then inserts a new document inside a collection.<br />
MongoDB shell provides following Methods to insert document in collection.<br />
<ul>
<li><strong>collectionname.insert()</strong> – insert one or more document at same time</li>
<li><strong>collectionname.inserOne()</strong> – insert one document at a time</li>
</ul>
Note : In MongoDB <strong>insert operation</strong> can target <strong>single collection</strong> at a time. MongoDB stores the data in the document in the form of field and value. Values are case sensitive during query operations for example “Apple” is different from “apple” when finding the document with search criteria like {fruit : “apple”}.<br />
<h3>
<strong>MongoDB Shell: Read or Find Operation</strong> </h3>
<strong>Read or Find operation</strong> retrieves the data from a collection. Find operation can use <strong>regex</strong> to find the specific pattern of data and execute the result accordingly. MongoDB shell provides following methods to find the document from a collections.<br />
<ul>
<li><strong>collectioname.find()</strong> – find whole document available in a collection</li>
<li><strong>collectioname.findOne()</strong> – find top most document available in result in a collection</li>
<li><strong>collection.find().forEach(printjson)</strong> – find whole document available in a collection and output the result in JSON oriented format</li>
<li><strong>collection.find().pretty() </strong>– find whole document available in a collection and output the result in JSON oriented format</li>
</ul>
Note : <strong>MongoDB</strong> stores the data in the document in the form of <strong>field and value</strong>. Values are <strong>case sensitive</strong> during <strong>query operations</strong> for example “<strong>Apple</strong>” is different from “<strong>apple</strong>” when finding the document with search criteria like <strong>db.collection.find(</strong>{fruit : “Apple”}<strong>)</strong> and <strong>db.collection.find(</strong>{fruit : “apple”}) both return the different value.<br />
<br/>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<h3>
<strong>MongoDB Shell: Update Operation</strong> </h3>
<strong>Update operation</strong> can modifies the <strong>exiting</strong> document in a collection. You can specify criteria, or filters, that identify the documents to update. These filters use the same syntax as read operations. Update operation can also use <strong>regex</strong> to find the specific pattern of data and execute the result accordingly. Like mentioned above in read operation values are <strong>case sensitive</strong> in specified criteria.<br />
<ul>
<li><strong>collection.updateOne()</strong> – Update one record as per specified criteria</li>
<li><strong>collection.updateMany()</strong> – Update many record as per specified criteria</li>
<li><strong>collection.replaceOne()</strong> – Replace one record as per specified criteria</li>
</ul>
<h3>
<strong>MongoDB Shell: Delete Operations</strong></h3>
<strong>Delete operations</strong> remove documents from a collection. You can specify criteria, or filters, that identify the documents to update. These filters use the same syntax as read operations and update operations. <strong>Delete operation</strong> can also use <strong>regex</strong> to find the specific pattern of data and execute the operation accordingly. Like mentioned above in <strong>read and update operation</strong> values are <strong>case sensitive</strong> in specified criteria.<br />
<br />
<br /></div>
<strong>Related Topics</strong><br />
<hr />
<div class="post-title entry-title">
<span class="tl-wrapIn"><a href="https://www.progrramers.com/2019/06/what-is-mongodb-introduction-mongodb-architecture-nosql-concept-compression-sql-database.html" title="What Is MongoDB? : Introduction, MongoDB Architecture, NoSQL Concept And Comparison With SQL Database">What Is MongoDB? : Introduction, MongoDB Architecture, NoSQL Concept And Comparison With SQL Database</a></span></div>
<div class="post-title entry-title">
<span class="tl-wrapIn"><a href="https://www.progrramers.com/2019/08/mongodb-tutorial-how-to-install-mongodb.html" title="MongoDB Tutorial : How to Install MongoDB?">MongoDb Tutorial : How to Install MongoDB?</a></span></div>
<hr />
</div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com1tag:blogger.com,1999:blog-3952009654906237808.post-5109282005056086322019-08-10T13:02:00.001-07:002019-08-10T22:52:05.761-07:00MongoDb Tutorial : How to Install MongoDB?<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<h2>
<strong>MongoDb Tutorial : How to Install MongoDB?</strong></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMFNhY7dFNVGQKTyKHCHMM0h29_c5EKyajP3SLv0m6Wm_WiMVWPeiabL_OViQJRXJYhVUgKPLiDvgeWSSGiMMPKNzegK-u8rkaMeDaFS5s1Nj8mAMMLr21gFeMRnJ7Lm30gpKJqzQvXG8/s1600/MongoDb+Tutorial+-+How+to+Install+MongoDB.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MongoDb Tutorial : How to Install MongoDB?" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMFNhY7dFNVGQKTyKHCHMM0h29_c5EKyajP3SLv0m6Wm_WiMVWPeiabL_OViQJRXJYhVUgKPLiDvgeWSSGiMMPKNzegK-u8rkaMeDaFS5s1Nj8mAMMLr21gFeMRnJ7Lm30gpKJqzQvXG8/s640/MongoDb+Tutorial+-+How+to+Install+MongoDB.jpg" title="MongoDb Tutorial : How to Install MongoDB?" width="640" /></a></div>
<div>
<strong><br /></strong></div>
<div>
<strong><br /></strong></div>
Hello World! Welcome to <strong>MongoDB Tutorial Series</strong>. In this post we will learn <strong> How to Install MongoDB</strong> to our personal computer. In order to install MongoDB to windows PC we have to download the installer package of MongoDB from MongoDB official site. The link is given below, you simply click it, go to the MongoDB site and download the installer file.<br />
<strong>Remember</strong> : The installer package available on MongoDB site is only for 64-bit OS architecture.<br />
<h3>
<strong>How to check the OS Architecture ?</strong></h3>
In order to check your Windows OS architecture you can go through these options. Try any one of these and know your system OS architecture.<br />
<br />
1. Check the Properties of My Computer like show in below image:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilpzRSuFkIjIvXU5LOQCsh84L2TaC2Cp-J-5URIKmQpUWCwyOBL1yU7rcQWS0mt4jj5XiJL8naxMRptD6usFjiQ4ocpNeFAGeO28x1UatALgImgicUqlixVHiji95xXQIkFBjrekrubZM/s1600/MongoDB+Tutorial+-+How+to+get+OS+Architecture+in+Windows+7+using+MyComputer+Properties.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="MongoDB Tutorial - How to get OS Architecture in Windows 7 using MyComputer Properties.jpg" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilpzRSuFkIjIvXU5LOQCsh84L2TaC2Cp-J-5URIKmQpUWCwyOBL1yU7rcQWS0mt4jj5XiJL8naxMRptD6usFjiQ4ocpNeFAGeO28x1UatALgImgicUqlixVHiji95xXQIkFBjrekrubZM/s640/MongoDB+Tutorial+-+How+to+get+OS+Architecture+in+Windows+7+using+MyComputer+Properties.jpg" title="MongoDb Tutorial : How to Install MongoDB?" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-size: small; text-align: left;">MongoDB Tutorial - How to get OS Architecture in Windows 7 using MyComputer Properties.jpg</span></td></tr>
</tbody></table>
<div style="text-align: center;">
<strong><br />or</strong><br />
<strong><br /></strong></div>
2. Go to Command and Type ‘wmic os get osarchitecture’ and press enter you will get the OS architecture as shown in below figure :<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTPxR6xZa6BwBi7R-CF8Nkf4Fzk7Q6eWVL1OlRLT8BMTqn0GnYwoYVtNr0GfAwwKakHymyEeFp6qV6kSaYCEJ3GCsawCNJ-IPfVVS9KPbKPqFoaXv0KdU0Vz1PRZrM-vMOkaX4aJ8DAyY/s1600/MongoDB+Tutorial+-+How+to+get+OS+Architecture+in+Windows+7+using+DOS+Commands.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="MongoDB Tutorial - How to get OS Architecture in Windows 7 using DOS Commands.jpg" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTPxR6xZa6BwBi7R-CF8Nkf4Fzk7Q6eWVL1OlRLT8BMTqn0GnYwoYVtNr0GfAwwKakHymyEeFp6qV6kSaYCEJ3GCsawCNJ-IPfVVS9KPbKPqFoaXv0KdU0Vz1PRZrM-vMOkaX4aJ8DAyY/s640/MongoDB+Tutorial+-+How+to+get+OS+Architecture+in+Windows+7+using+DOS+Commands.jpg" title="MongoDb Tutorial : How to Install MongoDB?" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-size: small; text-align: left;">MongoDB Tutorial - How to get OS Architecture in Windows 7 using DOS Commands.jpg</span></td></tr>
</tbody></table>
<br />
<div style="text-align: center;">
<strong>or</strong></div>
3. At last open ‘Run’ and type ‘dxdiag’ and press enter, Direct-X diagnostic tool will be open where you can find the OS architecture:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcPqfrqrqXGsuR3dV38YZ6njAJaI-kAary4Qqhy9IqXQA8PtqmFKGeOPjoLKMAqJBa1puwF3blEhbYHdcL0x3WvTOjk26NpOloHMVAi7o739NsNd7ui3emfeH_K2rRwfG69zadNMcb7-0/s1600/MongoDB+Tutorial+-+How+to+get+OS+Architecture+in+Windows+7+using+Direct-X+Tool.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="MongoDB Tutorial - How to get OS Architecture in Windows 7 using Direct-X Tool.jpg" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcPqfrqrqXGsuR3dV38YZ6njAJaI-kAary4Qqhy9IqXQA8PtqmFKGeOPjoLKMAqJBa1puwF3blEhbYHdcL0x3WvTOjk26NpOloHMVAi7o739NsNd7ui3emfeH_K2rRwfG69zadNMcb7-0/s640/MongoDB+Tutorial+-+How+to+get+OS+Architecture+in+Windows+7+using+Direct-X+Tool.jpg" title="MongoDb Tutorial : How to Install MongoDB?" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-size: small; text-align: left;">MongoDB Tutorial - How to get OS Architecture in Windows 7 using Direct-X Tool.jpg</span></td></tr>
</tbody></table>
<h3>
<strong>Download Mongodb for Windows OS 64-Bit</strong></h3>
The following tutorial uses the MongoDB installation wizard to install MongoDB Community Edition 4.0 on Windows 64-Bit OS.<br />
<a href="https://fastdl.mongodb.org/win32/mongodb-win32-x86_64-2008plus-ssl-4.0.12-signed.msi" rel="noopener" target="_blank" title="Download Mongodb Community Edition for Windows OS 64-Bit">Download MongoDB Community Edition 4.0.12 for Windows 64-Bit OS</a><br />
<a href="https://draft.blogger.com/Download%20Mongodb%20Community%20Edition%20for%20Windows%20OS%2064-Bit" rel="noopener" target="_blank" title="https://www.mongodb.com/download-center/community">Download MongoDB Community Edition with Multiple Choice</a><br />
<h3>
<strong>Download Mongodb for Windows 7 32-Bit</strong></h3>
If you want to install MongoDB for Windows 7 32-bit then click the below link and download the package.<br />
<a href="https://www.mongodb.org/dl/win32/" rel="noopener" target="_blank" title="Download Mongodb for Windows 7 32-Bit">Download MongoDB Other Version Binaries</a><br />
<strong>Note</strong> : To work better it is preferred to install Window 7 Service Pack 1 for 32-bit OS architecture. To download the same click the below link:<br />
<a href="http://go.microsoft.com/fwlink/?LinkId=199583" rel="noopener" target="_blank" title="Window 7 Service Pack All in One Download">Window 7 Service Pack All in One</a><br />
<strong><span style="color: red;"><span style="font-size: 32px;">☝</span>Above link might not work after 14<sup>th</sup> January 2020. Therefore keep back-up also.</span></strong><br />
<br />
<strong>Remember</strong> : 32-bit version of MongoDB only supports database smaller then 2GB and strongly preferred for study and testing purpose only.</div>
<h3>
<strong>MongoDB Installation Procedure</strong></h3>
After downloading the installer (.msi file) package you have to run this package, so click the double click the installer file and follow the installation wizard. You will be asked to <strong>choose the set type : Complete </strong>(recommended for most users) <strong>or Custom. </strong>If you choose the Custom installation option, you may have to specify the location of installation file.<br />
After that you will be asked to choose the type of service configuration like shown in below image. If you want to install the MongoDB binaries only then uncheck the check box or if you want to run install MongoDB as service then you need to check the checkbox.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJxdhyphenhyphenJpwmBKUirun5rqHEzSzL3w-z3ABvnFmk63JaTPRutZ-V2b7E9KoIVgGwdPjp-fjpF3bKi9h242dFLN3i8UkBLBA1amF1Cpsky9c3HUyfEtltZWC9hEN0crFGqWPoaJ2JqWbH-k/s1600/MongoDB+Installation+Type+in+Window+OS+64-Bit.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="MongoDB install Binaries only or Install as service" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJxdhyphenhyphenJpwmBKUirun5rqHEzSzL3w-z3ABvnFmk63JaTPRutZ-V2b7E9KoIVgGwdPjp-fjpF3bKi9h242dFLN3i8UkBLBA1amF1Cpsky9c3HUyfEtltZWC9hEN0crFGqWPoaJ2JqWbH-k/s640/MongoDB+Installation+Type+in+Window+OS+64-Bit.jpg" title="MongoDb Tutorial : How to Install MongoDB?" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><strong style="font-size: medium; text-align: left;">MongoDB install Binaries only or Install as service</strong></td></tr>
</tbody></table>
<br />
<br />
<strong>MongoDB install as service</strong> : This configuration allows you to configure MongoDB as service. Every time you start window MongoDB initialized automatically.<br />
<ul>
<li><strong>Run the service as Network Service user (Default)</strong> :This is a Windows user account that is built-in to Windows.</li>
<li><strong>Run the service as a local or domain user</strong>
<ul>
<li>For an existing local user account, specify a period (i.e. ) for the Account Domain and specify the Account Name and the Account Password for the user.</li>
<li>For an existing domain user, specify the Account Domain, the Account Name and the Account Password for that user.</li>
</ul>
</li>
</ul>
<strong>MongoDB install binaries only</strong> : With this configuration you have to start MongoDB manually every time when starting the windows.<br />
<br />
<strong>Service Name</strong> : Specify the service name. Default name is MongoDB. If you already have a service with the specified name, you must choose another name.<br />
<br />
<strong>Data Directory</strong> : Specify the data directory, which corresponds to the --dbpath. If the directory does not exist, the installer will create the directory and sets the directory access to the service user.<br />
<br />
<strong>Log Directory</strong> : Specify the Log directory, which corresponds to the --logpath. If the directory does not exist, the installer will create the directory and sets the directory access to the service user.<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3119583116675266" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="2397633138" style="display: block; text-align: center;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<h3>
<strong>How to set up path for Window 7 32-Bit ?</strong></h3>
In Window 32-Bit installation it is little bit difficult to set the path to run MongoDB instance. So you have be care full while setting the path in commands. First you have to run Command as Administrator.<br />
<h3>
<strong>How to start Command as Administrator?</strong></h3>
To start command as Administrator click on <strong>‘start menu’</strong> and type <strong>‘cmd’</strong> in search program. You will find the command black icon in start menu list. Right click on command icon and click on ‘<strong>Run as Administrator’. </strong> You will come to command prompt : c:\windows\system32. For you reference image is attached.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3DnsEV3XbVeNFoezPqYPDboQ2O5I8ycKd3VGXZHXg7d6tnLJtiUwBZ3H-cdY3XuajuqeImGH9RASfd1VaLCFNsMj_hAoCtlKs0bRrsTSbkNRjIxzGX9Z1oMOQFsJwXjrl8sxxCpCpJa0/s1600/How+to+install+MongoDB+in+Window+%2526+32-Bit.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="How to start Command as Administrator?" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3DnsEV3XbVeNFoezPqYPDboQ2O5I8ycKd3VGXZHXg7d6tnLJtiUwBZ3H-cdY3XuajuqeImGH9RASfd1VaLCFNsMj_hAoCtlKs0bRrsTSbkNRjIxzGX9Z1oMOQFsJwXjrl8sxxCpCpJa0/s640/How+to+install+MongoDB+in+Window+%2526+32-Bit.jpg" title="MongoDb Tutorial : How to Install MongoDB?" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><div style="border-bottom: solid windowtext 1.0pt; border: none; mso-border-bottom-alt: solid windowtext .75pt; mso-element: para-border-div; padding: 0in 0in 1.0pt 0in;">
<div class="MsoNormal" style="border: none; mso-border-bottom-alt: solid windowtext .75pt; mso-padding-alt: 0in 0in 1.0pt 0in; padding: 0in;">
<b>How to start Command as Administrator?<o:p></o:p></b></div>
</div>
</td></tr>
</tbody></table>
<br />
<br />
In MongoDB 32-bit, your default installation file location will be ‘<strong>C:\Program Files\MongoDB\Server\3.2\bin</strong>’ unless you customize it. Therefore go inside the bin directory of the installation file location in command like shown in below image.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZKTQSxNMnj0TnSrywrDaLD8LwhmXP9BlA24rrGLhJ3ncYmOWGEF36q3NjrDHzOeEseGxWavS-0jKvPBX3GWQCV6zhWfzAAdesAngsQzcguf0hIuJCErjgz1vMnp7EevvKmnHFClRcfu4/s1600/How+to+setup+path+of+MongoDB+in+Window+7+32-Bit.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="How to setup path of MongoDB in Window 7 32-Bit" border="0" data-original-height="800" data-original-width="1280" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZKTQSxNMnj0TnSrywrDaLD8LwhmXP9BlA24rrGLhJ3ncYmOWGEF36q3NjrDHzOeEseGxWavS-0jKvPBX3GWQCV6zhWfzAAdesAngsQzcguf0hIuJCErjgz1vMnp7EevvKmnHFClRcfu4/s640/How+to+setup+path+of+MongoDB+in+Window+7+32-Bit.jpg" title="MongoDb Tutorial : How to Install MongoDB?" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>How to setup path of MongoDB in Window 7 32-Bit</b></td></tr>
</tbody></table>
<br />
<br />
Now go to path <strong>C:\Program Files\MongoDB\Server\3.2 </strong>and create two folders. First folder name should be <strong>‘data’ </strong>and second should be ‘log’. Also inside the data directory create another folder names ‘db’. After create these folders go back to command prompt and type(show in below images) : mongod.exe --storageEngine=mmapv1 --dbpath C:\Program Files\MongoDB\Server\3.2\data\db --logpath C:\Program Files\MongoDB\Server\3.2\log\mongo.log --logappend --rest --install<br />
<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxas0u98B_z0MzhBK95UDSeaXm1Lpqmf44pQKAxgsP1b5DMM9KqjrGGkSgP_lkh95JvK7SGrKirsuJlMrUokD4G_mQX4iZCkUypBJa2GY-yjUtDN18FmaZHac8gsgLxvKi49u_zduvLfw/s1600/How+to+setup+dbpath+of+MongoDB+in+Window+7+32-Bit.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="How to setup dbpath of MongoDB in Window 7 32-Bit" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxas0u98B_z0MzhBK95UDSeaXm1Lpqmf44pQKAxgsP1b5DMM9KqjrGGkSgP_lkh95JvK7SGrKirsuJlMrUokD4G_mQX4iZCkUypBJa2GY-yjUtDN18FmaZHac8gsgLxvKi49u_zduvLfw/s640/How+to+setup+dbpath+of+MongoDB+in+Window+7+32-Bit.jpg" title="MongoDb Tutorial : How to Install MongoDB?" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>How to setup dbpath of MongoDB in Window 7 32-Bit</b></td></tr>
</tbody></table>
<br />
<br />
This post will be in continuing. Please check letter for updates. If you any query please type in the comments. We feel glad to help you. Thank you and have nice day...!
<br/><br/><br/>
<p><span style="text-decoration: underline; color: #339966;"><strong>Related Topics</strong></span></p>
<hr />
<p class="post-title entry-title"><span class="tl-wrapIn"><a title="What Is MongoDB? : Introduction, MongoDB Architecture, NoSQL Concept And Comparison With SQL Database" href="https://www.progrramers.com/2019/06/what-is-mongodb-introduction-mongodb-architecture-nosql-concept-compression-sql-database.html">What Is MongoDB? : Introduction, MongoDB Architecture, NoSQL Concept And Comparison With SQL Database</a></span></p>
<p class="post-title entry-title"> </p>
<hr />
</div>
Progrramershttp://www.blogger.com/profile/11092840251425263196noreply@blogger.com0