javascrip初学笔记

1.js是什么:

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言

2.浏览器如何执行js代码:

        浏览器存在两个引擎:1.渲染引擎:执行html和css语句2.js引擎

浏览器会将js逐行编译执行

3.js的组成部分(三部分)

1.ECMAScript  (js语法)  2.DOM(页面文档对象模型)      3.BOM(浏览对象模型)

4.js书写的三个地方,js的注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2.内嵌式的js -->
    <script>
        // alert('沙漠骆驼');
        //单行注释 ctrl+/
        
         /* 多行注释 shift+ctrl+/  */
       
    </script>
    <!-- 3.外部js script双标签 -->
    
    <script src="my.js"> </script>
</head>
<body>
    <!-- 1.行内是js,直接写在元素内 -->
    <!-- <input type="button" value="李白" onclick="alert('秋香姐')"> -->
</body>
</html>

5.变量

变量是程序在内存中申请出来的用来存放数据的空间
//声明变量
var age;

6.输入,输出,控制台打印

 <script>
        // 这是一个输入框
        prompt('请输入你的年龄');
        //弹出警示框
        alert('计算的结果是');
        // console 控制台输出 给程序员看的
        console.log('我是程序员能看到的')
        //声明变量
        var age;//声明一个名称为age的变量
        //把值存入变量中
        age=10;
        console.log(age);
    </script>

7.变量赋值问题

//只声明不赋值 undefined(未定义的)
        var sex;
        console.log(sex);
        // 声明变量的特殊情况
        // 1.只声明不赋值 结果是undefined(未定义的)
        var sex;
        console.log(sex);
        // 2.不声明 不赋值 直接使用某个变量会报错
        console.log(tel);
        // 3.不声明直接赋值使用
        qq=10;
        console.log(qq);

8.变量总结

//为什么需要变量?:用来保存数据
//变量是什么?:用来存放数据的容器
//变量的本质是什么?是内存里的一块空间,用来存放数据的
//变量是怎么使用的?1。声明变量,2.赋值   声明变量本质是去内存中申请空间
//什么是变量的初始化? 

9.数字型

//变量的命名规范
        //var num; js的变量数据类型是只有程序在运行过程中,根据等号的值来确定
        var a=29;//数字类型
        a='huhu';//变成字符串类型的了
        //js中可以把数据类型分为两类
        //1. 简单数据类型(number ,String ,boolean ,undefined ,null)
        //2. 复制数据类型(object)
        // 示例
            var num=2;
            var num1=2.01;
            var num2=010;
            console.log(num2);
            //八进制前面加0
            var num3=010;
            console.log(num3);
            //16进制前面加0x
            var num4=0x1a
            console.log(num4);
        //3.数字型的最大值
            console.log(Number.MAX_VALUE);
            console.log(Number.MIN_VALUE);
            //Infinity (无穷大)
            console.log(Number.MAX_VALUE*2);
            //-Infinity (无穷小)
            console.log(-Number.MAX_VALUE*2);
            //Nan 非数字的
            console.log("sssss"-2);

10.转义字符

//isNaN:判断是不是非数字,不是的话返回true 
        var num=9;
        num="dd";
        console.log(isNaN(num));
        console.log("dd");
        //字符串遵循外双内单,外单内双的原则
        var str='我是一个"/===高富帅"程\'序员'
        console.log(str);
        //字符串转义字符 都是用 \ 开头 但是这些转义字符写到引号里面
        var str1="我是一个'高富帅'程\n序员"
        console.log(str1);

 11.字符拼接

var str='酷热难耐,\n在火热的太阳底下,\n我挺拔的身姿:"收废品~"';
        alert(str);
        console.log(str.length);
        console.log("ss"+true);
        var age = prompt("请输入你的年龄");
        var str = "你的年龄是"+age;
        console.log(str);
        var flage=true;
        // true 算术运算相当于1 false 相当于 0
        var falge1=false;
        console.log(flage+1);
        console.log(falge1+1);
        //如果声明了一个变量为赋值,就是unfefined未定义数据类型
        var ss;
        console.log(ss);
        var variable=undefined;
        console.log(variable+"11"); //unferfined+字符得到的结果是字符串
        console.log(variable+1); //unferfined+数字得到的是NaN
        var space =null;
        console.log(space);

