2021 夏令营 笔记

前言

游学编程夏令营笔记

HTML

一. 标签🏷

列表标签分为三种。

无序列表 ul 无序列表中的每一项是li
英文单词解释如下： ul：unordered list，“无序列表”的意思。 li：list item，“列表项”的意思。

1. li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别 的东西，只能有li。
2. 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增 加无序列表的“语义”的。
3. type=“属性值”。属性值可以选： disc(实心原点，默认)，square(实心 方点)，circle(空心圆)。
4. 项目符号可以是图片，但是通过CSS设置。取消项目符号代码list-style-type: none;
   

有序列表 ol里面的每一项是 li
英文单词：Ordered List。
属性： type=“属性值”。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属 性表示从几开始。

定义列表 dl
定义列表的作用非常大。
6. dl英文单词：definition list，没有属性。dl的子元素只能是dt和dd。
7. dt：definition title 列表的标题，这个标签是必须的
8. dd：definition description 列表的列表项，如果不需要它，可以不加
9. dd是描述dt的。 定义列表用法非常灵活，可以一个dt配很多dd：
10. 备注：dt、dd只能在dl里面；dl里面只能有dt、dd。

colspan标签

语法：td colspan=“value”
设置单元格可横跨的列数。
注释：colspan=“0” 指示浏览器横跨到列组的最后一列。

<tr align="center">
<td colspan="5">
	<input type="button" value="提交订单" onclick="window.alert('订单提交成功')" />
	<input type="button"value="全屏显示"onclick="fullScreen()" />
</td></tr>

align=“center” 设置为 居中对齐，input type="button"类似于button标签。

input标签

1. type=“text”：文本输入框

<tr>
	<td>姓名</td>
	<td><input type="text" name="name" placeholder="姓名" /> </td>
</tr>

2. type=“button”：点击按钮

<tr align="center">
<td colspan="5">
	<input type="button" value="提交订单" onclick="window.alert('订单提交成功')" />
	<input type="button"value="全屏显示"onclick="fullScreen()" />
</td></tr>

3. type=“radio”：单选框，在多个选项中只能选择一个。（注：要给单选框加入相同的name属性）

<tr>
	<td>性别</td>
	<td><input type="radio" name="gender" value="male" checked="">男
	<input type="radio" name="gender" value="female" >女</td>
</tr>

4. type=“checkbox”：复选框，在多个选项中可以进行多项选择。（注：单选框同样要加入相同的name属性）

<tr>
	<td>爱好</td>
	<td><input type="checkbox" name="habby" value="sport" >体育
	<input type="checkbox" name="habby" value="music" >音乐
	<input type="checkbox" name="habby" value="art" >美术</td>
</tr>

5. type=“file”：点击在本地选择文件上传到网络上。

<tr>
	<td>个人经历</td>
	<td><textarea name="text"rows="8"cols="20" placeholder="请输入个人经历，可上传附件"></textarea></td>
	<td><input type="file" name="personal"/></td>
</tr>

textarea 文本域 设置行列 row,cols。

6. type=“password”：常见的密码输入框，输入的字体会被字符代替。（这里还可以加入maxlength属性规定可输入字符的长度）

<tr>
	<td>密码</td>
	<td><input type="password"name="pwd" placeholder="由8-11位字符组成"/></td>
</tr>

属性 size 按可见字符数设置宽度，input type=“password” value=“12345678901234” size=“5”
属性 maxlength 规定最大可输入字符数，input type=“password” maxlength=“10” value=“12345678901234”

7. type=“date”：带有日期表，可以选择年月日。type=‘date’ //显示年、月、日
   type=‘month’//显示年、月。type=‘week’//显示年、周。
   type=‘datetime-local’//显示年、月、日、时、分。

<tr>
	<td><input type="date" value="时间" />时间</td>
</tr>

8. 其它

<tr>
	<td><input type="submit" value="提交" /></td>
	<td><input type="reset" value="重置"/></td>
</tr>

JS

基础学习

语句

输出语句

1. 输出到浏览器，弹出窗口
   alert("嘿，真饿了“）;
2. 输出到浏览器页面
   document.write（“好饿好饿”);
3. 向控制台输出一个内容
   console.log(“你猜猜我在哪”);

编写位置

虽然可以写在标签的属性中，但是他们属于结构和行为耦合，不方便维护，不推荐使用

1. 可以将js代码编写到标签的onclick属性中当我们点击按钮时，js代码才会执行

