Welcome to Xin YAO's blog

JS中的事件处理

2018-09-26

Web

一、JavaScript中的事件处理

1、在标签上使用onXXX属性来进行事件绑定（不推荐使用）

		<button onclick="sayHello()">按钮1</button>
		<script type="text/javascript">
			function sayHello(){
				alert("Hello!");
			}

2、通过代码获取标签绑定onXXX属性（不推荐使用）

		<button id="button1">按钮1</button>
		
		<script type="text/javascript">
			var button1 = document.getElementById("button1");
			button1.textContent = "点我呀！";
			button1.onclick = sayHello;
			function sayHello(){
				alert("Hello!");
			}
		</script>

3、通过diamante获取标签然后使用addEventListener绑定事件（推荐）

方法一：内部JS

		<button id="button1">按钮1</button>
		
		<script type="text/javascript">
			var button1 = document.getElementById("button1");
			//判断因为IE浏览器低版本不兼容
			if (button1.addEventListener){
				button1.textContent = "点我呀！";
				button1.addEventListener("click",sayHello);
				button1.addEventListener("click",sayGoodbye);
				button1.addEventListener("click",function(){
					button1.removeEventListener("click",sayHello); //移除事件监听
					button1.removeEventListener("click",sayGoodbye);
				})
			}else{ 
				//低版本IE浏览器使用的代码
				button1.attachEvent("onclick",sayHello);
				button1.attachEvent("onclick",sayGoodbye);
				button1.attachEvent("click",function(){
					button1.detachEvent("onclick",sayHello); //移除事件监听
					button1.detachEvent("onclick",sayGoodbye);
				})
			}

			function sayHello(){
				alert("Hello!");
			}
			function sayGoodbye(){
				alert("Goodbye！")
			}
		</script>

方法二：外部封装JS函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button id="button1">按钮1</button>
		
		<script src="js/new_file.js"></script>
		<script type="text/javascript">
			var button1 = document.getElementById("button1");
			// 绑定事件的回调函数（callback function）
			// 你知道事件发生的时候，但是不知道事件什么时候发生，只是进行绑定。
			bind(button1, "click", sayHello);
			bind(button1, "click", sayGoodbye);
			bind(button1, "click", function(){
				onbind(button1, "click", sayHello);
			})

			function sayHello(){
				alert("Hello!");
			}
			function sayGoodbye(){
				alert("Goodbye！")
			}
		</script>
	</body>
</html>

//js文件
function bind(elem, event, fn){
	if (elem.addEventListener){
		elem.addEventListener(event, fn);
	}else{
		elem.attachEvent("on" + event, fn);
	}
}

function onbind(elem, event, fn){
	if (elem.removeEventListener){
		elem.removeEventListener(event, fn);
	}else{
		elem.detachShader("on" + event, fn);
	}
}

在事件回调函数中获取事件源（易错点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="buttons">
			<button>button1</button>
			<button>button2</button>
			<button>button3</button>
			<button>button4</button>
			<button>button5</button>
		</div>
		
		<script src="js/javascript.js"></script>
		<script type="text/javascript">
			var buttons = document.querySelectorAll("#buttons>button");
			for (var i = 0; i<buttons.length; i+=1){
			//如果希望在事件回调函数中获得事件源
			//应该通过事件对象的target属性去获取事件源		
				bind(buttons[i], "click", function(evt){   
					//取事件源不能用下标去获取
					evt = evt || window.event; //兼容ie代码
					evt.target.textContent = "欧耶";
				})
			}

		</script>
	</body>
</html>

二、事件回调函数和事件对象

绑定事件监听器的函数都需要传入事件的回调函数，程序员因为事件发生的时候要做什么，但是不知道什么时候发生，所以传入一个函数在将来发生事件的时候，由事件调用，这种就叫回调函数。

回调函数的第一个参数代表事件对象（封装了和事件相关的所有信息），对于低版本的IE，可以通过window.event来获取事件对象。

