1.4. Finding elements method
1.4.1. Finding elements method
JavaScript can be used to operate the html element, to realize the operation of the html element, the element of choice should be found, somewhat similar to the css selectors
html code:
<div id="box">螺钉课堂</div>js code:
oBox = document.getElementById('box')
console.log(oBox)1.4.2 Exercise
The code above 5 times handwriting, dictation again
1.5. Event, function, and operation of property
1.5.1. Events and Functions
Event is something happening, the performance of some of the acts is user generated and interactive page in a browser, for example, a mouse click, mouse move, lift the mouse, keyboard, press, etc.
What functions are? Employing words, performance of the function in the code is a collection of code, the functions of many statements completed encapsulated for later calls, the encapsulated code blocks may be understood as a form of function, i.e., only need to remember a word can, with a certain function is a function block
Function definition:
function fn(){
alert(1)
}Function call:
fn()Event function to bind:
oBox = document.getElementById("box")
oBox.onclick = function(){
alert(1)
}onclick click event when the user clicks an element occurs when the order of execution of the code above is that when the user to click this box when the element will be to perform functions such as equal sign, execute this function will pop number 1, where Note that if the user does not click this box elements, alert will not be executed
1.5.2.html attribute manipulation
innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<div id="box"></div>
<script type="text/javascript">
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.innerHTML = 'hello world!!!'
}
</script>
</body>
</html>innerText
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.innerText = 'hello world!!!'
}
innerText和innerHTML的区别
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.innerText = '<a style="color:red">hello world!!!</a>'
}
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.innerHTML = '<a style="color:red">hello world!!!</a>'
}Gets the value / setting input box
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<input type="text" id="ipt" />
<script type="text/javascript">
oBtn = document.getElementById('btn')
oIpt = document.getElementById('ipt')
oBtn.onclick = function(){
// 获取值
console.log(oIpt.value)
// 设置值
oIpt.value = '螺钉课堂'
}
</script>
</body>
</html>Set the style elements of html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
<div id="box"></div>
<script type="text/javascript">
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.style.backgroundColor = "orange"
}
</script>
</body>
</html>1.5.3 Exercise
When two numbers input box, clicking a button, calculates the difference of two numbers and to display the id of div result
Click the + sign, id for the p element p1 in the font larger two pixels clicks - number, id is p element p1 in the font smaller three pixels
1.6. Basic data types and operators
1.6.1. What is the data type
The employer put it, that is, the data type to the data classification, data in JavaScript will be different to the value being divided into separate types, including basic data types and reference data types. Here we focus on JavaScript basic data types: numeric, string, boolean, undefined, null, null and undefined which was also known as special data types
1.6.2. Why should data types
num1 = prompt('请输入数字1:')
num2 = prompt("请输入数字2:")
alert(num1 + num2)
alert(num1 - num2)Enter 1:10, enter 2:20 results: 1020 results above run out and think the results are not the same, the main reason is the data type does not, by default, the value obtained is prompt string type, not only is the + mathematical operation symbol, also represented in js connected string
As can be seen from the above example, if the data is not classified, the result can not be predetermined, but also can not be calculated
1.6.3 What is the operator?
And other symbols to represent - operator is used to represent specific rule calculation symbols such as mathematical calculations of arithmetic operation is a specific rule, we are using "* / +"
Arithmetic Operators
console.log(97%10);//输出7
console.log(100%10);//输出0
console.log(-97%10); //输出－7
console.log(97%-10); //输出7
%表示求两个数相除的余数，符号和被除数一致Comparison Operators
Comparison operator is the size comparison between the two data are equal, the finally obtained a Boolean value. Comparison operators include: == =>> = <<= === (congruent) == (not identical to)!!
var a=5;
var b=6;
console.log(a>b);//false
console.log(a<b);//tureComparison operators, note that the difference between == and ===, the two sides of the equal sign just compare values for equality, not only to compare both sides of the equal sign three values are equal, the type depends on whether both sides returns true, as only the type and value are the same and we have to
1.6.4 Exercise
A three-digit number in the input box, click on the button, the number of output bits for the result in the id of the div
1.7. Process control
1.7.1. What is Process Control?
Refers to the control flow of the program is running, the order of the individual instruction or operation evaluated. When a number of complex procedures by the basic structure, each structure may comprise a basic or multiple statements. Executing sequence program statements is called program structure, if the program statements are executed in the order written, is called sequential structure, if it is determined in accordance with whether a condition is called selection structure, if some statements to repeatedly performed a plurality of times, it is called the cyclic structure. Run the program sequence is controlled by three large structure with all the great statements are inseparable from the three large structures. Learn to three large structures, it is possible to write more complex a large program. Let us look at the reality of life in a large complex program. The employer saying, process control is that you can control the order of execution of the program, NOT true is executed, the Naju not be executed, NOT true once, NOT true executed multiple times
1.7.2. Conditions per -if statement
num1 = prompt("请输入数字")
if(num1 >= 60){
console.log("及格")
}
if(num < 60){
console.log("不及格")
}
用if...else 语句合并上面两句代码
num1 = prompt("请输入数字")
if(num1 >= 60){
console.log("及格")
}else{
console.log("不及格")
}1.7.3 Exercise
Implement a simple version of the calculator that supports arithmetic operations the user to enter the number 1 and number 2, choose what kind of operation performed, click the Calculate button to get the operation result
Screw classroom video lessons Address: http://edu.nodeing.com