<button onclick="alert('讨厌，你点我干嘛~~');">点我一下</button>

2.可以将js代码写在超链接的href属性中，点击超链接将执行代码。

<a href="javascript:alert('让你点你就点！');">你也点我一下</a>

3. 将js代码写在script标签中去
4. 写在外部的js文件中通过script标签引入。可以在不同的页面中同时使用，也可以利用到浏览器的缓存机制。

<script type="text/javascript" src="文件路径.js"</script>

字面量和变量

String字符串

1. 需要用引号引起来
2. 双引号，单引号都可以
3. 引号不能嵌套，双引号里面不能放双引号，单引号里面不能放单引号。

Number

1. Infinity 表示正无穷
2. -Infinity表示负无穷
3. NaN 是一个特殊的数字。表示Not A Number
4. typeof 返回数据类型
5. 如果用js进行浮点数运算可能得到一个不精确的值
6. parseInt() 可以将一个字符串中的有效的整数内容取出来，也可以将数值取整
7. parseFloat()和parseInt()相似，可以取出小数
8. 进制，二进制0b开头，八进制0开头，十六进制0x开头

运算符

1. typeof 将数据类型以字符串形式返回
2. 含有字符串的加法，任何值和字符串相加，都会转换为字符串，并进行拼串操作。
3. 可以将任意的数据类型+“”即可将其转换成string。
4. 其余数据运算情况都自动转换为number
5. 可以通过为一个数据直接在前面加+或者-0 或*1 或/1来将其转换为number
6. 表达式++a和a++的共同点是：都立即使原变量的值加一，区别在与表达式++a的值等于原变量的新值，表达式a++的值等于原变量的值。

日期的使用

例题一：制作12小时的时钟

<script>
		var mydate=setInterval("time()",1000)//每秒调用一次
		function time(){
			var today=new Date;
			var year=today.getFullYear();//年份
			var month=today.getMonth()+1;//月份
			var date=today.getDate();//日期
			var hour=today.getHours();//小时
			var min=today.getMinutes();//分钟
			var sec=today.getSeconds();//秒
			var day=today.getDay();//星期
			//通过id获取到mydate
			var mydate=document.getElementById("mydate");
			if(hour>12){   //判断小时是否大于12
			        hour=hour-12
			      }
		var weekday=0
		switch(today.getDay()){
			case 0:
			weekday="星期日"
			break;
			case 1:
			weekday = "星期一";
			break;
			case 2:
			weekday = "星期二";
			break;
			case 3:
			weekday = "星期三";
			break;
			case 4:
			weekday = "星期四";
			break;
			case 5:
			weekday = "星期五";
			break;
			case 6:
			weekday = "星期六";
			break;
		}
		mydate.innerHTML=year+"年"+month+"月"+date+"日"+"&nbsp;&nbsp;&nbsp;&nbsp;"+weekday+"&nbsp;&nbsp;&nbsp;&nbsp;"+hour+":"+min+":"+sec
		}
		</script>
	</head>
	<body onload="time()">
	<div id="mydate"></div>
	</body>

setInterval()： 间隔指定的毫秒数不停地执行指定的代码，定时器
clearInterval()： 用于停止 setInterval() 方法执行的函数代码
使用方法：setInterval(code，millisec)，两个参数都是必须的，第一个参数为要调用的函数或要执行的代码串。第二个参数为周期性执行或调用 code 之间的时间间隔，以毫秒计。
clearInterval(id_of_setinterval)，参数是必须的，为setInterval返回的ID值

select,option标签

1 检测是否有选中

if (objSelect.selectedIndex > -1) {
//说明选中
} else {
//说明没有选中
}

2.动态创建select

function createSelect(){
var mySelect = document.createElement("select" );    
mySelect.id = "mySelect" ;    
document.body.appendChild(mySelect);    
}

3.添加选项option

function addOption(){
//根据id查找对象，    
var obj=document.getElementById('mySelect');
//添加一个选项    
obj.add(new Option("文本" ,"值" ));    
}

4.删除所有选项option

function removeAll(){    
var obj=document.getElementById('mySelect');
obj.options.length=0;
}

5.删除一个选项option

function removeOne(){    
var obj=document.getElementById('mySelect');
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;    
obj.options.remove(index);    
}

6.获得选项option的值

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;

7.获得选项option的文本

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;

8.修改选项option

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本" ,"新值" );

9.删除select

function removeSelect(){    
var mySelect = document.getElementById("mySelect" );    
mySelect.parentNode.removeChild(mySelect);    
}