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是否必要
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.
例<div
onlick=
"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 be
matching different strings together, 外面使用双引,里面使用单引
Events事件带来的影响
Events Change the Program Flow
Some programs
ran 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.
产生: 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.
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
