JavaScript学习笔记（第一天） – 北熙宝宝

(1) Js的书写形式

行内式

<buttom onclick="alert('hello world')">点我</buttom>
<a href="javascript:alert('hello world')">点我</a>

内嵌式

<script>

    // alert("hello world")

    ///document.write("hello world")

    console.log("hello world")

  </script>

外链式

<head>
<script src="js/hello.js"></script>
<script src="js/index.js"></script>
</head>

(2) 变量

使用

第一种
var x = 100 //定义了一个x变量，赋值100
console.log(x+2000) //计算加2000输出到console
第二种
var x = 100 //定义了一个x变量，赋值100
var y = 1000+x //定义了一个y变量，赋值是x+1000
console.log(y) //输出y到console
第三种
var x //表示定义好变量x但是不赋值
var x,y,z //表示定义好变量x y z但是不赋值
var a=1,b=2,c=3 //表示定义好变量abc并赋值

注意变量不能和Html已有的名字重复。

命名规范与规范

规则（必须遵守）

一个变量名称可以由数字、字母、英文下划线（_）、美元符号（￥）组成
严格区分大小写
不能由数字开头
不能是保留字或者是关键字
不要出现空格

规范（建议遵守）

变量名尽量有意义（语义化）
遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写

尽量不使用中文

var goodNumber
var good_number //这个虽然老师不推荐使用，但是看上去很常见？

(3)数据类型

基本类型

Number 18,12.5（浮点数），2e3，十进制，十六进制，八进制，二进制，NaN
String 字符串类型
Boolean（布尔）
Undefined
Null
Symbol

var a = 0x99 //16进制写法（16代表1-9 abcdef）
var b = 077 //8进制写法
var c = 0b11 //2进制写法
var d = "20"
var isChecked = true //布尔值
var which //声明了，但是未赋值
var whichObject = null //知道会有对象，先写null
whichObject = {name:"beixi"}
console.log(a) //输出是9*16+9
console.log(b) //输出是7*8+7
console.log(c) //输出是1*2+1
console.log(c+d) //输出是320
console.log(isChecked) //输出是true
console.log(which) //输出是undefined
console.log(whichObject) //输出是{name:"beixi"}

判断数据类型

var a = "aaaaaaaaa"
console.log(typeof a) //输出是String
console.log(tyepof(a)) //稍微规范一点的写法，结果和上面一样

其他数据类型转成数值

Number（变量），可以把一个变量强制转换为数值类型的；如果转换前是true/false则出处1/0；如果转换前是null则输出0；如果转换前是其他的非数值（包含undefined），则输出NaN
parseTnt（变量），解析成int类型的，注意它识别不了小数
parseFloat（变量），解析成Float类型，可以识别小数
非加号以外的数学运算

var a = "100"
var b = Number(a)
var c = "100.5abc"
var d = parseInt(c)
var e = parseFloat(c)
var f = a-0
console.log(a,b) //输出的第一个是字符串100，第二个输出的数值100
console.log(d) //输出的是100
console.log(e) //输出是100.5
console.log(f) //输出就是100（数值）

其他数据类型转成字符串

String（），所有类型都能转成字符串
toString()，null和undefined是转换不了的
用+号

var a = 100
var b = String(a)
var c = a.toString()
var d = a+""
console.log(a,b) //前面是数值100，后面是字符串'100'
console.log(a,c) //前面是数值100，后面是字符串'100'
console.log(a,d) //前面是数值100，后面是字符串'100'

其他数据类型转成布尔值

1.Boolean（变量），在js中，只有'',0,null,undefined,NaN,这些是false，其余都是true

var a = 100
var b = Boolean(a)
console.log(a,b) //前面是数值100，后面是true

(4)运算符

数学运算符

var a =10
var b = true
var c = 3
var d = 1000
var e = parseInt（d/60） //取1000/60的整数为小时
var f = d%60 //取1000/60的余数为分
console.log(a+b) //输出是11
console.log(a%b) //输出是1（原因是10整除3余1，所以%是取余的意思）
console.log(e+":"+f) //输出是10:20

赋值运算符

var a = 1
a = 2
console.log(a) //输出答案是2

var b = 3
var c
c = a
a = b
b = c
console.log(a,b) //输出答案是3,1，借助c来互换

var e = a+1
console.log(e) //输出答案是2
e+=1
console.log(e) //输出答案是3

比较运算符

var sum = 100
console.log(sum>=200) //输出为false