12.数据类型转换函数

//数据类型转换
        //使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能简单的进行加法运算,而需要转换成变量的数据类型,就是把一种数据类型转换成另外一种数据类型
        //我们常用的三种转换方式
        //1.转换成字符串类型  
        /* 
        三种方式
            1.toString() 转换成字符串 
            2.String()强制转换 alter(String(num))
            3.加号拼接字符串 alter(num+"我是字符串")
         */
        var num=10;  //1.
        var str=num.toString();
        console.log(typeof str);
        console.log(num.toString());
        console.log(typeof num);
        var num1=11;  //2.
        var str1=String(num1);
        console.log(typeof str1);
        var num3=112;  //3.这种方式也称之为隐式转换
        console.log(typeof(num3+''));
        //2.转换成数字类型(重点)
        /* 
        四种方式
            1.parseInt(String)函数 将数据转换成整数数据类型 parseInt('45')
            2.parseFloat(String) 将函数转换成浮点数数据类型 parseFloat('1.22')
            3.Number()强制转换函数 将String类型转换为数值型 NUmber('3')
            4.js隐式转换(- * /) ;利用算术运算饮食转换为数值型 '12'-2
         */
        var age=prompt("请输入你的年龄");//1.
        var num4=parseInt(age);
        console.log(num4);
        var age1=3.12;
        console.log(parseInt(age1)); 
        console.log(parseInt('120px')); //可以用来删除单位
        console.log(typeof num4);//2.
        var age2='2.22';
        console.log(parseFloat(age2));
        var age3='12.22';//3.
        console.log(Number(age3));
        var age4='12';
        console.log(age4-6);
        console.log('123'-'12');
        //3.转换为布尔类型
        /* 
        Boolean()函数 Boolean('true')
        代表空、否定的值会被转换为false ,如''、0、NaN、null、undefined
        其余值都会被转换为true
         */
        console.log(Boolean(''));
        console.log(Boolean('1'));
        console.log(Boolean('false'));//true
        console.log(Boolean(true));
        console.log(Boolean(undefined));
        console.log(Boolean(null));
        console.log(Boolean('null'));//true
        console.log(Boolean(NaN));

13.算数运算符

var num = prompt("请输入第一个值");
        var num1 = prompt("请输入第二个值");
        var sum =  parseFloat(num)+parseFloat(num1);
        alert(sum);
        alert("" + sum)
        console.log(sum);
        alert(1 + 1);
        console.log(5%3);
        console.log(0.1+0.2);//避免使用浮点数直接参与运算,会出现经度丢失等问题
        console.log(0.07*100); //7.000000000000001
        //算数运算符 +、-、*、/、%
        console.log(num++ * 2);  //2
        console.log(num++ + 1);  //3
        console.log(++num * 2);  //6 
      var a=10; //前置递增和后置递增的区别 1.前置递增,先自加后运算 2.后置递增,先原值运算,后自加
        console.log(a++ + ++a); //22

14.比较运算符

//比较运算符 < 、>、>=、<=、==、!=、===、!==
        console.log('3'<=5);
        console.log('5'==5);//true
        console.log('5'===5); //false 全等要求值和数据类型都一致
        //= :赋值 ==:判断 

15.逻辑运算符

//逻辑运算符 &&  || ! 与或非
        console.log(3 > 5 && 3 > 2);
        console.log(123&&456);
        console.log(123||456);
        //逻辑与短路运算 如果表达式1 结果为真,则返回表达式2 除了0 之外所有的值都是为真的 如果表达式1为假,则返回表达式1
        console.log(0&&123);
        console.log(123&&false);
        console.log(1 && 1*5 && 12*45);
        console.log(123||false);
        // 为假的数据 其余为真 0、''、null 、 undefined 、 NaN
        console.log(0||''||12||null);
        //逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1
        //总结 逻辑与出现错误的时候返回数据 ,逻辑或再出现正确的时候返回数据