事件对象的属性和方法： 1、target / srcElement(IE) - 事件源（引发事件的标签）

2、阻止事件的默认行为，比如：a标签 –> preventDefault()

					if (evt.preventDefault){
						evt.preventDefault();
					}else{
						evt.returnValue = false; //兼容ie
					}

3、事件的捕获和冒泡 事件冒泡内 –> 外（子代–>父代）（默认 false）事件捕获外 –> 内（true）

停止事件传播（捕获和冒泡） – stopPropagation() IE浏览器只有冒泡 – cancelBubble = true

猜数字游戏（网页版）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
	<body>
	
		<input type="number" id="input" placeholder="猜0~10的数字"/>
		<input type="button" id="confirm" value="确定">	
		
		<script type="text/javascript">
			var count = 0;
			var num = parseInt(Math.random()*11);
			var guess = document.getElementById("input");
			var confirm = document.getElementById("confirm");
			confirm.addEventListener("click", guess_number);
			// 判断回车
			guess.addEventListener("keydown",function(evt){
				evt = evt || window.event;
				if (evt.keyCode == 13 || evt.which == 13){
					guess_number();
				}
			})
			
			function guess_number(){
				var thyAnswer = parseInt(guess.value);
				count += 1;
				if (thyAnswer > num){
					alert("大了大了~");
				}else if(thyAnswer < num){
					alert("小了小了~");
				}else if(thyAnswer == num){
					alert("恭喜你猜对了，一共猜了"+count+"次！");
					confirm.disabled = true; //禁止按钮
					guess.disabled = true;  //禁止输入框
				}
				guess.value = "";  //清除文本框内容
				guess.focus();  //获得焦点
	
			}
		</script>
	</body>
</html>

效果：

三、JS中创建对象常用方法

1、

2、

练习

一.图片3s自动切换，鼠标事件触发停止切换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#span{
				color: #008000;
				text-align: center;
				font-size: 20px;
			}
			#pic{
				margin-left: 120px;
			}
		</style>
	</head>
	<body>
		<p id="span">每3s切换一次图片,鼠标放上停止切换，离开时继续切换</p><br/>
		<img src="img/slide-1.jpg" id="pic"/>
		
		<script type="text/javascript">
			var slipeImg = document.getElementById("pic");
			var timer = setInterval(slipe,3000);
			var count = 1;
			slipeImg.addEventListener("mouseover",overSlipe);
			slipeImg.addEventListener("mouseout",outSlipe);
			
			function overSlipe(){
				clearInterval(timer);
			}
			function outSlipe(){
				timer = setInterval(slipe,3000);
			}
			function slipe(){
				if (count == 4){
					count = 1
					slipeImg.src="img/slide-" + count + ".jpg";
				}else{
					count += 1;
					slipeImg.src="img/slide-" + count + ".jpg";
				}
			}
		</script>
	</body>
</html>

效果：

二、实现上题的功能的前提下，点击小图标可以切换到对应的图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#pic{
				margin-left: 450px;
			}
			#pic_small{
				margin-left: 460px;	
			}
		</style>
	</head>
	<body>
		
		<img src="img/pic1.jpg" id="pic"/>
		<div id="pic_small">
			<img src="img/thumb-1.jpg" id="small1"/>
			<img src="img/thumb-2.jpg" id="small2"/>
			<img src="img/thumb-3.jpg" id="small3"/>
		</div>
		
		<script type="text/javascript">
			var slipeImg = document.getElementById("pic");
			var timer = setInterval(slipe,3000);
			var count = 1;
			slipeImg.addEventListener("mouseover",overSlipe);
			slipeImg.addEventListener("mouseout",outSlipe);
			
			var thumbs = document.querySelectorAll("#pic_small>img");
			thumbs[0].addEventListener("click",fun1);
			thumbs[1].addEventListener("click",fun2);
			thumbs[2].addEventListener("click",fun3);


			function fun1(){
				slipeImg.src="img/pic1.jpg";
			}
			function fun2(){
				slipeImg.src="img/pic2.jpg";
			}	
			function fun3(){
				slipeImg.src="img/pic3.jpg";
			}
			
			function overSlipe(){
				clearInterval(timer);
			}
			function outSlipe(){
				timer = setInterval(slipe,1000);
			}
			function slipe(){
				if (count == 3){
					count = 1
					slipeImg.src="img/pic" + count + ".jpg";
				}else{
					count += 1;
					slipeImg.src="img/pic" + count + ".jpg";
				}
			}
		</script>
	</body>
