跟随小破站学习java web第二天

最新推荐文章于 2024-09-12 16:25:48 发布

Mars_LJ

最新推荐文章于 2024-09-12 16:25:48 发布

阅读量119

点赞数

分类专栏： java web 文章标签： css javascript

本文链接：https://blog.csdn.net/Mars_LJ/article/details/107395860

版权

java web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS样式

<link href="demo.css" rel="stylesheet">

<style type="text/css">
	/* p{color:red} */
</style>

<body>
	<!-- css:cascading style sheets(层叠样式表)
			* 语法:选择器{声明;声明2}
			* 选择器
				标签选择器:p|h2
				类选择器:
					定义: .类名{}
					调用: class="类名"
				ID选择器:
					定义: #ID名{}
					调用: id="ID名"
			* 颜色值
				* red|green|blue
				* #ff0000 = #f00 = red 取值范围:0-ff
				* rgb(255,0,0) 取值范围:0-255
			* css嵌入方式
				* 行内
					style属性
					eg:style="color:blue"
				* 内部
					style标签
					eg:
					   <style type="text/css">
						 p{color:red}
					   </style>
				* 外部
					定义: xxx.css文件
					使用: <link href="demo.css" rel="stylesheet">
				* 优先级: 就近原则
					行内>内部>外部
	 -->
	<p style="color:blue">师傅领进门，修行在个人</p>
	
</body>

注意:Id选择器只能唯一使用,但类选择器可以重复使用!

注意:使用外部定义css时,调用时link标签内需定义rel属性!

注意:当标签使用样式时,需注意就近原则!

JavaScript

<script type="text/javascript">
	//借助window.onload事件,在这个页面加载完成后执行程序代码
	window.onload = function(){
		//获取按钮对象
		var btnEle = document.getElementById("btnId");
		//给按钮对象绑定单击响应函数
		btnEle.onclick = function(){
			//弹出警告框
			alert("Hello");
		};
	};
</script>

<body>
	<button id="btnId">SayHello</button>
</body>

<script type="text/javascript">
	
	/* 
	1.变量声明
		* js:是一种弱类型语言(对数据类型要求比较弱),也是一种动态类型语言。(运行期间可以任意赋值)
		* 语法:var i = 0;var s = "";
		
		java:int i = 0;String s = "";
	
	2.变量赋值
	
	3.变量严格区分大写小写 
	4.数据类型
		字符串(string),数字(number),布尔,数组,对象,Null,Undefined(只声明不赋值)
	*/
	var i = 200;
	var s = "sss";
	i = true;
	s2 = "aaa";
	var s3;
	alert(s3);
</script>

注意:js的弱类型,所有类型都是定义为var,且可以随时赋值,不赋值时也有显示,同时区分大小写!

<script type="text/javascript">
	/* 
		1.函数声明 
			* 使用function声明函数
				java:public void methodName(){}
			* 语法
				1.有名函数:function mName(){}
				2.匿名函数:function(){}
		2.函数调用 
		* js中调用函数时,不检查参数的匹配情况
			* 形参>实参
				* 实参为number型,返回:NaN
				* 实参为string型,返回值:+underfined
			* 形参<实参
				* 自动忽略后面多余的参数
		* NaN:not a number
		* 调用匿名函数
			1. window.onload = function(){}
			2. var fun = function(){}
	*/
	
	// function show(){
	//		alert("show()");
	//	}
	//	show();
		
	//	function add(i,j){
	//		return (i+j);
	//	}
	//	alert(add(1,2));
	
	var fun = function(){
		alert("dd");
	}
	window.onload = fun;
	
</script>

<script type="text/javascript">
	//在JavaScript中，函数也作为一种数据类型存在，而且是引用数据类型，函数名就是指向其内存空间地址的引用
	//在JavaScript中函数也是对象
	/*
		* 对象
		  * 在js中定义对象
		    1. var obj = new object();
			2. var jsonObj = {key:value1,key2:value2,key3:value3};
	*/
	
	var jo = {"name":"zs","age":18,"yOn":true};
	alert(jo.name);
	
// 	function methodName(){
// 		alert("methodName");
// 	}
// 	alert(methodName.name);

</script>

提出json的定义方式,后面详细介绍。

<script type="text/javascript">
	//借助window.onload事件,在这个页面加载完成后执行程序代码
	/*注意:
		* 函数调用时,fun与fun()的区别
			fun():直接执行函数
			fun:调用函数的引用
	*/
	window.onload = function(){
		//造地雷
		function dl(){
			alert("拜拜!");
		}
		//埋地雷
		var btnEle = document.getElementById("btnId");
		btnEle.onclick = dl;
		//触发陷阱
	};
</script>

<body>
	<button id="btnId">SayHello</button>
</body>

注意:事件的三步骤在触发事件时,留意方法的调用还是引用!

<script type="text/javascript" src="demo.js">
	/* window.onload = function(){
		var btnEle = document.getElementById("btnId");
		btnEle.onclick = function(){
			alert("dd");
		}
	} */
</script>

<body>
	<!-- 
		* js的嵌入方式
			1.行内js,写到标签的事件属性中：结构与行为相耦合，不建议使用
			2.内部js,写到script标签中，script标签放到head标签中，无法获取按钮对象
			3.外部js,引入外部的js文件
				* <script type="text/javascript" src="demo.js"></script>
				* 如果script标签中有src属性,此时该标签的作用为引入外部js,不能在该标签中书写js代码。
		* window.onload:当前文档完全加载后执行。
			完全:指的是包含图片,音频,视频等。
	 -->
<!-- 	<button id="btnId" onclick="alert('hello');">SayHello</button> -->
		<button id="btnId">SayHello</button>
</body>

<!-- <script type="text/javascript">
	var btnEle = document.getElementById("btnId");
	btnEle.onclick = function(){
		alert("dd");
	}
</script> -->

注意:当使用外部调用js文件时,可以通过增加js标签再添加样式,但此时的window.onload只能使用一次,若有两次则会产生错误!

注意:当调用内部js文件时,若没有书写window.onload,会导致页面无法找到btnId从而实现效果,解决办法是把js文件放置html标签后面,但与习惯相反,所以不常用!

Mars_LJ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跟随小破站学习java web第二天

CSS样式<link href="demo.css" rel="stylesheet"><style type="text/css"> /* p{color:red} */</style><body> <!-- css:cascading style sheets(层叠样式表) * 语法:选择器{声明;声明2} * 选择器标签选择器:p|h2 类选择器: 定义: .类名{} 调用:
复制链接

扫一扫

专栏目录