####Overflow settings overflow
- visible (default) out of range display
- hidden does not display beyond the scope
- scroll Out of range scroll display
###JavaScript - Role: Add dynamic effects to the page
- It has nothing to do with Java, just to keep up the heat
- Language Features:
- Belongs to a scripting language, no need to compile and directly parse and execute
- Object-oriented
- Belongs to a weakly typed language int x = 10; String s = "abc"; weakly typed var x = 10; var s = "abc";
- High security, JavaScript language can only access data inside the browser, data outside the browser is not allowed to access
- High interactivity, because the JS language can be embedded in the html page to directly interact with the user
###How to introduce JavaScript in the html page
- Inline: Add js code to the event attribute of the label, and execute the js code when the event is triggered
- Internal: Add script tags anywhere on the html page, write js code in the tag body, and execute when the page loads
- External: write js code in a separate js file, import it through the src attribute of the script tag in the html page, and execute
### syntax when the page loads
- Including: Variable data type operator Various statement methods Object-oriented
###Variable declaration and assignment - JavaScript is a weakly typed language
- java: int x = 10; String s = "abc"; x = "abc"; (error, type mismatch) Person p = new Person();
- JS: var x = 10; var s = "abc"; x = "abc"; no error is reported var p = new Person();
###Data type - There are only object types in JavaScript
- Several common object types:
- Numerical value: number is equivalent to the comprehensive of all numeric types in java var x=18; var y = 18.5;
- String: string can be assigned with single or double quotes var s = "abc"/'abc';
- Boolean value: boolean true/false
- Undefined: undefined When the variable is only declared but not assigned, the type of the variable is undefined.
- Customization: object Person Car Hero
###Operator+-* /%> <>= <= = != ==
- Same as Java
==And===, it==is to unify the types of the two variables first and then compare the values.===If the types are equal, then compare the values
"666"==666 true; "666"===666 false- Division operation: will automatically convert integers or decimals according to the result,
java: int x = 5; int y=2; x/y=? 2
js: var x=5; var y=2; x/y=? 2.5 x= 6 x/y=? 3 - typeof variable; Function: Get the type of the variable
###Statement if else for while switch case - Change int i to var i in the for loop
###Method - java: public return value type method name (parameter list) {method body}
- js: function method name (parameter list) {method body}
- How to declare the four common methods:
- No parameters and no return value
- Return value without parameters
- Parameter and return value
- No return value
- There are three types of declaration methods in js:
-
function method name (parameter list) {method body} **********
-
var method name = function(parameter list){method body}
-
var method name = new Function("parameter 1", "parameter 2", "method body");
###Methods related to the page -
Get the element object by the id of the element
var d = document.getElementById("d1"); -
Get and modify the text content of an element
- Get: d.innerText;
- Modify: d.innerText="xxx";
- Get and modify the value of the text box
- Modify: input.value="abc";
- Get: input.value;
- Get and modify the html content of the element
- Obtain:
d.innerHTML - modify:
d.innerHTML="<h1>abc</h1>";
### NaN
- Not a Number: Not a number.
- isNaN(x) Determine whether x is NaN. The return value of true means it is NaN (not a number). The return value of false means it is not NaN (is a number)
Exercise:
1. Overflow method
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid blue;
/* visible(默认)
hidden超出隐藏 scroll超出滚动*/
overflow:scroll;
}
</style>
</head>
<body>
<div>
<img src="../2.jpg" >
</div>
</body>
</html>
Display effect:
2. Introduction method
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 内联引入方式 -->
<input type="button" value="按钮" onclick="alert('内联引入成功!')"/>
<!-- 内部引入方式 -->
<script type="text/javascript">
alert("内部引入成功!")
</script>
<!-- 引入外部js文件 -->
<script src="my.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Display effect:
3. Method declaration
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//js中注释和java类似 //单行注释/* */多行注释
// 声明无参无返回值方法
function fn1(){
alert("fn1执行!");
}
//调用方法 和java一样
// fn1();
// 声明有参无返回值
function fn2(name,age){
alert(name+":"+age);
}
// fn2("刘备",18)
// 声明无参有返回值方法
function fn3(){
return "疫情赶紧过去吧!";
}
var s = fn3();
console.log(s) ;
// 声明有参有返回值
function fn4(x,y){
return x*y;
}
var result = fn4(5,9);
console.log(result);
// 第二种声明方法的格式
var fn5 = function(){
alert("fn5执行!");
}
fn5();
</script>
</body>
</html>
Operation effect:
4. Page related methods
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="按钮" onclick="myfn()"/>
<input type="text" id="i1"/>
<div id="d1">这是div</div>
<script type="text/javascript">
//点击按钮时执行此方法
function myfn(){
//通过元素id获取元素对象
var d = document.getElementById("d1");
// 获取div中的文本内容
// alert(d.innerText)
// d.innerText="修改完成!";
// 通过id得到文本框
var i = document.getElementById("i1")
// 修改文本框的值
// i.value="abc";
// 把文本框里面的值取出给到div
d.innerText = i.value;
}
</script>
</body>
</html>
Display effect:
5. Square exercise
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="i1"/>
<input type="button" value="平方" onclick="myfn()"/>
<div id="d1">
</div>
<script type="text/javascript">
function myfn(){
var d = document.getElementById("d1");
var i = document.getElementById("i1");
if(isNaN(i.value)){
/* 是NaN不是数 */
d.innerText="输入错误!";
}else{
/* 是数 */
d.innerText = i.value*i.value;
}
}
</script>
</body>
</html>
6. Calculator
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="i1" />
<input type="text" id="i2" /><br>
<input type="button" value="加" onclick="fn5(1)" />
<input type="button" value="减" onclick="fn5(2)" />
<input type="button" value="乘" onclick="fn5(3)" />
<input type="button" value="除" onclick="fn5(4)" />
<hr />
<div id="mydiv">
</div>
<script type="text/javascript">
function fn1() {
/* var d = document.getElementById("mydiv");
var i1 = document.getElementById("i1");
var i2 = document.getElementById("i2"); */
mydiv.innerText = i1.value * 1 + i2.value * 1;
}
function fn2() {
mydiv.innerText = i1.value - i2.value;
}
function fn3() {
mydiv.innerText = i1.value * i2.value;
}
function fn4() {
mydiv.innerText = i1.value / i2.value;
}
function fn5(x) {
//判断是否是数值
if (isNaN(i1.value) || isNaN(i2.value)){
mydiv.innerText = "输入错误";
return; //结束当前方法
}
switch (x) {
case 1:
mydiv.innerText = i1.value*1 + i2.value*1;
break;
case 2:
mydiv.innerText = i1.value-i2.value;
break;
case 3:
mydiv.innerText = i1.value*i2.value;
break;
case 4:
mydiv.innerText = i1.value/i2.value;
break;
}
}
</script>
</body>
</html>
7. Guess the number
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" placeholder="请输入0- 100之间的整数" id="i1"/>
<input type= "button" value="猜一猜" onclick="myfn()"/>
<div id= "mydiv">
</div>
<script type="text/javascript">
// 生成0-100的随机数
var x = parseInt(Math.random()*100);
console.log(x);
/* 实现步骤：
1.给按钮添加点击事件，点击时调用myfn方法
2.声明myfn方法,在方法中判断文本框里面的值和x的关系,如果大于x
在mydiv里面显示猜大了, 如果小于x显示猜小了,else mydiv中显示
恭喜你猜对了，
*/
var count=0;
function myfn(){
count++;
if(i1.value>x){
mydiv.innerText="猜大了!";
}else if(i1.value<x){
mydiv.innerText="猜小了!";
}else{
mydiv.innerText="恭喜你第"+count+"次猜对了!";
// 重置数据
count = 0;
x = parseInt(Math.random()*100)
}
}
</script>
</body>
</html>