</html>

效果：

Read All

Window对象

2018-09-25

Web

Window

随机数产生方式 parseInt(Math.random()*100 + 1)//parseInt取整 Math.random()取0-1(不包括1)的随机数

window对象

//window可以不写，默认为window对象。
alert() / prompt() / confirm() / close()
警告框 / 输入框 / 确认框 / 关闭
window.setInterval(delayGo,5000);//setInterval周期执行，时间单位毫秒。
window.setTimeout(delayGo,1000); //只调用一次，但是一般用于函数递归，setTimeout更加灵活。
clearInterval()  /  clearTimeout() //清除计时器

window.document - 文档对象
window.location - 浏览器地址栏
//location.hostname 返回 web 主机的域名
//location.pathname 返回当前页面的路径和文件名
//location.port 返回 web 主机的端口 （80 或 443）
//location.protocol 返回所使用的 web 协议（http:// 或 https://）
window.history - 历史记录
//history.back() - 与在浏览器点击后退按钮相同
//history.forward() - 与在浏览器中点击向前按钮相同
//history.go(n) - 前进或者后退n步
window.navigator - 浏览器
//navigator.appCodeName - 浏览器代号
//navigator.appName - 浏览器名称
// navigator.appVersion - 浏览器版本
window.screen - 屏幕
//screen.availWidth - 可用的屏幕宽度
//screen.availHeight - 可用的屏幕高度
//screen.colorDepth - 色深
//screen.pixelDepth - 分辨率

拿到html元素(document对象)

document.querySelector("#welcome")//通过选择器拿元素
document.querySelectorAll() //选择器拿到多个元素，返回列表
document.getElementById()//根据id拿元素
document.getElementsByClassName()//根据类名拿元素，返回为列表
document.getElementsByTagName()//根据标签名拿元素，返回为列表

写入到html元素

//div -- 特定标签对应的变量
div.innerHTML //能解释 html 代码
div.textContent //里面只能放文本，代码原样输入

其他知识

Math.random（）随机产生0~1的随机数（前闭后开）
parseInt（）取整
parseFloat（）取小数

使用匿名函数并且调用它的方法

一、网页上显示当前时间

		<div id="time"></div>
		
		<script type="text/javascript">
			var days = ["日","一","二","三","四","五","六"];
			function showTime(){
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var date = now.getDate();
				var hour = now.getHours();
				var minute = now.getMinutes();
				var second = now.getSeconds();
				var day = now.getDay();
				var div = document.getElementById("time");  //得到id为指定的div标签
				div.innerHTML = year + "年" + 
					(month < 10 ? "0":"") + month + "月" + 
					(date < 10 ? "0":"")+ date + "日&nbsp;" +
					(hour < 10 ? "0":"")+ hour + ":" +
					(second < 10 ? "0":"")+ second + "&nbsp;星期" + days[day];
				//div.innerHTML 标签里面的html代码
				//div.textContent 里面只能放文本，代码原样输入
			}
			showTime()  //网页开始没有显示时间，先执行一遍。
			window.setInterval(showTime,1000) //设置时间周期，每1000毫秒执行一次
		</script>

效果：

