阅读 60

Web前端基础(05)

####溢出设置overflow

  • visible(默认) 超出范围显示

  • hidden 超出范围不显示

  • scroll 超出范围滚动显示
    ###JavaScript

  • 作用:给页面添加动态效果

  • 和Java没有任何关系,只是为了蹭热度

  • 语言特点:

    1. 属于脚本语言,不需要编译直接解析执行
    2. 基于面向对象
    3. 属于弱类型语言 int x = 10; String s = “abc”; 弱类型 var x = 10; var s = “abc”;
    4. 安全性高,JavaScript语言只能访问浏览器内部的数据,浏览器以外的数据不允许访问
    5. 交互性高,因为JS语言可以嵌入到html页面中直接和用户进行交互
      ###如何在html页面中引入JavaScript
  1. 内联:在标签的事件属性中添加js代码,当事件触发时执行js代码
  2. 内部:在html页面的任意位置添加script标签,标签体内写js代码,当页面加载时执行
  3. 外部:在单独的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中只有对象类型

  • 几种常见的对象类型:

    1. 数值:number 相当于java中所有数值类型的综合 var x=18; var y = 18.5;
    2. 字符串:string 可以用单引号或双引号赋值 var s = “abc”/‘abc’;
    3. 布尔值:boolean true/false
    4. 未定义:undefined 当变量只声明不赋值时 此时变量的类型为未定义类型.
    5. 自定义: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 方法名(参数列表){方法体}

  • 如何声明常见的四种方法:

  1. 无参无返回值
  2. 无参有返回值
  3. 有参有返回值
  4. 有参无返回值
  • js中有三种声明方法的格式:
  1. function 方法名(参数列表){方法体} **********
  2. var 方法名 = function(参数列表){方法体}
  3. var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
    ###和页面相关的方法
  4. 通过元素的id 获取元素对象
    var d = document.getElementById(“d1”);
  5. 获取和修改元素的文本内容
  • 获取: d.innerText;
  • 修改: d.innerText=“xxx”;
  1. 获取和修改文本框的值
  • 修改: input.value=“abc”;
  • 获取: input.value;
  1. 获取和修改元素的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>
复制代码

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

文章分类
前端
文章标签