javascript基础知识

JavaScript

• 定义变量

  • var a = 100;

• 输出变量

  • alert() 弹框
  • console.log()在控制台打印
  • console.dir()页面中打入属性和方法
  • window.document.write(直接在页面上打印) //用得少

• 查看 变量类型 typeof

数据类型分类

• 三大类

  • 基本数据类型

    • 数字类型(不区分 浮点和整形) number
    • 字符串:用单引或双引包起来的 string
    • 布尔类型:true false (js中必须得小写)
    • 特殊的:Nan 代表不是数字类型,但其本身是数字类型

  • 复合数据类型

    • 对象

      • var obj = {'name':'张三',age:23,键:值}
        对象的键都是字符串类型的
        使用对象
        	console.log(obj.name)
        给对象新增一个属性
        	obj.name2='李四';
        删除某一个对象
        	delete obj.name
        

      • var name = 'hello';
           // alert (name);
           var hello = "hello world";
           console.log(hello);
           console.dir(typeof(hello));
           var fuck = {'name':'思思','age':'22','sex':'女'}
           console.log(fuck.age);
           console.log(fuck.name);
           console.log(fuck.sex);
           fuck.name2 = '香香';
           console.log(fuck.name2);
           var newpants={name:{'name1':'penlei','name2':'zhaomeng','name3':'pangkuan'},age:{'age1':22,'age2':34,'age3':44}}
           console.log(newpants.name.name1,newpants.age.age1);
           console.log(newpants)
           </script>
        

    • 数组

      • 可以存储多个任意类型的元素
        1.使用[],多个元素用逗号隔开
        2.数组的键(key/下标)
        3.下标从0开始
        

      • var ojbk=[1,2,3,'4','5',['6',7,8]];
            console.log(ojbk[5][2]);
        

  • 特殊数据类型

    • console.log(’ ’ ==0) //返回true
    • console.log(undefined==null)

数据类型转换

• 基础类型(数字,字符,布尔)之间

• 强制类型转换(显示类型转换)

  • 通过js提供的函数进行类型转换
    • Number(),String(),Boolean()
    • perseInt()
    • parseFloat()

• 自动类型转换(隐式类型转换)

运算符

算数运算符

/

%

num++

num–

++num

–num

比较运算符

• 字符串比较ascii码

>

>=

<

<=

!=

===

!==

字符运算符

逻辑运算符

+=

-=

*=

/=

var num = 1;
num+=10 
console.log(num)    //11

位运算符

站位符由第一个数

第一位是0表示正数 //00011111

第一位是1表示负数 //10010110

源码

反码

补码 负数 +1 正数不变

反码

补码 负数-1 正数不变

流程控制

• 默认顺序结构,从上到下,从左到右

if…else

if(1>0){
   console.log('true')
}else{
    console.log('false')
}

var num = '90';

if(num<=60){
    console.log('你可上点心啊老弟');    
}elseif(num<=80){
    console.log('努把力啊臭弟弟');
}elseif(num<=90){
    console.log('还行,继续努力');
}elseif(num<=100){
    console.log('哎呦我草可以啊兄弟')
}else{
    console.log('您鸡儿连试都不考我操了')
}

qian = 4
if(qian<5){
    if(qian>5 && qian < 10){
        if(qian>10 && qian <100){
            console.qian('大于10小于100');
        }
    }else{
        console.log('大于5小于10');
    }
}else{
    console.log('小于5');
}

switch

 num = 1;
switch(num){
    case 1:
        console.log('一等奖');
        break;
    case 2:
        console.log('二等奖');
        break;
    case 3:
    case 4:
    case 5:
        console.log('三等奖');
        break;
    default:
        console.log('谢谢参与');
        break;
}

循环

• break 跳出,终止,后边的代码都不执行
• continue 跳过本次,本次后的代码不执行

while

num = 10;
while(num<20){
    console.log(num);
    num++;
}

do…while

num=1;
do{
    console.log(num);
    num++;
}while(num<10)

for

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

函数

function say_hello(){
    console.log('hello world!!');
    document.write('hello world!!');
}

say_hello();   //调用函数

function js(a,b){
    document.write(a+'*'+b+"="+a*b)
	var mj=a*b;
    return mj;
}
js(2,6);

a,b 为形参,调用传递的参数的值叫实参,return 返回值
    return之后的代码不会执行,不定长参数arguments

function hello(a,b){
    console.log(a+'+'+b+'='+(a+b));
    var score = (a+b);
    return score;
}
var value = hello(4,6)
console.log(value);
if(value>10){
    console.log('健康');
}else{
    console.log('不健康')
}

• 变量的作用域
  • 局部 在函数体内定义的
  • 全局 全局生效

//延迟执行
        function abc(){
            alert('3')
        }
        var time=setTimeout(abc,3000);  //3000的单位是毫秒

匿名函数

• 不给函数命名,直接赋给一个事件

windo.onlad=function(){
    alert('你好')
}

闭包函数

得到对象的方式

<script>
/*
找对象改属性
1.document.getElementById(); 通过id找对象 object HTML div
2.document.getElementsByTagName();//通过标签名 集合数组
3.document.getElementsByClassName();数组
<inpu ttype="text" name="username">
4.document.getElementsByName("username")[0] 通过属性name找对象 (name值)
5.document.images 通过img对象获得数组
6.document.body body里边所有的标签对象
*/
</script>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>can you help me ?</title>
    <style>
        .div{
            width: 100px;
            height: 100px;

        }
    </style>
</head>
    <body>
        <div id="div1" name="name"  class="div" style="background-color: aquamarine;" ></div>
        <div id="div2" name="name"  class="div"  style="background-color:blueviolet;"></div>
        <div id="div3" name="name"  class="div"  style="background-color:red;"></div>
        <div id="div4" name="name"  class="div"  style="background-color:saddlebrown"></div>
        <div id="div5" name="name"  class="div" style="background-color:chartreuse;"></div>
    </body>
    <script>
        var get_div=document.getElementById('div1');        //根据div标签中的id定义
        // console.log(get_div)
        var get_classname=document.getElementsByClassName;    //根据class定义
        // console.log(get_classname);
        var get_name = document.getElementsByName('name');       //根据div标签中的name定义
        // console.log(get_name);
        var get_tagname=document.getElementsByTagName('div');    //根据标签名定义
        // console.log(get_tagname);
        var get_body = document.body;
        console.log(get_body);
    </script>
</html>