二、网页跑马灯

		<h1 id="welcome">欢迎来到千峰教育成都校区Python就业班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
		<script type="text/javascript">
			var str1 = document.getElementById("welcome")
//			document.querySelector("#welcome")//通过选择器拿元素
//			document.querySelectorAll() //选择器拿到多个元素，返回列表
//			document.getElementById()//根据id拿元素
//			document.getElementsByClassName()//根据类名拿元素，返回为列表
//			document.getElementsByTagName()//根据标签名拿元素，返回为列表
			function showStr(){
				var str = str1.textContent;
				str = str.substring(1) + str.charAt(0);//substring-取字串  charAt-取字符
				str1.innerHTML = str;
			}
			showStr();
			window.setInterval(showStr,800);
		</script>

效果：

三、网页延时跳转

		<h2><span id="counter" >5</span>秒以后自动跳转到百度……</h2>
		<script type="text/javascript">
			var countdown = 5;
			var span = document.getElementById("counter");
			function delayGo(){
				countdown -= 1;
				if (countdown == 0){
					location.href = "http://www.baidu.com";
				}else{
					span.textContent = countdown;
					setTimeout(delayGo,1000); //只调用一次，所以重新调用（setTimeout更加灵活）
				}
				
			}
			window.setTimeout(delayGo,1000); //setTimeout只执行一次
//			window.setInterval(delayGo,5000);//setInterval周期执行
		</script>

效果：

练习

制作一个程序，随机抽取班级名单，已经抽取到的同学不会继续会抽取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#name{
				text-align: center;
				height: 250px;
				width: 600px;
				line-height: 250px;
				color: darkgoldenrod;
				font-size: 90px;
				background-color: #4169E1;
				margin: 170px auto 20px auto;
			}
			#begin{
				height: 80px;
				width: 170px;
				color:crimson;
				background-color:darkgrey;
				font-size: 50px;
				display: block;
				margin: 0px auto;
			}
		</style>
	</head>
	
	<body>
		<div id="name">点击"开始"</div>
		<button onclick="begin()" id="begin">开始</button>
		
		<script type="text/javascript">
			var namelist = ["曹晓芹","吕耐芯","魏世强","樊振霖","何羽","龙汉","吴亮","邓森中",
			"冉钊","曾德浴","李萌","江秀成","李祥","王磊","刘彦材","陈虹州","唐宏进","王建平",
			"李俊橙","于梦娇","王龙","刘诗意","殷安好","刘欢","任思宇","廖鸿业","吕皓洁",
			"李飞江","巫岷骏","张坤","唐小富"];
			var name_now = document.getElementById("name");
			var count = 0;
			function getName(){
				var num = parseInt(Math.random()*namelist.length);
				if (count > 400){
					name_now.textContent = namelist[num];
					count = 0;
					namelist.splice(num,1);
				}else{
					name_now.textContent = namelist[num];
					count += 10;
					window.setTimeout(getName,count);
				}
				if (!namelist.length){
					window.alert("全部随机完，已进行复位~")
					namelist = ["曹晓芹","吕耐芯","魏世强","樊振霖","何羽","龙汉","吴亮","邓森中",
					"冉钊","曾德浴","李萌","江秀成","李祥","王磊","刘彦材","陈虹州","唐宏进","王建平",
					"李俊橙","于梦娇","王龙","刘诗意","殷安好","刘欢","任思宇","廖鸿业","吕皓洁",
					"李飞江","巫岷骏","张坤","唐小富"];
				}
			}
			
			function begin(){
				window.setTimeout(getName,count);	
			}
			
			
		</script>
	</body>
</html>

效果：

Read All

Markdown Beginner

2018-09-25

Xin YAO

Markdown

前言
- Tools
Markdown: Syntax
- 目录
- 标题
- 列表
- 引用
- 图片
- 链接
- 索引链接
- 本身就是链接
- 分割线
- 表格
- 代码块
- 转义
- Others
Reference

前言

