JavaScript operation Html&css Easy to get started

-java Siege Lion Learning route-I. JavaScript base output

• Use the Window.alert () pop-up warning box.
• Use the document.write () method to write content to an HTML document.
• Writes to an HTML element using InnerHTML.
• Use Console.log () to write to the browser's console.

Function

• function definition

  //无参函数function functionname(){执行代码}//带参函数function myFunction(var1,var2){代码}//带返回值函数function myFunction(){var x=5;return x;}

• function access

  //访问无参函数functionname();//访问带参函数myFunction(var1,var2);//访问带返回值函数var a=myFunction();

Object

• Object definition

  var person = {  firstName:"John",             lastName:"Doe",             age:50,             eyeColor:"blue"         };

• Object Properties

  // 访问对象的两种方式person.lastName;person["lastName"];

• Object methods

  //定义对象方法methodName : function() { code lines }//访问对象方法objectName.methodName()

Javascript:void (0)

The key in Javascript:void (0) is the Void keyword, which is a very important keyword in JavaScript, which specifies that an expression is evaluated but does not return a value.

Two. JavaScript HTML DOM

• The entire document is a document node
• Each HTML element is an element node
• Text within an HTML element is a text node
• Each HTML attribute is an attribute node
• Comment is a comment node

Change HTML

• Access

  //通过ID获取var id = document.getElementById("thisId");//通过标签获取（获取为一个数组）var tags = document.getElementsByTagName("div");//通过类名获取（也为数组）var class = document.getElementsByClassName("className");

• Modify

  1.修改HTML内容document.getElementById(id).innerHTML = "HelloWorld";2.修改属性//获取属性element.getAttribute("属性名");//设置属性element.attribute=新属性值;element.setAttribute("属性名","修改值");img.src = "img.jpg"; //设置img的srca.href = "www.baidu.com"; //设置a的链接

Change CSS

document.getElementById(id).style.property=新样式;document.getElementById("p2").style.color="blue"; //改变p2的字体颜色为蓝色

Event

Event Composition: element + action + reaction process

//事件属性

DOM node

• Adding nodes

  //添加前需要新键节点var p = document.createElement("p"); //新建元素pvar word = document.createTextNode("文本内容"); //添加文本内容p.appendChild(word);//作为父元素最后一个子元素添加

• Inserting nodes

  element.insertBefore(para,child); //插入指定位置

• Replace node

  parent.replaceChild(para,child);

• Delete a node

  div.removeChild(p);

Three. JavaScript Browser BOM

Browser object Model (BOM)

Window

Represents a browser window. All JavaScript global objects, functions, and variables automatically become members of the Window object.

• Window size

  window.innerHeight - 浏览器窗口的内部高度(包括滚动条)window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

• Window method

  window.open() - 打开新窗口window.close() - 关闭当前窗口window.moveTo() - 移动当前窗口window.resizeTo() - 调整当前窗口的尺寸

Window screen

The Window.screen object contains information about the user's screen.

• Window Screen Available width

  screen.availWidth;

• Window Screen Available height

  screen.availHeight

Window Location

The Window.location object is used to obtain the address (URL) of the current page and redirect the browser to a new page.

• Property
  • Location.hostname returns the domain name of the web host
  • Location.pathname returns the path and file name of the current page
  • Location.port returns the port of the web host (80 or 443)
  • Location.protocol returns the Web protocol used (HTTP///https://)

• Method

  //location.assign() 方法加载新的文档。window.location.assign("http://www.w3cschool.cc");

Window history

Window.history object contains the history of the browser

• History.back ()-Same as clicking Back button in browser
• History.forward ()-Same as clicking the Forward button in the browser
• History.go ()-Jump to the specified page

JavaScript Pop-up window

• Warning Box

  //用于确保用户可以得到某些信息alert("sometext");

• Confirmation box

  //用于验证是否接受用户操作//返回true或falsevar a = confirm("sometext");

• Prompt box

  //用于提示用户在进入页面前输入某个值//如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 nullvar a = prompt("sometext","defaultvalue");

JavaScript Timing Events

• SetInterval () method

  //间隔指定的毫秒数不停地执行指定的代码。var timer = setInterval("javascript function",milliseconds);

• Clearinterval () method

  //用于停止 setInterval() 方法执行的函数代码clearInterval(timer);

• SetTimeout () method

  //在指定的毫秒数后执行指定代码var timer= setTimeout("javascript function", milliseconds);

• Cleartimeout () method

  //停止执行setTimeout()方法的函数代码clearTimeout(timer);

JavaScript operation Html&css Easy to get started