var a = '100'
console.log(sum==a) //输出结果为true，因为都是100（不看类型）
console.log(sum===a) //输出结果为false，因为虽然都是100，但是类型不一样，所以不一样
console.log（parseInt(a)===a） //输出结果为true，因为a经过parseInt来转换，所以一样都是数值且类型一样了
console.log（sum!=a） //输出结果为false，因为这里是判断是否不相等（只判断数值）
console.log（sum!==a） //输出结果为true，因为这里是判断是否不相等，要判断类型

逻辑运算符

正常情况

var a = true
var b = true
console.loh(a && b) //输出是true

var category = "衣服"
var price = 300
console.log(category"家电" && price>200) //输出是false（“与”，也就是都必须满足）

var day = 5
console.log(day===5 || day===6) //输出为true（“或”，也就是只要有一个判断满足即可）

var length = 5
console.log(length===0) //输出为false
console.log(!length) //输出为false，因为10是数值在布尔里面是true，！是取反

特殊情况

!!a ==>转换成布尔值

&& || 短路用发

&&的用法
var y
console.log（y.toString()） //这样就会报错
console.log（y && y.toString()） //改用这个，这样的话即使后面出错了，也不会报错，后面正常就用后面正常的
||的用法
var z = ""
console.log(z || "这个家伙很懒，什么都没留下" )  //如果z没有，就用后面的，如果z有就用z

自增自减运算符

n++ 先返回，再加
++n 先加，再返回
n-- 先返回，再减
--n 先减，再返回

var n = 10
var res = ++n + n++ + ++n
console.log(n,res) //输出为13 35（11+11+13）

三元运算符

10<20?console.log(1111):console.log(22222) //输出为1111
//满200-10
var sum = 210
var youhuisum = sum>200? sum-10 : sum
console.log(sum,youhuisum) //输出是210,200
//满200-10，满100-5
var sum = 190
var youhuisum = sum>200? 
                    sum-10 :
                    (sum>100? sum-5 : sum)
console.log(sum,youhuisum) //输出是190,185

(5)分支结构

if条件分支结构

if else

满200-10的实现
var sum = 210
var youhuisum
    if（sum>200）{
        youhuisum = sum-10
    }else{
        youhuisum = sum
    }
    console.log(sum,youhuisum) //输出是210和200

if else-if else

满200-10，100-5，50-3的实现
var sum = 60
var youhuisum
    if（sum>200）{
        youhuisum = sum-10
    }else if（sum>100）{
        youhuisum = sum-5
    }else if（sum>50）{
        youhuisum = sum-3
    }else{
        youhuisum = sum
    }
    console.log(sum,youhuisum) //输出是60h和55

switch条件分支结构

var code = 1

switch（code）{
    case 1 ：
        document.write("未付款")
        break;
    case 2 :
        document.write("已付款")
        break;
    case 3 :
        document.write("已发货")
        break;
    case 4 :
        document.write("已完成")
        break;
    default：
        document.write("出错了")
}

特殊案例A：

(满200-10 100-5 50-3)，推荐还是if语句

var sum = 220
var youhuisum

switch（true）{
    case sum>=200 ：
        youhuisum = sum-10
        break;
    case sum>=100 && sum<200:
        youhuisum = sum-5
        break;
    case sum>=50 && sum<100:
        youhuisum = sum-3
        break;
    default：
        document.write("出错了")
}

console.log(sum,youhuisum)

特殊案例B：

(输出1-12月的天数不考虑闰年)

var sum = 12

switch（month）{
    case 1：
    case 3：
    case 5：
    case 7：
    case 8：
    case 10：
    case 12：
        console.log("31天")
        break;
    case 2:
        console.log("28天")
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        console.log("30天")
        break;
    default：
        console.log("出错了")
}

特殊案例C

成绩处理

var score = 12
var flagScore =parseInt(source/10)

switch（flagScore）{
    case 10：
    case 9:
        console.log("A")
        break;
    case 8：
        console.log("B")
        break;
    case 7:
        console.log("C")
        break;
    case 6:
        console.log("D")
        break;
    default：
        console.log("E")
}

(6)循环结构

While循环(先判断再执行)

var num = 0
while (num<10){
    console.log("当前的num值是"+num)
    num = num + 1 //或者可以写 num++
}

do while循环（先执行再判断）

var num = 10
do{
    console.log('我执行了一次')
    num = num + 1
}while(num < 10)

for循环

for(var i = 1;i <= 10; i++){
    console.log(i)
}

（上面的案例，在i <= 10 检查结束后立刻输出，才会执行i++）

break终止循环

break就是不满足就结束了，不再往下走。

continue

continue就是不满足本次就跳过去，然后继续执行

(7)function

//声明式（定义前后都可以调用）
function test(1){
    console.log("我是套餐1")
}
test1()
//赋值式（定义后可以调用）
var test2 = function(){
    cosole.log("我是套餐2")
}
test2()

函数的参数