阶段性总结有利于精确自己的目标, 以及为后续的想法开辟空间.

因此开始有必要整理记录.

但是因为没必要像写paper那样规范使用latex, 因此就选择了Markdown.

Tools

Windows - MarkdownPad

Github Pages - (If you have one)

Markdown: Syntax

标题

# content
## content
### content
......

一共可以设置六级标题

列表

无序

* 1
* 2
* 3 * 1 * 2 * 3

有序

1
2
3 1. 1 2. 2 3. 3

嵌套列表

- AAA
  + A
    - a
      1. contentA
      2. contentB

AAA
- A
  - a
    1. contentA
    2. contentB

引用

> contentA
  >> contentB

contentA

contentB

之后的文本内容需要插入空行

图片

！[icon](link to the picture)

链接

[content](link to the content)

索引链接

[content][1]
[1]:Url [content][1] [1]:Url

本身就是链接

<url>

https://xinyao1994.github.io/

分割线

***
---

表格

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

代码块

``` [python]
@requires_authorization
def add(a, b): # add a and b
    return a+b
class TA:
```

@requires_authorization
def add(a, b): # add a and b
	return a+b
class TA:

or 每行文字前加4个空格或者1个Tab

转义

Others

粗体

**content** **content**

__content__ __content__

斜体

*content* *content*

_content_ _content_

字体, 字号, 和颜色

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="Verdana">I like Verdana format</font>

我是黑体字我是微软雅黑 I like Verdana format

Reference

Read All

Git Beginner

2018-09-25

Xin YAO

git
What is a git
```
 git (a) 帮助我们进行代码的版本控制，我于2015/10/1花费一天时间学习一个关于git的视频,然后再参考几篇博客,将git的使用方法全部弄清楚。let's begin!
```
##Preparation

History
1. *SCCS Source Code Control System *
  - 1972， closed source, free with Unix
2. *RCS Revision Control System *
  - 1982， open source.
3. *CVS Concurrent Versions System *
  - 1986 - 1990, open source
4. *SVN *
  - 2000, open source
5. BitKeeper SCM
  - distributed version
6. *GIT *
  - github come out
    Install
    
    参考官网的安装方法 —— [git web]
7. download the tar.gz or some package[your linux]
8. tar zxvf *.tar.gz
9. /configure
10. make && make install
11. finish. or you can try:
  - apt-get install git
  - yum install -y git
  - pacman -S git ###configuration
12. git config –global user.name [your name]
13. git config –global user.email [your email]
14. git config –global core.editor “vim”
15. git config –global color.ui true
16. use bash config
  - wget https://github.com/git/git/raw/master/contrib/completion/git-completion.bash * ls * mv git-completion.bash ~/.git-completion.bash * add to .bashrc that if exist this bash, source it.
17. help
  Begin
  
  init the git
18. mkdir dir1
19. cd dir1
20. git init
21. add one file (make change)
22. git add . (add change)
23. git commit -m “some word” (commit change)
24. git log -n/ –since/ –until/ –grep
  stream
  
  working -add file- staging index -commit- repositiry
File Operations

Add (git status to check)
- git add .
- git commit -m “”
- git diff
- git commit -ma “”
  Remove(git status to check)
- git rm filename
- git commit -m “”
  Rename(git status to check)
- git add file
- git rm file
- git commit -m “”
- or you can use git mv file1 file2
  Rollback
  
  git diff to check to change
  1. git checkout – file(before add) it can return the status of the workspace.
  2. git reset HEAD file (after add)
  - unstage the file -> before add
  - git checkout – file
    1. git (after commit)
  - find the Hash value of commit
  - git comment –amend append to the same commit
  - git diff –staged
  - return the commit status
    
    git checkout [commit hash] – file
Warning [git reset]
1. –soft not change staging index & workspace
2. –mixed(default) change staging & not workspace
3. –hard change staging & change workspace
  
  usage : git reset –soft [commit hash] git reset HEAD file -n try to do -f force to do
  
  .gitignore
  
  it can help us to ignore some file or dir reference :
