JavaScript基础学习(3)

发表于 | 分类于 ， ， | 阅读次数:

函数传参、重用、价格计算

参数：JS的数据类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>

fn1(100);
fn1('abc');
fn1(function(){alert(1);});

function fn1(a){
	if(typeof a === 'number' && a === a){//判断为数字类型
		alert(a+20);
	}else if(typeof a === 'string'){
		alert(a.charAt(2));
	}else if(typeof a === 'function'){
		a();
	}
}
</script>

传参应用：类型判断及多组图片切换实例
重用代码：
1.尽量保证HTML代码结构一致，可以通过父级选取子元素
2.把核心主程序实现，用函数包起来
3.把每组里不同的值找出来，通过传参实现

传参实例：商品价格计算及小练习
练习1:
- 0 + 单价：12.5元 小计：0元
- 0 + 单价：8.5元 小计：0元
- 0 + 单价：10元 小计：0元
- 0 + 单价：14.5元 小计：0元
商品合计共：0件，共花费了：0元
其中最贵的商品单价是：0元
练习2:
修改文本框的值
|分类名称||
|-|-|
|分类1|编辑|
|分类2|编辑|
点击编辑后：
|分类名称|||
|-|-|-|
|分类1（可以编辑的文本框）|保存|取消|
练习3:
搜狐视频纪录片列表展示 鼠标移入改变样式
练习4:
选择卡里套选择卡

JS作用域概念-预解析规则、表达式

作用域：
域：空间、范围、区域…
作用：读、写

script 全局变量、全局函数
自上而下
函数
由里到外
{}

浏览器：
“JS解析器”
1）”找一些东西”：var function 参数(参数本质上就是一个局部变量)
a = …
所有的变量，在正式运行代码之前，都提前赋了一个值：未定义
fn1 = function fn1(){alert(2);}
所有的函数，在正式运行代码之前，都是整个函数块

    JS的预解析
        遇到重名的：只留一个
        变量和函数重名了，就只留下函数
2）逐行解读代码：
    表达式：`=` `+` `-` `*` `/` `%` `++` `--` `!` 参数...
    表达式可以修改预解析的值！
    函数调用

1
2
3
4
5
6
7
var a = 1;
function fn1(){
	alert(a);	// undefined
	var a = 2;
}
fn1();
alert(a);	// 1
1
2
3
4
5
6
7
var a = 1;
function fn1(){
	alert(a);	// 1
	a = 2;
}
fn1();
alert(a);	// 2
1
2
3
4
5
6
7
var a = 1;
function fn1(a){
	alert(a);	// undefined
	var a = 2;
}
fn1();
alert(a);	// 1
1
2
3
4
5
6
7
var a = 1;
function fn1(a){
	alert(a);	// 1
	var a = 2;
}
fn1(a);
alert(a);	// 1

想要获取函数内的值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var str = '';
function fn1(){
	var a = 'goods';
	str = a;
}
fn();
alert(str);

function fn2(){
	var a = 'something';
	fn(a);
}
fn2();
function fn3(a){
	alert(a);
}

if(){}
for(){}
while(){}
do{}while()
中花括号包含的代码块不是作用域
FireFox不能对扩展代码块中的函数预解析
总结：尽量不要在if、for等语句里定义变量或函数，定义在代码块外

运算符、程序流程控制

  • 运算符
    算术：+加、-减、*乘、/除、%取模（求余数）
    实例：腾讯首页隔行变色
    实例：隔行变色扩展
    实例：京东商城秒转时间
    赋值：=、+=、-=、*=、/=、%=
    关系：<、>、<=、>=、==、!=、===、!==
    逻辑：&&与、||或、!否
    实例：全选、不选与反选
    运算符优先级：括号
  • 程序流程控制
    判断：if、switch（case break default）、?:
    循环：while、for
    跳出：break、continue
    什么是真、什么是假
    真：非零的数字、非空字符串、true、函数、object:[]{}元素（存在）
    假：零、NaN、空字符串、false、null、未定义
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <input type="button" value="反选">
    <ul>
    	<li><input type="checkbox" checked></li>
    	<li><input type="checkbox"></li>
    	<li><input type="checkbox" checked></li>
    	<li><input type="checkbox"></li>
    	<li><input type="checkbox"></li>
    </ul>
    <script>
    window.onload = function(){
    	var aInp = document.getElementsByTagName('input');
    	aInp[0].onclick = function(){
    		for(var i = 1; i < aInp.length; i++){
    			aInp[i].checked = !aInp[i].checked;
    			/*if(aInp[i].checked){
    				aInp[i].checked = false;
    			}else{
    				aInp[i].checked = true;
    			}*/
    		}
    	}
    }
    </script>

真假的问题：数据类型-数字（NaN）、字符串、布尔、函数、对象（element、[]、{}、null）、未定义
真：非0的数字、非空字符串、true、函数、能找到的元素、[]、{}
假：0、NaN、空字符串、false、不能找到的元素、null、未定义

练习：
1.百度文库评分；
【示例：点击查看】
2.百度音乐-全选操作；
【示例：点击查看】