function test(a,b){
    var yinliao = a==1?'可乐':'雪碧'
    var yinliao = b==1?'薯条':'鸡米花'
    var zhushi = 鸡腿堡
    console.log("我是套餐A，里面有：",yinliao,xiaoshi,zhushi)
}
test(1,2)//输出是 我是套餐A，里面有：可乐，鸡米花，鸡腿堡
这里的ab就是形参，（1,2）是实参
可以传参，也可以不传参
形参默认前看下只能在函数内部去使用

函数的返回值

return

function add(x,y,z){
    var result = x+y+z
    return result
}
var res = add(1,2,3)
//代码执行到这里，res已经是6了
function test(a){
console.log("传给后端用"，a)

test(res)
}

有return之后，函数后面的就不会执行了（前提是要执行那个return）

函数的预解析（变量声明提升）

var会把var xxx提到前面去
function会把整个function函数给提到前面去
所以调用的在var前面，就会undefined

(8)对象

什么是对象？

字面量方式创建一个对象
var obj = {
    name:"beixi",
    age:3;
    location:"China"
}
内置构造函数的方式创建对象
var obj2 = new Object()
ojb2.name = "beixi"
obj2.age = 3
obj2.location = China

对象的使用

//增加
var obj = new Object()
ojb.name = "beixi"
obj.age = 3
obj.location = China
//读
document.write("姓名是："+obj.name)
//改
obj.age = 2000
//删
delete obj.name
//增加第二个方式
var obj2 = {}
obj2["name"] = "beixi"
//查2
console.log（obj2["name"]）
//改2
obj2["name"] = "hikurn"
//删2
delete obj2["name"]

对象的遍历

var obj = new Object()
ojb.name = "beixi"
obj.age = 3
obj.location = China
for(var i in obj){
    console.loh(obj[i])
    document.write(i+":"+obj[i])
    document.write("<br>")
}

不同数据类型的储存

var obj = {
    name:"beixi",
    age:3
}
var obj2 = obj
obj2.name = "hikurn"
console.log(obj,obj2) //此时输出的是“hikurn”，“hikurn”

var obj2 = {
    name:"beixi"
}
var obj3 = {
    name:"beixi"
}
console.log(obj2===obj3) //输出是false（==也是false）

此时的obj的对象，obj是在栈区，值是在堆区用地址{name:"beixi"}，所以obj2和obj3的地址不一样

var obj = {
    name:"beixi",
    age:3
}
var obj2 = {}
for(var i in obj){
    obj2[i] = obj[i]
}
obj2.name = "hikurn"
console.log(obj,obj2) //此时输出的才是“beixi”，“hikurn”

(9)数组

什么是数组？

//字面量
var ageArr = [3,4,5,6]
var nameArr = ["caixukun","lihua","beixi","heimao"]
var studentArr = [{
    name:"hikurn",
    age:5
},{
    name:"beixi",
    age:5
}]
//内置构造函数
var arr1 = new Array(3,4,5,6) //放4个数值
var arr2 = new Array(3) //暂用3个内存格子

数组的基本操作

var arry1 = [1,2,3,4,5]
console.log(arr1,length)
arr1.length = 3
console.log(arr1) //打印结果是1,2,3
//清空数组
arr1.length = 0
console.log(arr1) //打印结果是为空{}
//索引
var arr2 = ["hikurn","tongbao","tangbao"]
console.log(arr2[0]) //取出了hikurn，数字开始是0
arr2[0] = "beixi"
arr2[3] = "mingbao"
console.log(arr2[0],arr2[3]) //取出了beixi和mingbao，数字开始是0,修改的时候如果没有就增加一个，中间空的就是empty
//遍历
var arr3 = [3,4,5,6,7,8]
for(var i=0;i<arr3.length;i++){
    console.log(arr3[i])
}
var arr4 = []
for(var i=0;i<arr3.length;i++){
    arr4[i] = arr3[i]
}
console.log(arr4)

冒泡排序

var arr = [4,3]

var temp = arr[0]
arr[0] = arr[1]
arr[1] = temp
或
for(var m = 0;m<arr.length-1;m++){
    for(var i =0;i<arr.length-1-m;i++){
        var temp = arr[i]
        arr[i] = arr[i+1]
        arr[i+1] = temp
        }
}

选择排序

var arr = [4,3,2,1]
for(var m = 0;m<arr.length-1,m++){
    var minIndex = 0
    for(var i=1+m;i<arr.length;i++){
        if(arr[i]<arr[minIndex]){
            minIndex = i
            }
        }
    if(minIndex !== m ){
        var temp = arr[m]
        arr[m] = arr[minIndex]
        arr[minIndex] = temp
    }
}