4. help.github.com/articles/ignoring-files
5. github.com/github/gitignore git config –global core.excludesfile pathtofile
  - git rm –cached file
    .gitkeep
    
    git log –oneline/ –graph/ –all/ –decorate
    
    Other options
  - git show [hash]
  - git diff [hash] & git diff [hash1]..[hash2]
    Branch
    
    branch is needed, cheap, try
6. try new ideas
7. isolate the workspace
8. fast context switching
  operations
  - git branch
  - create -> git branch new_branch_name
  - switch -> git checkout branch_name
  - git checkout -b new_branch_name
  - git diff [branch1]..[branch2] (use –color-words)
  - git branch –merged
  - git branch -m old_name new_name (–move)
  - git barnch -d(–delete) name (-D to delete a non-empty branch)
  - prompt
    
    export PS1=’$(__git_ps1 “(%s)”) > ‘
    
    export PS1=’\W$(__git_ps1 “(%s)”) > ‘
    
    export PS1=$PS1’$(__git_ps1 “(%s)”) > ‘ (it’s cool !)
Attantion: barnch is a stack mode, current branch can’t be delete

Merge
- git merge exist_branch
- git branch –merged
- conflict
  - change by yourselt
  - git log –graph –oneline –all –decorate
  - git mergetool –tool=
Attention:
- keep lines short
- commits small focused
- merge often
  stash
  1. git stash save “changed mission …”
  2. git stash list
  3. git stash show stash@{0} (you may use -p option)
  4. git stash apply
  5. git stash pop
  6. git stash drop stash@{0}
    Remote (link to the github or others)
    
    Easily, this can be changed to
    
    Set up a github account
  7. you set up a account
  8. Create a repository
  9. look at the code following
    echo # >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/[User account]/[project name].git git push -u origin master
- you can easy use git remote rm origin
- git branch -a/-r
- git push -f
- git fetch
  - fetch before work
  - fetch before push
  - fetch often
- git pull = git fetch + git merge
- git push origin :your branch
- git push origin [–delete] branch
  
  [远程分支的使用] git checkout -b [new_branch] (make some change) git commit -am “word” git push [远程仓库名] [远程分支名(new_branch)]
  
  password caching
  
  Password Caching or save the ssh key.
Read All
Open Github Pages for blogs

2018-09-24

Xin YAO

git Markdown

Organization

_config.yml ：全局配置文件

posts :放文章的文件夹

img 存放图片的文件夹

Settings (mainly on _config.yml)

Sidebar settings

sidebar: true

sidebar-about-description:

sidebar-avatar:

Reference

*BY Blogs

*xudailong Blogs

*jekyll

*gitalk

Read All
JavaScript

2018-09-21

Web

js
一、JS介绍

1、什么是JS

javaScripy = ECMAScript(js语法) + BOM - window(浏览器对象模型) + DOM - document(文档对象模型) js 是 javascript 的缩写，是一门专门用来控制网页内容的行为的脚本语言。 js 就是 web 标准中的行为标准。

2、在哪儿写 JS 代码

1、写在标签的内容（写在标签的行为相关的属性中，比如按钮的onclicked）。

2、写在 script 标签中（script标签可以放在html 的任何位置，但是一般放在head或者body中）。

3、写在外部的 js 文件中

导入
```
	<script type="text/javascript" src="js/new_file.js">	
	</script>
```
3、js 能做些什么事情

1、js 可以在网页中插入html 代码。 2、可以修改标签的内容。 3、修改标签的样式。

二、JS基础语法

1、注释

单行注释：单行注释前面加‘//’ 多行注释： /*这是多行注释 *这是注释的第二行 */

2、标识符

要求是由数字、字母、下划线和 $符组成，数字不能开头。 var h1

