Coursera Js
2016-08-02 00:40
417 查看
Programming is something that comes with time and practice. And then
suddenly the moments
of "Hooray" start to outnumber the times that you are stuck.by Colleen
van Lent, Ph.D.
柯林姐励志之言,有没有很鸡血？ 废话不多说,老老实实记笔记.
Functions
function指的到底是啥
functions are bits of codes with special syntax you can reuse
长啥样
function functionName(parameters){
code you want to run
} 不需要分号
functionName 和variable 命名规则一样,只允许letters/digits/underscores.
Js中使用function函数的目的/什么情况下使用
When you need to define
the function once but call it multiple times.
使用function的2个步骤
Step1 Declare a function ( doesn't do anything though)
Step2 Call the function (This will change the program flow)
program flow:
Programs start at the top,and work their way down line by line.With functions,
computers can jump around in memory and execute different parts of code without following the program flow.
parameter name重要吗
No, as long as you are consistent.
Reture values
Some functions return values some don't.
Reture values的作用
These values can be used inassignment statements or conditional expressions.
例子:使用form时,可根据需要设置function来决定是否有提交功能。
其余
1.use built-in functions as you can, you don't have to write everything from scratch.
2.Don''t be too specific, don't hard-code too many values.when writing your own function otherwise it doesn't come in handy for reusing in
different scenarios Over specific means a reduction in terms of flexibility.
<head>
<script>
function message(){
alert("hi");
}
</script>
</head>
<body>
<script>
message();
</script>
</body>
这种方式比将所有Js代码放在head要cleaner些,而且有利于多次调用.
2.In an External File
<head>
<script src="js/two-external.js"></script>
</head>
使用这种方式要确认外链的Js地址无误,
1. Make sure that the file names are correct(Case matters!!)
2. Make sure that files are in correct folder.
3. Make sure that you are wokring on the correct file.
Events
作用：Adding interactivity
Events 和 function 的关系
It would be better if the functions were called based on special events.
Events are matched with JS code or a function.
Event 和DOM 的关系
Without events, JS would be limited in ability to interact with the DOM.
Events的来源？
Js API lets us add dynamic function calls!
几种常用的Events
onclick/onmouseover/onresize/onload…
Events是如何工作的 (使用event时的2个要点)
Any element can react to an event. You need to add the event to the tag and include what you want to happen.
例<divonlick="message()"> Click on this will invoke a Js function</div>——仅运行一次
Use double quotes for the event result so that it is easier to pass String parameters——柯林姐推荐使用双引号的原因
<div onlick="message('hi')"> —— if you're gonna bematching different strings together, 外面使用双引,里面使用单引
Events事件带来的影响
Events Change the Program Flow
Some programsran in a linear oder(step-by-step) and things are executed one by one and only once.
Events cause the program to run continuously since the DOM is always listening for events.
(So, too many events slow down the execution of pages.)
更多Events
Mouse E/Keyboard E/Frame E/Comprehensive lists.
This
产生: Every object in DOM has an automatically generated "this"
作用: Allow you to access an element's info.
Without"this", it would be difficult for the functions to know what data to use.
"this" is also used outside functions
例子
写段代码,让图片在hover状态下显示alt内容
function showProperties(element){
document.getElementById("message").innerHTML = element.alt;
}
Photo Gallery 作业笔记
background-image is an option for including graphics without using img tag.
A background-color is recommended in case the url isn't valid.
2 ways to change the content
1.document.write( )
2.innerHTML
JS Arrays
Arrays are Objects so:
hey have attributes and methods.
grades.length
grades.sort()
grades.push(element)
当我们不知道array的长度时(比如使用了getElementsByTagName),可以结合grades.length和
grades.push(element) 来为该array添加新元素--
方法如：
grades[grades.length] = element
[grades.length]是什么？
the easiest way to add sth to an array is to just use the length of itself.
We can now play with new API method:
getElementsByTagName('t');
getElementsByClassName('c');
JS Iteration/LOOPING
Syntax
for(j = 0; j<array.length;j++){ // start at zero; loop until we get to the length; add one to it each time
// The steps here are repeated
}
具体步骤
start with keyword for
1.set a variable to the initial value
- ( usually index=0, counter = 0, or i = 0)
2.Run a boolean test(true/false)
3.Run the code
4.Update variable and go back to 2.
suddenly the moments
of "Hooray" start to outnumber the times that you are stuck.by Colleen
van Lent, Ph.D.
柯林姐励志之言,有没有很鸡血？ 废话不多说,老老实实记笔记.
Functions
function指的到底是啥
functions are bits of codes with special syntax you can reuse
长啥样
function functionName(parameters){
code you want to run
} 不需要分号
functionName 和variable 命名规则一样,只允许letters/digits/underscores.
Js中使用function函数的目的/什么情况下使用
When you need to define
the function once but call it multiple times.
使用function的2个步骤
Step1 Declare a function ( doesn't do anything though)
Step2 Call the function (This will change the program flow)
program flow:
Programs start at the top,and work their way down line by line.With functions,
computers can jump around in memory and execute different parts of code without following the program flow.
parameter是否必要
Some functions require parameters,如getElementById)_parameter name重要吗
No, as long as you are consistent.
Reture values
Some functions return values some don't.
Reture values的作用
These values can be used inassignment statements or conditional expressions.
例子:使用form时,可根据需要设置function来决定是否有提交功能。
其余
1.use built-in functions as you can, you don't have to write everything from scratch.
2.Don''t be too specific, don't hard-code too many values.when writing your own function otherwise it doesn't come in handy for reusing in
different scenarios Over specific means a reduction in terms of flexibility.
Js Code(特指Js functions) placement in 2 ways
1.Declaration in the head<head>
<script>
function message(){
alert("hi");
}
</script>
</head>
<body>
<script>
message();
</script>
</body>
这种方式比将所有Js代码放在head要cleaner些,而且有利于多次调用.
2.In an External File
<head>
<script src="js/two-external.js"></script>
</head>
使用这种方式要确认外链的Js地址无误,
Folder Structure / Organizing Your Code
If a link isn't working, check a few things：1. Make sure that the file names are correct(Case matters!!)
2. Make sure that files are in correct folder.
3. Make sure that you are wokring on the correct file.
Events
作用：Adding interactivity
Events 和 function 的关系
It would be better if the functions were called based on special events.
Events are matched with JS code or a function.
Event 和DOM 的关系
Without events, JS would be limited in ability to interact with the DOM.
Events的来源？
Js API lets us add dynamic function calls!
几种常用的Events
onclick/onmouseover/onresize/onload…
Events是如何工作的 (使用event时的2个要点)
Any element can react to an event. You need to add the event to the tag and include what you want to happen.
例<divonlick="message()"> Click on this will invoke a Js function</div>——仅运行一次
Use double quotes for the event result so that it is easier to pass String parameters——柯林姐推荐使用双引号的原因
<div onlick="message('hi')"> —— if you're gonna bematching different strings together, 外面使用双引,里面使用单引
Events事件带来的影响
Events Change the Program Flow
Some programsran in a linear oder(step-by-step) and things are executed one by one and only once.
Events cause the program to run continuously since the DOM is always listening for events.
(So, too many events slow down the execution of pages.)
更多Events
Mouse E/Keyboard E/Frame E/Comprehensive lists.
This
产生: Every object in DOM has an automatically generated "this"
作用: Allow you to access an element's info.
Without"this", it would be difficult for the functions to know what data to use.
"this" is also used outside functions
例子
写段代码,让图片在hover状态下显示alt内容
function showProperties(element){
document.getElementById("message").innerHTML = element.alt;
}
Photo Gallery 作业笔记
background-image is an option for including graphics without using img tag.
A background-color is recommended in case the url isn't valid.
2 ways to change the content
1.document.write( )
2.innerHTML
JS Arrays
Arrays are Objects so:
hey have attributes and methods.
grades.length
grades.sort()
grades.push(element)
当我们不知道array的长度时(比如使用了getElementsByTagName),可以结合grades.length和
grades.push(element) 来为该array添加新元素--
方法如：
grades[grades.length] = element
[grades.length]是什么？
the easiest way to add sth to an array is to just use the length of itself.
We can now play with new API method:
getElementsByTagName('t');
getElementsByClassName('c');
JS Iteration/LOOPING
Syntax
for(j = 0; j<array.length;j++){ // start at zero; loop until we get to the length; add one to it each time
// The steps here are repeated
}
具体步骤
start with keyword for
1.set a variable to the initial value
- ( usually index=0, counter = 0, or i = 0)
2.Run a boolean test(true/false)
3.Run the code
4.Update variable and go back to 2.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 洛谷 P1197 [JSOI2008]星球大战
- 用 JavaScript 写一个超小型编译器
- JavaScript强化教程——AJAX
- JS计算两个日期之间的天数--转载文章
- 【JavaScript高级程序设计】--第3章 基本概念
- 监听页面滚动的事件
- JS生成二维码
- 深入理解javascript原型和闭包（完结）
- JS的Math函数的使用和随机数
- Html Javascript 嵌入Html需知
- extjs 自定义控件
- Js 原型和继承
- 在Three.js中重新设置3D模型的中心点
- 使用json web token
- 使用计时器实现倒计时(setTimeout())
- JS笔记：面向对象
- JS String对象方法
- JS math 对象方法
- JS数组对象的方法
- JS——js语句