2023年11月25日

Javascript代写｜JavaScript interactive program

本次Javascript代写是一个JS交互程序相关的assignment

1.

<article id=”item-xyz”>

<h3>Code is fun!</h3>

<p class=”lead”>It’s a challenge but…</p>

<p>I practice every day at <a href=”http://codepen.io”>Codepen</a></p>

<div>

<span class=”author”>Professor XR</span>

<span class=”published”>05/16/2021</span>

</div>

</article>

// Code to articulate

let el = document.querySelector(“div > span”);

let name = el.textContent;

console.log(name);

 

let articleEl = el.parentElement.parentElement;

alert(articleEl.id);

 

let pargraphEl = articleEl.querySelector(“.lead”);

let linkEl = paragraphEl.nextElementSibling.querySelector(“a”);

 

let dataEl = document.querySelector(“div”);

dataEl.children[0].textContent = “05/16/2022”;

 

  • Take turns verbally articulating the above code line by line, expression by expression to describe the state changes, sequence of statements/routines, and causality of executing said routines.
  • Try using terms like:
    • object, function, call, return, property, value, data, string, first/second/next/then, variable, assign, get, set, execute, console, print, index.
  • There are a few new twists here. You can make observations about the code behavior by creating a pen with the HTML and going through the JS in the console line by line.
  • What is the implication of this with respect to starting at some location within the structure of the DOM and getting to another location? In other words, “traversing the DOM”.

2. Manipulating the Web for Practice

  • Using the Elementsinspector and Console, tinker around the website page and get comfortable with the Javascript we’ve been talking about above:
    • Querying elements
    • Reading element properties
    • Manipulating the value of said properties
  • Report back what you set out to do as a group, how you went about it, what the results were, and what you noticed / learned as it relates to the materials covered above.
  • EXTRA:Explore one of your own HTML/Bootstrap project in debug mode, using the following tools. Try making manipulations through the Elements and Console Using your a small project like your own will also be helpful in making connections since the classes, rules, structure are all your own – easier to understand what you’re doing.