01-JS基础(数据类型)
javascript基础一
JavaScript和ECMAScript的关系
ECMAScript不是一门语言,而是一个标准
符合这个标准的比较常见的有:JavaScript、Action Script(Flash中用的语言)
最新标准是ECMAScript 6版本,即ES6,语言的能力更强,node.js完美支持
js组成
js是一款运行在客户端的网页编程语言。
组成部分
ecmascript | js标准 js基础语法 |
---|---|
dom | 通过js操作网页元素 网页中的任意标签被称为dom元素 |
bom | 通过api操作浏览器 |
特点
解释执行,基于对象,大小写敏感
引入方式
内部引入:
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" contenteditable="true" cid="n26" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><script>
var user = {
name: '张三',
age: 20,
sex: true
}
console.log(typeof user); // 显示为object(对象)
</script></pre>
外部引入:
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" contenteditable="true" cid="n28" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><script src="main.js"></script></pre>
输出内容
alert()
在页面弹出一个对话框,早期JS调试使用。
confirm()
在页面弹出一个对话框, 常配合if判断使用。
console.log()
将信息输入到控制台,用于js调试。
prompt()
弹出对话框,用于接收用户输入的信息。
document.write()
在页面输出消息 几乎不用
-
document.write不仅能输出信息,还能输出标签。
-
转义字符 \
-
\” 转双引
-
\’ 转单引
-
\n 转换行
-
\r 转回车
-
js注释
-
快捷键 ctrl+/
-
单行注释 //
-
多行注释 /* */ ctrl+Shift +/
变量
变量是用来存储数据的容器
变量类型
number
数字类型
- var age = 20;
string
字符串类型
- var name = '张三';
boolean
布尔类型
-
var sex1 = true ;
-
var sex1 = false ;
undefined
未定义类型,只声明变量未赋值,
- var weight;
null
null就是null,只有当值为null的时候才为null
- var exp = null;
判断数据类型
简单数据类型
-
var age = 30;
-
输入console.log(typeof age); //控制台显示为number
复杂数据类型
-
var user = { name: '张三', age: 20, sex: true }
-
console.log(typeof user); // 显示为object(对象)
instanceof
判断某个对象是否为某个构造函数的实例对象
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" contenteditable="true" cid="n119" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">//复杂数据类型 数组 Array
var ages = [33,20,555];
console.log(typeof ages); // object
console.log(user instanceof Array)// false
console.log(ages instanceof Array)// true</pre>
规范
不能以数字或者纯数字开头来定义变量名。
不推荐使用中文来定义变量名。
不能使用特殊符号或者特殊符号开头(_除外);
不推荐使用关键字和保留字来定义变量名。
在JS中严格区分大小写的!
避免使用的关键词
break | do | instanceof | typeof |
---|---|---|---|
case | else | new | var |
catch | finally | return | void |
continue | for | switch | while |
debugger | function | this | with |
default | if | throw | delete |
in | try |
比较运算符
-
小于 <
-
大于 >
-
小于等于 <=
-
大于等于 >=
-
比较运算 ==
-
不等于 !=
-
注意:
-
= 是赋值运算符
-
==才是比较运算符
-
算数运算符
-
- 号
-
数字类型相加==> 数字求和
-
number类型+ string类型 ==> 拼接 string类型
-
string类型 直接拼接
-
- 号
-
number-字符串number可以把stirng转换为number运算
-
console.log(3/0); // Infinity 无限大
-
console.log(3-'张三'); // NaN ; not a number 提示缩写
-
console.log(NaN == NaN); // false 面试:
- NaN永远不等于NaN
-
/ 除号
-
% 求余
- 重要
-
操作符
-
var a = 10; var b = a+20; console.log(b);输出30.
-
c = c + 1等同于 c += 1等同于 c++
-
github
全球最大的程序员交友网.
使用教程
-
注册github
-
创建库,不要自动生成readme文件,手动生成.
-
安装git:
-
一个本地的软件版本控制器.当前本地连接github必须使用git.
-
git操作:
进入创建的文件夹 xxx-learn-note, 右键==> git bash here ==> 黑窗口
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" contenteditable="true" cid="n243" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">输入以下代码:
git -init
在当前文件夹创建.git的隐藏文件夹.这里实际是初始化本地仓库.
git add .
添加当前文件夹现有文件,不包括空文件夹
git commit -m "第一次提交"
如果是第一次使用将会让添加邮箱和密码,按提示操作
git remote add origin git@github.com:Viarotel/fengxiaotian-learn-note.git
添加本地源,链接github服务器
git push -u origin master
将本地仓库信息推送到远程仓库
</pre>
常用git操作命令:
-
git status 查看工作区状态,红色说明有变动,绿色说明全部被提交到暂存区
-
git config –global user.email “you@example.com”(配置账号)
-
git config –global user.name “Your Name”(配置账号)
-
mkdir xxx (创建文件夹xxx)
-
cd xxx (切换到xxx目录)
-
git init(初始化 git 仓库)
-
git status(查看状态)
-
git add . (这里“.”代表全部添加到上传列表)
-
git commit -m ‘xxx.md’(提交,“”里面的内容是提交的信息)
-
git log(查看所有产生的 commit 记录)
-
git branch(查看本地分支)
-
git branch -r(查看远程分支列表)
-
git branch xx(创建分支xx)
-
git checkout xx(进入分支xx)
-
git checkout -b xx(新建一个分支,自动切换到该分支)
-
git merge xx(合并分支至当前分支)
-
git rebase xx(合并分支至当前分支)
-
git branch -d xx(删除分支)
-
git branch -D xx(强制删除分支)
-
git tag (查看标签)
-
git tag xx(新建标签)
-
git checkout xx(进入标签)
-
ssh-keygen -t rsa(指定 rsa 算法生成密钥,这里是在git-bash里面运行,用于生成链接git与电脑的密匙)
-
git push origin master(把本地代码推到远程 master 分支)
-
git pull origin master(把远程最新的代码更新到本地)
-
git clone git@github.com:name/xx.git(把xx项目 clone 到本地)
-
git remote add .origin. git@github.com:name/x.git(本地项目与远成仓库关联)
-
git remote -v(查看当前项目的远程库)
-
git config –global alias.xx .checkout.(设置命令别名)
-
git diff <id1><id1><id2> (比较两次提交之间的差异)
-
git diff .. (在两个分支之间比较)
-
git diff –staged (比较暂存区和版本库差异)
-
git stash(植入暂存区)
-
git stash list(查看暂存区记录)
-
git stash apply(植出暂存区)
-
git stash drop(删除暂存区最近一条记录)
-
git stash pop(apply加drop功能集合)
-
git stash clear(清空暂存区)