16.赋值运算符

//赋值运算符 = 、+=、-+、*=、/=、%=
        var num = 8;
        console.log(num);
        num+=2;
        console.log(num); //10
        num-=3;
        console.log(num); //7
        num*=2;
        console.log(num); //14
        num/=2;
        console.log(num); //7
        num/=3;
        console.log(num); //2.3333333333333335
        num%=3
        console.log(num); //2.3333333333333335

17.var关键字

//全局变量和局部变量
            
            // function test1(){
            //      var message = "hi"; //局部变量离开方法,会报错
            // }
            // test1();
            //  console.log(message);
            function test(){
              message1 = "hi"; //不带var定义可以设置为全局变量
            }
            test();
            console.log(message1);
            var age = 1;
            var age = 2;
            console.log(age);
            function foo(){  //使用var关键字修饰的变量会被提升到函数作用域的顶部
                // var age = 1;  会报错
                console.log(age12); 
                var age12 =89;
            }
            foo();//输出结果是undefined

之所以不会报错,是因为 ECMAScript 运行时把它看成等价于如下代码:
function foo() { 
 var age; 
 console.log(age); 
 age = 26; 
} 
foo(); // undefined
let 与 var 的区别
在使用 var 声明变量时,由于声明会被提升,JavaScript 引擎会自动将多余的声明在作用域顶部合
并为一个声明。因为 let 的作用域是块,所以不可能检查前面是否已经使用 let 声明过同名变量,同
时也就不可能在没有声明的情况下声明它

18.let与var

//let 跟 var 的作用差不多,但有着非常重要的区别。最明显的区别是,let 声明的范围是块作用域,而 var 声明的范围是函数作用域。
            // if(true){
            //     var age = 26;
            //     console.log(age);
            // }
            // console.log(age);
            // if(true){
            //     let age = 23;
            //     console.log(age);
            // }
            // console.log(age); //age is not defined
            console.log(name);
            var name = "Matt";//可显示
            // console.log(age);//未定义的
            let age = 36;

19.if else 

age = 18;
            console.log(age);
            console.log(typeof sex);
            if(typeof name === 'undefined'){
                let name ; //无法进去 小坑 name 在js中是保留字
            }
            name ="matt";
            console.log(name);
for(var i =0 ;i<8;i++){
                console.log(i);
            }
            console.log(i);
            for (let j = 0; j < 5; j++) {
                console.log(j);               
            }
            console.log(j);//undefind let作用域仅限于for循环内部

20.setTimeout()函数

             for(var n = 0;n<6;n++){
                setTimeout(()=>console.log(n),0) //setTimeout(code,time) code需要时函数如果不是则报错或者直接执行
            }
            let m=9;
            for(let m = 0;m<6;m++){
                setTimeout(()=>console.log(m),0) //setTimeout(code,time) 会在下面代码执行完毕后执行
            }
             console.log(m); 
//              之所以会这样,是因为在退出循环时,迭代变量保存的是导致循环退出的值:5。在之后执行超时
//                  逻辑时,所有的 i 都是同一个变量,因而输出的都是同一个最终值。
//              而在使用 let 声明迭代变量时,JavaScript 引擎在后台会为每个迭代循环声明一个新的迭代变量。
//                  每个 setTimeout 引用的都是不同的变量实例,所以 console.log 输出的是我们期望的值,也就是循
//                  环执行过程中每个迭代变量的值。

21.for of ,for in

const person ={};
            person.name="kk";
            person.name="dd";
            console.log(person.name);

            for (const key in {a: 1, b: 2}) { 
                console.log(key); 
            }
            for (const key of {a: 1, b: 2}) { 
                console.log(key); 
            }

22.数据类型6+1

