JavaScript学习笔记基础篇（一）
简介
- JS是一门运行在浏览器中的编程语言，用来制作网页动态特效。
- 所有JS代码写在script标签中
- 常见的网页特效
- 轮播图
- 表单效验
- JS和JSP动态概念的区别
- JSP动态：内容的动态
- JS动态：效果的动态
- 注意
1.JS和java没有关系
2.JS是一门解释性语言
- 编译型：运行效率高，不能跨平台
- 解释性：运行效率低，可以跨平台
3.JS存在浏览器兼容问题
| 内核 | 浏览器 |
|---|---|
| Trident | IE系列 |
| WebKit | Safari Chrome早期版本 |
| Blink | Chrome后期版本 |
| Gecko | FireFox |
JS语法
1.JS变量
变量：内存中保存数据的基本单位，内存中一块存储空间
JS是一门弱类型编程语言
- 强类型特点：内存利用率高，编程要求较高
- 弱类型特点：内存空间利用率低，编程简单
- var定义变量
JS一般通过
var来定义变量，但是通过该关键字定义的变量有时候会变成全局变量
- 案例
<script type="text/javascript">
if(1){
var c=10;
}
alert(c);
</script>
结果是10
即在{
}中定义一个变量，在外部依然可以访问
- let定义变量
let所声明的变量，只在let命令所在的代码块中有效
- const定义常量
ES5中，是没有办法定义常量的，但是到了ES6，有了对常量的定义
2.JS的数据类型
- 基本数据类型
number、string、boolean
- 注意：JS中的其他数据可以转化为boolean值
- 0=>
false非0=>true- null=>
false非null=>true- “”=>
false非""=>true
3.两个特殊值
- undefined：表示一个变量只是声明，没有初始化
- null：表示一个空对象
4.运算符
- 赋值运算符
= += -= *= /= %=
- 自增自减
++ –
- 数学运算符
+ - * / %
- 比较运算符
> < >= <= == != === !==
== 比较内容，不比较类型，类似于equals
=== 比较内容和类型 - 逻辑运算符
&& || !
- 三目运算符
boolean值? 值1:值2
- typeof：类型运算符
typeof 值//返回值的实际类型：number、string、boolean- 两种写法
typeof c
typeof(c)
- 两种写法
5.条件分支+循环结构
与java一致，这里不再叙述
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var a = 10;
if(a %2 == 0){
console.log("偶数");
}else{
console.log("奇数");
}
var b = "abc";
switch(b){
case 1:console.log("值为1");break;
case 2:console.log("值为2");break;
case "abc":console.log("值为abc");break;
default:
console.log("其它情况");break;
}
var i = 1;
while(i<=10){
console.log("hello world "+i);
i++;
}
var j = 1;
do{
console.log("hello world"+j);
j++;
}while(j <= 10);
for(var k = 1; k<=10; k++){
console.log("hello world"+k);
}
</script>
</body>
</html>
6.函数
6.1 函数基础
函数：实现一个特定功能的代码块
- 函数定义
function 函数名(形参列表){
//函数体
}
- 函数调用
函数名（实参列表）
6.2 函数进阶
6.2.1实参列表与形参列表可以不一致
- 示例
function sum(i,j){
console.log("i="+i);
console.log("j="+j);
//通过arguments获取函数调用时实际参数列表
console.log(arguments);
return i+j;
}
sum(10,20);
sum(10);
sum(10,20,30);
6.2.2 函数参数默认值
- 示例
<script type="text/javascript">
// 假设num2的默认值是2
function add(num1, num2 = 2){
// 直接在参数上直接赋值即可
return num1 + num2;
}
console.info(add(20)); // 22
console.info(add(20 , 8)); // 28
</script>
6.2.3 函数可以嵌套定义
- 示例
function outer(i,j){
console.log("i="+i+",j="+j);
//inner函数可以在外部函数内任意位置使用
inner(1);
function inner(k){
console.log("k="+k);
}
inner(30);
}
outer(10,20);
// inner内部函数不能在外部调用
// inner(30);×
// outer.inner(30);
6.2.4 函数是值
- 函数作为值赋值给变量
- 示例：
function f(){
console.log("hello world");
return 10;
}
//f作为函数代表一段代码，f赋值给a，此时a也表示这段代码
var a = f;
f();// hello world
a();// hello world
//a表示一段代码（函数）b表示函数运行后的结果
var b = f();
console.log(b);
- 函数作为值充当实参
- 示例
//定义a函数
function a(){
console.log("hello world");
}
//定义b函数
function b(f){
console.log(f);
}
//给b函数传普通实参
b(10);
//a函数作为值赋值给变量c
var c = a;
c();
//a赋值给f变量，a此时作为实参
b(a);
// i和j接收数值 f接收操作i和j的函数
function fun2(i,j,f){
console.log(i);
console.log(j);
console.log(f);
console.log(f(i,j));
}
6.2.5 匿名函数
- 示例
function a(){
console.log("hello world");
}
var b = a;
//定义匿名函数，赋值给变量，变量表示该函数
var c = function(){
console.log("hello world");
};
b();
c();
6.2.6 箭头函数
与java中的lambda表达式类似
- 1.单个参数
- 示例
<script type="text/javascript">
let show = username => console.info("Hello:" + username);
show("李四");
</script>
/**
语法：
let 函数名 = 参数名 => 函数体
*/
- 2.多个参数
- 示例
<script type="text/javascript">
let add = (num1,num2) => console.info(num1 + num2);
add(10,20);
</script>
/*
多个参数需要使用【()】小括号给括起来.
*/
- 3.没有参数
* 示例
<script type="text/javascript">
let info = () => console.info("打印信息");
info();
</script>
/*
即使函数没有参数，也需要使用【()】小括号来去表示，来去代表参数部分
*/
- 4.函数体有多条语句
- 示例
<script type="text/javascript">
let length = (str) => {
if(str){
return str.length;
}
return 0;
}
console.info(length("123"));
</script>
/*
函数体有多条语句时候，需要使用【{}】花括号包裹起来
*/
- 总结
- 单个参数则（）可省略
- 单条语句则{}可省略
- 若单条语句为一表达式，则自带return，即return可省略