####溢出设置overflow
- visible(默认) 超出范围显示
- hidden 超出范围不显示
- scroll 超出范围滚动显示
###JavaScript - 作用:给页面添加动态效果
- 和Java没有任何关系,只是为了蹭热度
- 语言特点:
- 属于脚本语言,不需要编译直接解析执行
- 基于面向对象
- 属于弱类型语言 int x = 10; String s = “abc”; 弱类型 var x = 10; var s = “abc”;
- 安全性高,JavaScript语言只能访问浏览器内部的数据,浏览器以外的数据不允许访问
- 交互性高,因为JS语言可以嵌入到html页面中直接和用户进行交互
###如何在html页面中引入JavaScript
- 内联:在标签的事件属性中添加js代码,当事件触发时执行js代码
- 内部:在html页面的任意位置添加script标签,标签体内写js代码,当页面加载时执行
- 外部:在单独的js文件中写js代码,在html页面中通过script标签的src属性引入,页面加载时执行
###语法
- 包括: 变量 数据类型 运算符 各种语句 方法 面向对象
###变量声明和赋值 - JavaScript属于弱类型语言
- java: int x = 10; String s = “abc”; x=“abc”;(报错,类型不匹配) Person p = new Person();
- JS: var x = 10; var s = “abc”; x=“abc”;不报错 var p = new Person();
###数据类型 - JavaScript中只有对象类型
- 几种常见的对象类型:
- 数值:number 相当于java中所有数值类型的综合 var x=18; var y = 18.5;
- 字符串:string 可以用单引号或双引号赋值 var s = “abc”/‘abc’;
- 布尔值:boolean true/false
- 未定义:undefined 当变量只声明不赋值时 此时变量的类型为未定义类型.
- 自定义:object Person Car Hero
###运算符 + - * / % > < >= <= = != ==
- 和Java大体相同
==和===,==是先统一两个变量的类型再比较值,===先比较类型如果类型相等再比较值
"666"==666 true; "666"===666 false- 除法运算: 会根据结果自动转换整数或小数 ,
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 变量; 作用: 获取变量的类型
###语句 if else for while switch case - for循环中 int i 改成 var i
###方法 - java: public 返回值类型 方法名(参数列表){方法体}
- js : function 方法名(参数列表){方法体}
- 如何声明常见的四种方法:
- 无参无返回值
- 无参有返回值
- 有参有返回值
- 有参无返回值
- js中有三种声明方法的格式:
-
function 方法名(参数列表){方法体} **********
-
var 方法名 = function(参数列表){方法体}
-
var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
###和页面相关的方法 -
通过元素的id 获取元素对象
var d = document.getElementById(“d1”); -
获取和修改元素的文本内容
- 获取: d.innerText;
- 修改: d.innerText=“xxx”;
- 获取和修改文本框的值
- 修改: input.value=“abc”;
- 获取: input.value;
- 获取和修改元素的html内容
- 获取:
d.innerHTML - 修改:
d.innerHTML="<h1>abc</h1>";
###NaN
- Not a Number: 不是一个数.
- isNaN(x) 判断x是否是NaN 返回值true代表是NaN(不是数) 返回值false代表不是NaN(是数)
练习:
1.溢出方式
<!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>
显示效果:
2.引入方式
<!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>
显示效果:
3.方法声明
<!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>
运行效果:
4.页面相关方法
<!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>
显示效果:
5.平方练习
<!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.计算器
<!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.猜数字
<!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>
