JavaScript
javascript介绍
能够处理逻辑
可以和浏览器交互
但是不够严谨
javascript包含:
ECMAscript:js的一种标准化规范,标出了一些基础的js语法.
DOM(document object model):文本对象模型,主要操作文档中的标签.比如让盒子移动、变色、轮播图
BOM(browser object model):浏览器对象模型,主要用来操作浏览器.比如让浏览器自动滚动
js引入和script标签
方式一:在html页写js代码
<script>
alert("hello,world")
</script>
方式二:引入js文件
<script src="first.js"></script>
结束符和注释
结束符
;是js代码中的结束符
单行注释
// alert("hellow,world")
多行注释
/*多行注释*/
输入输出
弹出框alert
alert("hello")弹出框中的内容是"hello"
弹出输入框
var inp = prompt(">>>")弹出输入框,输入的内容会被返回给inp
控制台输出
console.log(变量或值)
<script>
var inp=prompt(">>>");
console.log(inp)
</script>
1.基础数据类型
查看类型
typeof 变量;
typeof(变量);
<script>
var a = 1;
console.log(typeof(a)); //number
</script>
数字number
整数 var a = 1
小数 var b = 1.2347
保留小数 b.toFixed(2) //1.23
<script>
var a = 1;
var b = 1.237;
console.log(typeof(a)); //number
console.log(typeof(b)); //number
console.log(b.toFixed(2)); //1.24
</script>
字符串string
var s1 = '单引号'
var s2 = "双引号都是字符串的表达方式"
string类型的常用方法
属性:length
方法:
.trim()去空白
a.concat('abc') a拼接'abc'字符串
.charAt(索引) 给索引求字符
.indexOf(字符) 给字符求索引
.slice(start,end) 顾头不顾尾,可以用负数,取子串
.toLowerCase() 全部变小写
.toUpperCase() 全部变大写
.split(",",2) 根据(第一个参数)分隔符切割
boolean布尔值
true:[] {}
false:underfined null NaN 0 ''
null 空和undefined未定义
null 表示空 boolean值为false
undefined 没有定义 创建变量但是不赋值 boolean值为false
2.内置对象类型
数组 Array
创建:
var arr = ["a","b","c"];
var arr2 = new Array();
索引操作:
arr[0] 查看
arr2[0] = 'alex'赋值操作
Array常用的属性和方法
属性:length
方法:
.push() 尾部追加元素
.pop() 获取数组尾部的元素
.unshift() 头部插入元素
.shift() 头部移除元素
.slice(start,end) 切片
.reverse() 在原数组上的修改 翻转
.join(seq) a1.join("+"),seq是连接符 将数组元素连接成字符串
.concat(val,...) 多个数组合并,得到一个新数组,原数组不变,连接数组
.sort() 排序 如果是数字会转成字符串进行(Ascll码表)进行第一个字符排序
正常的按照数字大小排序方法:若a小于b,a出现在b前;反之a大于b,b出现在a前
function sortNumber(a,b){
return a - b //(b - a是降序排列)
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)
.splice() 参数 1.从哪删(索引) 2.删几个 3.删除位置替换的新元素(可多个元素)
自定义对象
var d = {'name':'alex','age':84}
d['name']
d['age']
<script>
var d = {'name':'alex','age':84};
var str1 = '{"name": "chao", "age": 18}';
var obj1 = {"name": "chao", "age": 18};
console.log(d['name']);
var obj = JSON.parse(str1);
console.log(obj,typeof obj); // object
// json字符串转换成对象
var str = JSON.stringify(obj1);
console.log(str,typeof str) // string
// 对象转换成json字符串
</script>
//遍历对象中的内容
var a = {'name':'alex','age':18};
for (var i in a){
console.log(i,a[i]);
}
数据类型之间的转换
string --> int
parseInt('123') //123
parseInt('123abc') //123
parseInt('abc') //NaN not a number
string --> float
parseFloat('1.233')
float/int --> string
var num = 123
String(123)
var str = num.toSpring()
任意类型 --> Boolean
Boolean(数据)
字符串和数字相加 -->字符串
字符串和数字相减 -->数字
3.运算符
赋值运算符
=、+=、-+、*+、/=、%=
比较运算符
>、 <、 >=、 <=
==、!= 不比较类型
===、!== (比较类型和值)常用
<script>
var a = 10;
var b = "10";
// console.log(a+=1);
console.log(a==b); //true
console.log(a===b); //false
console.log(a!=b); //false
console.log(a!==b); // true
</script>
算数运算符
+、-、*、/、**次幂、%
++、--
var a = 1
var b = a++ // a=2 b=1 先计算b=a,再计算a++
var c = ++a // a=3 c=3 先计算++a,再计算c=a
Math.ceil()天花板函数
Math.floor()地板函数
逻辑运算符
&& 逻辑与 ||逻辑或 !逻辑非
true && true //true
true || false //true
!true //false
字符串 - 数值 = 数值
var a = "3";
var b = 2;
console.log(a-b) //1
console.log(b-a) //-1 字符串与数字之间相减的结果是数字
console.log('吃了'+'么') //'吃了么'
console.log(12+3) //15
console.log('吃了'+3) //'吃了3'
4.流程控制
特点:
所有的代码块都是用{}标识
所有的条件都是用()标识
条件判断
if语句
if (true){
//执行操作
}else if(true){
//满足条件执行
}else if(true){
//满足条件执行
}else{
//满足条件执行
}
case语句
var err_type = "info";
switch(err_type){
case "warning":
console.log("警告");
break;
case "error":
console.log("错误");
break;
default: //相当于else
console.log("没错");
}
循环语句
while
var i = 1;//初始化循环变量
while(i<=9){//判断循环条件
console.log(i);
i = i + 1
}
do while
<script>
//不管有没有满足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)
}
//1,2,3,4,5,6,7,8,9
//方式二:
var arr = [1,2,3,4,5]
for (n in arr){
consle.log(n) //结果是索引 0,1,2,3,4
consle.log(arr[n]) //1,2,3,4,5
}
//尽量使用下面的方式
for(i=0;i<arr.length;i++){
console.log(arr[i])
}
三元运算符
var 结果 = boolean表达式 ? 为true返回的值:为false返回的值
<script>
var a = 1;
var b = 2;
var c = a>b ? a:b;
console.log(c)
</script>
5.函数
function 函数名(参数){
函数体
return 返回值
}
函数名(参数)
//注意:传递的参数可以和定义的个数不一样,但是不要这么写
//返回值只能有一个
//arguments伪数组
function add(){
console.log(arguments);
}
add(1,2,3,4)
function add(a,b){
console.log(arguments);
}
add(1,2,3,4)
匿名函数
var add = function(){
console.log('hello,world')
}
//add()调用
自调用函数
(function(a,b){
console'.log(a,b)
})(1,2)
关于arguments
<script>
function fn(a,b,c) {
console.log(arguments);
console.log(fn.length); //获取形参的个数
console.log(arguments.length); //获取实参的个数
console.log("----------------");
}
fn(2,4); //[2,4] 3 2
fn(2,4,6); //[2,4,6] 3 3
fn(2,4,6,8); //[2,4,6,8] 3 4
</script>
