JavaScript是一种有趣的语言，现在它已经快要占领所有可能的场合了：
从网页到服务器，从桌面到嵌入式，JavaScript无处不在。所以，放开一
点看，这不仅仅是前端，这是计算机程序设计的未来。JavaScript正在走
Java语言10年前走过的路：如水银泻地，无孔不入。这是一门编程入门
课，不仅仅是前端编程课。
课程概述
JavaScript是一种有趣的语言，爱它的人通常都会爱到不能自拔，除了它
不想再用任何其他语言来写程序，在任何应用、任何场合都想用它来写程
序。
而现在，它真的快要占领所有可能的场合了：从网页到服务器，从桌面到
嵌入式，JavaScript已经无处不在。
所以，放开一点看，这不仅仅是关于前端，这是关于计算机程序设计的未
来。不仅仅是网站，不仅仅是B/S架构的软件，甚至是桌面和嵌入式系
统，都可能用JavaScript来写。JavaScript正在走Java语言10年前走过的
路：如水银泻地，无孔不入。
注意，这是一门编程入门课，不仅仅是前端编程课。
来自
课程相关
2015年5月26日8:49
分区JavaScript_入门的第1页
正儿八经的程序设计语言-
语言写的程序可以在浏览器上运行-
可以计算，接受参数-
javascript（netscape）与java（sun，1995）没有关系-
随着浏览器下到本地在浏览器中运行
什么是Javascript
html与css实现网页上的内容和样式
但他们是静态的
页面中的JavaScript代码
html内容-
css格式-
javascript动作-
第1章什么是JavaScript
2015年9月5日23:53
分区JavaScript_入门的第2页
分号结尾-
区别大小写，document和Document不同-
“点”是运算符。点左边的对象做右边的动作-
document对象做write动作，只是把里面字符串内容写到了页面上，
所以也可以
-
双引号和单引号相同-
桌面上的JavaScript
大型网站的后台服务器-
javascript作为第一门教学语言-
可以写桌面软件，多设备运行，兼容性很好-
javascript已经远远超过浏览器的使用
nodejs
可以在桌面上运行javascript
分区JavaScript_入门的第3页
保存为js文件
sublime可以使得javascript高亮
builld-system
sublime-text的简易node构建脚本
保存为node.system-build
选择为node后，可以用快捷键在sublime中运行
事件相应代码
onLoad加载时响应
分区JavaScript_入门的第4页
可以直接用script○
在html标记里面使用onxxx○
加入javascript标记-
变量
varvariable变量
W3C里面的介绍：
变量必须以字母开头
变量也能以$和_符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y和Y是不同的变量）
提示：JavaScript语句和JavaScript变量都对大小写敏
感。为什么不推荐$和_开头？
============================
后面还有新的东西用$标记，貌似还能自定义
一般_开头的变量用于私有方法或者属性，有助于识别。
$通常为库保留。
讨论：JS的变量和C或Java
的变量有什么区别吗？
javascript是一种弱类
型的编程语言，变量
在定义时无需声明类
型！
-----------------------------------------------------------------------------------------
分区JavaScript_入门的第5页
讨论：
运行JS代码的困难
ubuntu安装配置sublime-text-3&nodejs
sudoadd-apt-repositoryppa:webupd8team/sublime-text-31.
sudoapt-getupdate2.
sudoapt-getinstallsublime-text-installe3.
sublime-text-3(deb系):
sudoapt-getinstallsudoapt-getinstallnodejs1.
nodejs(ubuntu系,PS:ubuntu自带nodejs的软件源):
buildnodejs:
{1.
"cmd":["/usr/bin/nodejs","$file"],2.
"file_regex":"^[]File\"(...?)\",line([0-9])",3.
"selector":"source.javascript"4.
}5.
和老师视频一样,但nodejs的配置内容有一点区别在nodejs的二进制文件地址,下面代码是我的nodejs
的位置,如果不对请$whreisnodejs查看
来自
windows配置方法如下：
先安装好node.
安装好后。进入dos命令行。
然后输入node-v查看是否安装成功。如果安装成功就可以看到node的版本号
然后在你要运行的地方创建一个英文目录。
新建一个server.js的js文件
文件内容为：
varhttp=require("http");1.
http.createServer(function(req,res){2.
res.writeHead(200,{''Content-Type'':''text/plain''});3.
res.end(''helloworld\n'');4.
5.
分区JavaScript_入门的第6页
5.
}).listen(1337,''127.0.0.1'');6.
console.log(''Serverrunningathttp://127.0.0.1:1337'');7.
打开sublime
找到Tools下面的“编译系统”菜单，再选择“新编译系统”
{1.
"cmd":["node","$file"],2.
"file_regex":"^[]File\"(...?)\",line([0-9])",3.
"selector":"source.javascript"4.
}5.
输入以下
重新启动SublimeText2.勾选菜单Tools-->编译系统-->你保存名称（我保存的为node）
可以使用Ctrl+b来执行JavaScript程序.
分区JavaScript_入门的第7页
2.1计算-
2.2判断-
第2章计算与判断
2015年9月5日23:53
分区JavaScript_入门的第8页
基本计算
变量本身没有指定类型，但“值”有类型○
布尔：true/false○
○
赋值运算-
(+，面对其中一个是字符串表示连接起来，数字当作字符串来
看）
○
○
○
○
两个空格连接起来在html中表示还是一个空格○
连接运算-
+-/○
js中的除法不是div○
age=-age取相反数○
%2可以用来判断奇偶?
%：取余（计算机中称作取模）○
js中不区分整数和浮点数，数字就是数字○
四则运算-
result++/--
自增/减-
2.1计算
2015年9月5日23:53
分区JavaScript_入门的第9页
result=result+1?
result=result-1?
result++/--○
++/--result○
建议不要使用在式子里面，会带来理解和阅读的困难，最好单纯
得去使用
○
可以判断数值，也可判断字符串?
==!=○
判断数值，字符串比较字典序?
按ascii码来比较，大写在小写前面?
<>○
<=>=○
判断值是否一样-
//，行注释○
注释-
记不住加括号，最保险○
运算优先级-
作比较
分区JavaScript_入门的第10页
关系运算符-
if-
在浏览器解释执行之前，先执行alert的js代码，然后浏览器再呈现document写
入html的内容。
判断
if-else-
条件判断语句
2.2判断
2015年9月5日23:53
分区JavaScript_入门的第11页
有大括号
else总是和其最近的if匹配-
嵌套的判断语句
这个时候else与上面那个if搭配-
分区JavaScript_入门的第12页
这个时候else与上面那个if搭配
嵌套的if语句-
！建议-
elseif-
多路分支
分区JavaScript_入门的第13页
switch-case-
switch-case可以匹配字符串○
break表示这个分支做完了，如果没有○
会继续做下去
可以利用这个，case1：case2：表示遇到1和2都怎么怎么样
多路分支
逻辑运算符与其真值表-
逻辑运算
分区JavaScript_入门的第14页
例子-
优先级-
运算符?:-
又叫做三元运算符
条件运算符
分区JavaScript_入门的第15页
又叫做三元运算符-
当exp为真，值为v1，else值为v2-
例子-
分区JavaScript_入门的第16页
3.1循环-
3.2函数-
3.3数组-
第3章循环函数与数组
2015年9月5日23:53
分区JavaScript_入门的第17页
while语句-
注意起始和结束值-
循环
求最大公约数-
循环的例子
3.1循环
2015年9月5日23:53
分区JavaScript_入门的第18页
可以写成while(v>0)○
所有程序本身都有一定的算法○
前置条件，算法步骤，终止条件○
算法-
○
浏览器会卡死，可以把!=改成<○
无限循环-
nestedloops-
do-while-
do循环
分区JavaScript_入门的第19页
先进去，再判断○
反转数字reversenumber-
计数循环-
例子-
无限循环的写法-
for循环
分区JavaScript_入门的第20页
不同循环的比较-
如何选择循环-
break与continue-
循环控制
分区JavaScript_入门的第21页
分区JavaScript_入门的第22页
函数-
定义函数-
()：参数表
调用-
函数化后可以反复调用
函数调用函数-
函数
3.2函数
2015年9月5日23:53
分区JavaScript_入门的第23页
return-
把变量传给函数-
有返回值的函数
把函数定义为一个对象！-
可以在将来利用变量产生动态的程序
的发生的-
避免代码复制，不好的程序风格-
尽量通过已定义的函数构造新的函数
分解为小的函数构造
函数变量
分区JavaScript_入门的第24页
变量空间-
即使是定义在不同script块里面，只要定义在函数外，在全局都可以使用
自己的u离开函数就被销毁了
js只有两种，一个是函数内，一个是函数外
下面这种方式不行：
变量空间
分区JavaScript_入门的第25页
是一种数据结构，帮忙管理相似的东西-
数组的方式，下标-
创建数组-
js数组可以动态增长○
给的size表示一开始有多大，而不是最大有多大○
如果只有一个数据表示的意思是size而不是初始化
第三个表示用d1，d2，…，dn初始化○
数组
3.3数组
2015年9月5日23:53
分区JavaScript_入门的第26页
如果只有一个数据表示的意思是size而不是初始化?
第四个表示数组常量，但可以改变○
green变为black?
新增加colors[3]为brown?
数组下标从0开始○
开始在colors[3]="brown"之前的colors[3]是undefined
在colors[100]="cyan"后的colors[99]也是undefined
如果数组元素没有赋值就表示没有
访问数组
分区JavaScript_入门的第27页
访问数组-
数组长度-
结果是3，0，5
length表达数组占据了多大地方而不是里面有内容的数字有多少个
.length可写！-
结果为undefined！
--------------------------------------------------------------------------
数组运算
分区JavaScript_入门的第28页
alert结果仍然为undefined，因为没有赋值
后面的colors[colors.length]相当于追加两个新值，不需要给出一个具
体的数字
推荐这样的代码，可扩展性强！不论多少种颜色都可以~
可扩展性，不用改就能适用未来的可能需求
---------------------------------------------------------------------------------
掐掉再拿回来结果还是undefined，已经扔掉了
转换数组为字符串-
alert(colors)输出red,blue,green
分区JavaScript_入门的第29页
alert(colors)输出red,blue,green○
alert(colors.join("||"))输出red||blue||green○
堆栈操作-
FILO（先进后出）
队列操作-
shift出来
FIFO（先进先出）
排序操作-
数组其他操作
分区JavaScript_入门的第30页
reverse按顺序颠倒，而不是从大打小
自己写比较-
sort是做排序，默认从小到大，给个compare函数就按你的方式排序
比如排序厅长、科长等等或者军官等级等
其他操作-
slice(1,4)表示取出某一部分1到3，4不取
splice()-
分区JavaScript_入门的第31页
从0开始删2个○
不删任何东西，插入red和green○
替换后插入red，green相当于red，green替换原来○
分区JavaScript_入门的第32页
4.1对象-
4.2浏览器中的js-
第4章对象
2015年9月5日23:53
分区JavaScript_入门的第33页
对象-
js是直接就有对象，先有对象，然后往对象里面加入属性！需要
就加入，不需要就可以拿走。严格的说，js是具有对象的语言，
但不是面向对象的语言
○
创建对象-
类似创建数组○
o是对象，但什么也没有○
对象用{}，表示里面东西是对象，x、y、radius是属性○
访问对象属性-
4.1对象
2015年9月5日23:53
分区JavaScript_入门的第34页
只要给book.title赋值，book里面就有了title○
有的系统的对象也可以往里面加属性○
删除对象属性-
for(varxino)…○
循环的每一步x会得到o里面的每一个属性
x是o里面的属性的名字而不是属性的值
输出name,age,salary
alert(o[x])表示三个对应的值--->灵活！
遍历所有属性-
遍历对象属性
对象不能直接alert来查看○
只会提示[Object]而不会表示具体的名字和值
构造方法-
构造函数
分区JavaScript_入门的第35页
this指的是new制造出的对象○
使用this.widththis.height而非wh的原因是如果以后直接修改
了.width还能正确得算出结果
○
原型对象prototype-
对象原型
分区JavaScript_入门的第36页
所有的prototype的东西是共享的，除非你去改写。
deleteperson1.name所有属性又从prototype中间来的
原型的问题
分区JavaScript_入门的第37页
原型的问题-
做赋值后才会取代，做修改后会直接改变原型！
组合原型和构造方法-
this出来的都是对象自己的不共享
prototype都是函数，是共享的
分区JavaScript_入门的第38页
全局对象window-
document-
浏览器中的JS
4.2浏览器中的JavaScript
2015年9月7日21:50
分区JavaScript_入门的第39页
documentmodel○
HTML中的JavaScript-
放在head里，是定义函数的，在后面可以用的○
放在body里，是在那个时刻，页面显示到那个地方，执行一定的
动作
○
外部JavaScript文件
分区JavaScript_入门的第40页
src也可以http引用一个网络地址○
外部JavaScript文件-
鼠标经过或移开，就alert○
鼠标-
onMouseClick，onMouseDoubleclick
当页面被装载完成，开始显示之前要去做的事情?
onLoad○
页面要被关闭之前要去做的事情?
onUnload○
body事件-
简单对话框-
alert只有一个“好”
confirm是yes/no（“好”/“取消”）
promt是可以接受输入一个内容
事件处理器
分区JavaScript_入门的第41页
如果没有输入选择取消，提示“好，再见”
如果输入了选择取消，提示是空“”，但不是undefined
浏览器下面的状态栏○
可读可写○
status表示现在要写成什么样，defaultStatus表示如果没有其他
东西要显示成什么样
○
在safari如果没有onMouseOut，会保留status信息
需要兼顾到不同的浏览器
状态栏-
定时器-
setInterval()，两个参数，第二个参数为毫秒
定时器事件
分区JavaScript_入门的第42页
每1000毫米，做update()事件
可以用来定时（如10s内）转到其他页面
status状态栏会从10倒数到1
========================================================
Loveporridge,lovelife!
ByPorridgeEater
分区JavaScript_入门的第43页
|
|