//ECMAScript 有 6 种简单数据类型(也称为原始类型):Undefined、Null、Boolean、Number、
String 和 Symbol。Symbol(符号)是 ECMAScript 6 新增的。还有一种复杂数据类型叫 Object(对
象)。Object 是一种无序名值对的集合。

23.undefined类型

let  message;
            // age; //undefined
            if(message){
                console.log("ss");
            }
            if(!message){
                console.log("aa");
            }
            // if(age){  //undefined
            //     console.log("dd");
            // }

24.科学计数法

let message = undefined;
            let messageAsBoolean = Boolean(message);
            console.log(messageAsBoolean);
            let num = 012;
            console.log(num);
            console.log(+0==-0);
            console.log(.1); //输出0.1
            console.log(1.0);
            console.log(1.2e7);
            console.log(0.1000e1);
            console.log(0.0000000005);//自动转换成科学计数法

25.类型转换

console.log(5-0);
            console.log(9/+0); //indefined(无穷值无法进行算数运算)
            console.log(undefined);
            let num = '1.2';
            console.log(num+"");
            console.log(typeof(num));
            console.log(parseFloat("1.33K"));//1.33
            console.log(parseInt("1.33k"));//1
            console.log(parseInt(""));//NaN
            console.log(Number(""));//0
            console.log(parseInt("0xf",16)); //可以指定转换的进制
            console.log(parseInt("AF",16));//175
            console.log(parseInt("AF"));//NaN
            console.log("ss\nddd"); //会导致换行的出现
            let str ="java"
            console.log(str);
            console.log(str+"Script"); //先创建java和script两个字符串,然后将其拼接起来,最后销毁java 和script
            console.log(new Date());//输出当前时间
            let myMultiLineString = "first line \n second line";
            console.log(myMultiLineString);
            let myMultiLineStringTemplate = `first
             second line`
             console.log(myMultiLineStringTemplate.length);
             console.log(myMultiLineStringTemplate);

26.模板字符串

//模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式
 let pageHTML = `
                <div>
                <a href = "#">
                <span>Jack</span>
                </a>
                <div>`;
            console.log(pageHTML);
            let value = 5;
            let exponent = 'second';
            let interpolatedString = 
            value + 'to the ' + exponent + 'power is ' + (value * value);
            console.log(interpolatedString);
            let interpolatedTemplateLiteral = `${value} + "是" +${exponent} +"ddd"` //所有插入的值都会使用 toString()强制转型为字符串
            console.log(interpolatedTemplateLiteral);
            let num = 11;
            console.log(num.toString());
            let foo = { toString: () => 'World' };
            console.log(foo);
            console.log(typeof(foo));

            function simpleTag(strings,...expressins){
                console.log(strings);
                for(const expression of expressions) { 
                    console.log(expression); 
                }
                return 
            }
            const name =11;//常量,不允许重新赋值
            name=90;
            console.log(name);


function printRaw(strings){
                console.log("Acturl characters");
                for(const string of strings){
                    console.log(string);
                }
                for(const rawString of strings.raw){
                    console.log(rawString);
                }
            }
            printRaw`\u00A9${ 'and' }\n`;  

27.eval()

let i = 0;
            if(i>9){
                console.log(i);
                alter("是较大的数字");
            }else if(i<=9){
                console.log(i);
                alert("是较小的数字");
            }
            var a=1;

            var b=["a","=",2];

            eval(b[0]+b[1]+b[2]);

            console.log(a);
            let c=9;
            eval("c"+"="+2) //eval:参数为字符串,进行表达式计算
            console.log(c);

            /*Obfuscated by JShaman.com*/

            var a=0x2c0f8^0x2c0f9;

            var b=['a','=',0xe3b2c^0xe3b2e,'constructor'];

            [][b[0xa8ddf^0xa8ddc]][b[0xb3a35^0xb3a36]](b[0x3333f^0x3333f]+b[0x84d18^0x84d19]+b[0x50958^0x5095a])();

            console['log'](a);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值