3、基本数据类型。

注意：JS中大小写敏感，没有元组和集合。

常规 Number：数字（包含所有数字） Boolean（布尔类型） String（字符串） Array（数组） Object（对象）

特殊 NaN（不存在的数字） null（空，一般用来清空变量中的内容） undefined（变量没有赋值时，默认是undefined） console.log（） //在控制台打印内容

4、字面量

Number字面量：所有的数字（支持科学技术法，不支持复数）。

Boolean字面量：true、false（小写）。

String字面量：单引号或者双引号包围的字符集，支持转义字符（和python相同）。

Array字面量：相当于python中的列表。

Object对象字面量：相当于python中的‘字典+对象’ 注意：key相当于属性，value相当于属性的值。
```
var dict = {a:100, name:200}
console.log(dict)
```
typeof()查看数据类型。

5、js中的语句

1、一条语句结束后可以写分号，也可以不写，但是一行要写多行就必须写分号。 2、js中没有缩进的语法要求，需要代码的时候使用{}

6、js中变量的声明

(1)、var声明变量的关键字。 var 变量名 或者 var 变量=初值 (2)、变量名：标识符 不能是js中的关键字；驼峰式命名（第一个单词的首字母小写，后面每个单词首字母大写），见名知义 var age ; var name var age1 = 10, name ,studyId 一个变量存储多种类型的值。

7、js 中的运算符

包含：数学运算符、比较运算符、逻辑运算符、赋值元素运算符、三目运算符。

数学运算符：+、-、*、/、%、**(js7才有)、++（自加1）、–（自减1）注意：
```
b = a++：在赋值时先赋值，再加一
b = ++a：先加1，再赋值。 
```
比较运算符：>,<,==,>=,<=,!=,===,!==,>==,<==. 结果都是布尔值。 ==：是否相等（判断值是否相等） ===：是否完全相等（判断值和类型是否相等）

逻辑运算符 &&（与）、||（或）、！（非）

赋值运算符 =，+=，-=，*=，/=，%=，%=……

三目运算符 – ？： 语法： 表达式1?值1:值2 —> 判断表达式1的值是否为真，为真整个运算的结果就是值1，否则值2.

运算顺序：数学>比较>逻辑>三目>赋值

8、js中的分支语句

if语句
```
if(条件语句1){
  代码段1
}else if(条件语句2){
  代码段2
}else{
  代码段3
}
```
执行过程：先判断条件语句1是否为true，为true就执行代码段1，再判断条件2……
```
var a = 2
if(!(a%2)){
	console.log('偶数')
}else{
	console.log('奇数')
}

偶数
```
swith语句
```
switch(表达式){
	case 值1:{
		代码段1
	}
	case 值2:{ 
		代码段2
	}
	···
	default:{
		
	}
}
```
执行过程：先计算表达式的值，然后用这个值去和后边case关键字后面的值一一对比，找到第一个和表达式的值相等的case，然后将这个case作为入口，依次执行这个case后边所有的代码。直到遇到switch和break结束。如果没有找到和表达式的值相等的case就执行default后面的代码。
```
练习一：打印星期
var week = 4
switch(week){
	case 0:{
		console.log("星期天")
		break
	}
	case 1:{
		console.log("星期一")
		break
	}
	case 2:{
		console.log("星期二")
		break
	}
	case 3:{
		console.log("星期三")
		break
	}
	case 4:{
		console.log("星期四")
		break
	}
	case 5:{
		console.log("星期五")
		break
	}
	case 6:{
		console.log("星期六")
		break
	}
}

练习二：输入成绩查看分数划分
var score = 3
switch(score){
	case 1:
	case 2:
	case 3:
	case 4:
	case 5:{
		console.log("不及格")
		break
	}
	case 6:{
		console.log("及格")
		break
	}
	case 7:{
		console.log("良好")
		break
	}
	case 8:{
		console.log("良好")
		break
	}
	case 9:{
		console.log("优秀")
		break
	}
	case 10:{
		console.log("优秀")
		break
	}
	default:{
		console.log("输入不正确！")
	}
}
```
9、循环

