文章目录
JavaScript
JavaScript简介
布兰登 • 艾奇(Brendan Eich,1961年~),1995年在网景公司,发明的JavaScript,JS与Java无关。
ECMAScript是一种由ECMA国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)制定的标准。符合这个标准的比较常见的有:JavaScript、Action Script(Flash中用的语言).
JavaScript是前台语言,而不是后台语言。
JavaScript是解释语言,事先不编译、逐行执行。
-
JavaScript基础分为三个部分:
- ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- DOM:操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
- BOM:操作浏览器部分功能的API。比如让浏览器自动滚动。
在页面中,我们可以在<body>
标签中放入<script type="text/javascript"></script>
标签对儿。
<script type="text/javascript">
</script>
基础语法
JavaScript的注释:
- 单行注释:
// 单行注释
- 多行注释:
/*
我是多行注释
我是多行注释
我是多行注释
*/
JavaScript在网页中输出输入信息的写法:
- 弹出警告框:alert语句
语法:alert("");
alert(英文翻译为“警报”)的用途:弹出“警告框”。
<script type="text/javascript">
alert("小姐姐,你好啊!")
</script>
- 控制台输出:
console.log("")
console.log("")
表示在控制台中输出。console表示“控制台”,log表示“输出”。
<script type="text/javascript">
console.log("小姐姐,你好啊!")
</script>
prompt()
就是专门用来弹出能够让用户输入的对话框。
<script type="text/javascript">
var a = prompt("今日天气如何?"); //相当于input函数,用的不多。
console.log(a);
</script>
基本数据类型
typeof
表示“获取变量的类型”,语法为:
typeof 变量名称
- 数值类型(
number
)
var a = 123;
//typeof 检查当前变量是什么数据类型
console.log(typeof a) //number
在JavaScript中,只要是数,就是数值型(number
)的。无论整浮、浮点数(即小数)、无论大小、无论正负,都是number
类型的。
- 字符串类型(
string
)
var a = "abcde";
var b = "路飞";
var c = "123123";
var d = "哈哈哈哈哈";
var e = ""; //空字符串
console.log(typeof a); //string
console.log(typeof b); //string
console.log(typeof c); //string
console.log(typeof d); //string
console.log(typeof e); //string
- 布尔类型(
boolean
true
/false
,首字母小写)
var b1 = false;
console.log(typeof b1) //boolean
- 空对象(
null
)
var c1 = null;//空对象 object
console.log(c1) // null
- 未定义类型(
undefined
)
var d1;
//表示变量未定义
console.log(typeof d1) //undefined
运算符
-
赋值运算符(
= += -= *= /= %=
) -
算术运算符(
+ - * / % ++ --
)a 的值为5 var x = a++; //x=5, a=6 当运算符++在后面时,先赋值,后自增. a 的值为5 var y = ++a; // y=6, a=6 当运算符++在前面时,先自增,后赋值.
--
(自减)同上. -
比较运算符(
== === != !== > < >= <=
)
==
与===
的区别
==
: 只比较值
===
: 比较值和数据类型,必须完全一致. -
特殊情况(
+
)
字符串拼接var name = "张国程"; var hobby= "爬围墙"; var str_zhang= "昨天晚上," + name + "在厕所" + hobby; str_zhang //"昨天晚上,张国程在厕所爬围墙"
数字和字符串相加时,会进行字符串的拼接,其结果的数据类型为字符串
类型间的转换
数值类型转换为字符串类型
number -----> string
- 隐式转换
1 + "2" // "12"
- 强制转换
a = 5
var c = String(a) // "5"
var d = a.toString() // "5"
字符串类型转换成数值类型
string -----> number
Number
方法强转
Number("123") // 123
Number("123asdfsdf") // NaN
parseInt("12.34asdfsdf") // 12 提取整数部分的内容
parseFloat("12.34asdfsdf") // 12.34 提取数字部分.
任何数据类型都可以转为布尔类型
* -----> boolean
Boolean(123)
//true
Boolean(-123)
//true
Boolean(0)
//false
Boolean([])
//true
Boolean(undefined)
//false
Boolean(null)
//false
流程控制
if控制语句
语法:
if (true) {
//满足条件执行
}else if(true){
//满足条件执行
}else if(true){
//满足条件执行
}else{
//满足条件执行
}
var age = 18;
if (age >= 18){
console.log("恭喜你,可以去会所了!");
}else if(age<6){
console.log("好好玩耍吧!");
}else{
console.log("好好上学吧!");
}
逻辑运算符
与 : &&
或 : ||
非 : !
var sex = "女";
var age = 18;
var hobby = "吹管乐";
var flag = false; // 是否婚配
if (age == 18 && sex == "女") {
console.log("妙龄少女");
}
if (age == 18 || hobby == "吹管乐") {
console.log("凑合吧");
}
if (!flag){
console.log("这是机会。");
}
switch语句
var age = 60;
switch (age) {
//case表示一个条件 满足这个条件就会走进来 遇到break跳出。如果某个条件中不写 break,那么直到该程序遇到下一个break停止
case 18:// if age == 18:
console.log("可以去会所了。");
break;
case 60: //elif age == 60:
console.log("您老还是回家吧!");
break;
default: //else
console.log("好好学习。")
}
while循环
-
循环三步走:
- 1.初始化循环变量
- 2.判断循环条件
- 3.更新循环变量
var i = 0;
while (i < 5){
console.log(i);
i++;
}
/* python
while i < 5:
print(i)
i += 1
*/
do…while循环
//不管有没有满足while中的条件do里面的代码都会走一次
var i = 3;//初始化循环变量
do{
console.log(i)
i++;//更新循环条件
}while (i<10) //判断循环条件
//3 4 5 6 7 8 9
for循环
for(var i = 1;i<=10;i++){
console.log(i)
}
常用内置对象
所谓内置对象就是ECMAScript提供出来的一些对象
数组Array
数组的创建方式
- 字面量方式创建(推荐大家使用这种方式,简单粗暴)
var arr = ["alex", "egon", "yuan"];
var arr3 = [];
- 使用构造函数(后面会讲)的方式创建 使用new关键词对构造函数进行创建对象
var arr = new Array();
常用的方法:
- join:(按照自定义的方式拼接)
var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);//98|78|76|100|0
- slice:(切片)
var arr = ['张三','李四','王五','赵六'];
var newArr = arr.slice(1,3);
console.log(newArr);//["李四", "王五"]
- pop:(末尾删除, 返回删除元素)
var arr = ['张三', '李四', '王五', '赵六'];
var item = arr.pop();
console.log(arr);//["张三", "李四","王五"]
console.log(item);//赵六
- push:(在末尾追加)
var arr = ['张三', '李四', '王五', '赵六'];
var newLength = arr.push('铁蛋');//可以添加多个,以逗号隔开
console.log(newLength);//5
console.log(arr); //["张三", "李四", "王五", "赵六", "铁蛋"]
- shift:(在开头删除元素,返回删除元素)
var names = ["alex", "yuan", "wusir", "egon"];
var a = names.shift();
console.log(a); // "alex"
console.log(names); // ["yuan", "wusir", "egon"]
- unshift:(在开头添加)
var names = ["alex", "yuan", "wusir", "egon"];
var newLength = names.unshift('铁蛋');//可以添加多个,以逗号隔开
console.log(newLength);//5
console.log(names); //["铁蛋", "alex", "yuan", "wusir", "egon"]
字符串
- replace:(替换)
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755
- split:(分割)
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.split('a')); // ["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]
console.log(str.split('a', 2)); // ["我的天呢,", "是嘛,你在说什么呢?"]
- trim: 去掉首尾的空格字符
var name = " alex ";
console.log(name); //" alex "
console.log(name.trim()); // "alex"
Date对象
//创建了一个date对象
var myDate = new Date();
Math对象
函数
定义函数:
function 函数名字(形参){
//函数体内容
return 返回值
}
调用函数:
函数名字(实参);
伪数组 arguments
arguments代表的是实参。有个讲究的地方是:arguments只在函数中使用。
- 返回函数实参的个数:
arguments.length
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b,c) {
console.log(arguments);
console.log(fn.length); //获取形参的个数
console.log(arguments.length); //获取实参的个数
console.log("----------------");
}
结果:
- 之所以说arguments是伪数组,是因为:arguments可以修改元素,但不能改变数组的长短。
arguments[0]
来取值,举例:
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b) {
arguments[0] = 99; //将实参的第一个数改为99
arguments.push(8); //此方法不通过,因为无法增加元素,会报错
}
- 清空数组的几种方式:
var array = [1,2,3,4,5,6];
array.splice(0); //方式1:删除数组中所有项目
array.length = 0; //方式2:length属性可以赋值,在其它语言中length是只读
array = []; //方式3:推荐