js中的循环结构分为：for循环和while循环。 for-in循环
```
for var 变量 in 序列{
	循环体
}
```
执行过程：依次从序列中取元素中对应的索引值，每取一个执行一次循环体。
```
var str = 'abcd'
for (var i in str){
	console.log(str[i])
}
//遍历字符串和数组，取对应的下边，遍历对象，取对应的属性名
a
b
c
d
```
for循环
```
for(表达式1；表达式2；表达式3){
  循环体
}
```
执行过程：先执行表达式1，再判断表达式2的结果是否为true，如果为true，就执行循环体，执行完循环体再执行循环体3，然后再判断表达式2的结果是否为true，直到表达式2的结果为false为止。

while循环
```
while（条件语句）{
  循环体
}
```
do - while循环
```
do{
  循环体
}while（条件语句）
```
```
var sum = 0
var i = 1
do{
	sum += i
	i++
}while(i<=100)
console.log(sum)
```
10、函数
```
function 函数名（参数列表）{
  函数体
}
```
函数调用时要保证每个参数都有值！不支持不定长参数。 js中函数如果没有返回值，那么返回值是undefined

逗号表达式：如果多个表达式之间用逗号隔开，整个表达式的结果是最后那个值。

注意：js中不能同时返回多个值（因为不支持元组）

js中，函数也可以作为变量

函数的另外一种声明方式
```
var 变量 = function(参数列表){
  函数体
}
```
11、数据类型

new 类型名（值） –> 可以将其他类型的数据转换成相应类型的值。 a、数字类型 – Number：所有的数字类型。 b、布尔 – Boolean：true和false var bool = new Boolean（"a"） //true 总结：所有为0为空的转换成布尔是false，NaN，null，undefined都是false c、字符串 – String
- 获取单个字符：通过字符串[下标]
- js中下标只支持0~长度-1，不支持负值。并且不支持切片
- 获取字符串长度：字符串.length
- 运算符：比较和加操作如果其他的数据类型和字符串相加，都是现把其他数据类型转换成字符串，然后做字符串的拼接操作。
d、数组 有序，可变的，元素类型可以是任意的数据
Read All

6/13

Welcome to Xin YAO's blog

JS中的事件处理

一、JavaScript中的事件处理

1、在标签上使用onXXX属性来进行事件绑定（不推荐使用）

2、通过代码获取标签绑定onXXX属性（不推荐使用）

3、通过diamante获取标签然后使用addEventListener绑定事件（推荐）

二、事件回调函数和事件对象

三、JS中创建对象常用方法

Window对象

一、网页上显示当前时间

二、网页跑马灯

三、网页延时跳转

练习

Markdown Beginner

前言

Tools

Markdown: Syntax

目录

标题

列表

无序

有序

嵌套列表

引用

图片

链接

索引链接

本身就是链接

分割线

表格

代码块

转义

Others

粗体

斜体

字体, 字号, 和颜色

Reference

Git Beginner

What is a git

History

Install

Begin

init the git

stream

File Operations

Add (git status to check)

Remove(git status to check)

Rename(git status to check)

Rollback

git diff to check to change

Warning [git reset]

.gitignore

.gitkeep

Other options

Branch

branch is needed, cheap, try

operations

Merge

stash

Remote (link to the github or others)

Set up a github account

password caching

Open Github Pages for blogs

Organization

Settings (mainly on _config.yml)

Sidebar settings

Reference

JavaScript

一、JS介绍

1、什么是JS

2、在哪儿写 JS 代码

3、js 能做些什么事情

二、JS基础语法

1、注释

2、标识符

3、基本数据类型。

4、字面量

5、js中的语句

6、js中变量的声明

7、js 中的运算符