js_入门

js

  • js放入网页的方式

    1、内联使用:放入标签里面

    2、内部使用:多数放在body里面

    3、使用外部js

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
        
        
    head>
    <body>
        
        
        
        
        
        
    
        
        
    
        
        
        
    
    body>
    
  • 在js中声明变量

    声明变量的关键字:
    var:声明函数级别(在方法里面声明局部变量)
    let:声明块级级别(在语句中声明变量)
    const:声明常量的

    <body>
        
        
         <script>
            // 声明一个变量
            var a = 1; // 声明一个a变量,里面放入整数
            var a = 1.5;
            var a = "abc";
            var a = 'd';
            var a = true;
    
            let b = "老王,掉了啥...";
            b = 23;
           
            const NUM = 10;
         script>
    body>
    
  • js的三种打印方式

    1、alert():弹出

    2、通过document.write()向页面写入

    3、通过浏览器的控制台

    <body>
        
        <script>
            //1、alert():弹出 
            // var a = 1;
            // alert("a = " + a);
            // var a = true;
            // alert("a = " + a);
            // a = 1.5;
            // alert("a = " + a);
            // a = "老王吧";
            // alert("a = " + a);
    
            // 2、通过document.write()向页面写入
            let a = false;
            // document.write(a);
            // document.write("
    ");
    // a = "去百度"; // document.write("" + a + ""); // document.writeln(a) // let b = 3.1415926 // document.writeln(b) // 3、通过浏览器的控制台 console.log(a); console.log("dsgfdg");
    script> body>
  • js中的原生数据类型

    number:数字(数值)类型
    boolean:布尔,true false
    string:字符串
    null:object类型对象类型
    undefined:未定义,变量未赋值
    Infinity:无穷大
    NaN:非数字

    注意:判断变量的类型 typeof 或 typeof()

    <body>
        <script>
            // var a = 3.14;
            // alert("a = " + a);
            // document.write("a")
            // console.log(a);
            // console.debug(a);
            // console.error(a);
            // console.info(a);
            // console.log(b);
            // js中的原生数据类型:number:数字(数值)类型,boolean:布尔,true false
            // string:字符串,null:object类型对象类型,undefined:未定义,变量未赋值
            // Infinity:无穷大
            // NaN:非数字
            var a = 1; // number
            var b = true; // boolean
            var c = "abc"; // string
            var d = 'abc'; // 
            var e = null; // object
            var f; // undefined
            console.log(1 / 0); // Infinity
            console.log("abc" / 2); // NaN
    
            // 判断变量的类型 typeof 或 typeof()
            console.log(typeof a); // 查看a变量的数据类型
            console.log(typeof b); // 查看b变量的数据类型
            console.log(typeof c); // 查看c变量的数据类型
            console.log(typeof d); // 查看d变量的数据类型
            console.log(typeof e); // 查看e变量的数据类型
            console.log(typeof f); // 查看f变量的数据类型
            console.log(typeof(h))
            ;
    
        script>
    body>
    
  • 关系/比较运算符

    比较运算符用于判断两个变量大小关系:>、<、、<=、>=、=、!=、!===,其中:

    (1) == :代表相等(它只比较内容,不比较类型)

    (2) ===:绝对相等(先比较类型,再比较内容)

    (3) !==:绝对不等

  • JavaScript流程控制

    JS中同Java一样存在流程控制语句,用法一样:

    分支:

    (1) if语句
    (2) switch语句
    

    循环:

    (1) while语句
    (2) do-while语句
    (3) for循环
    	1.普通for循环
    	2.for in 循环
    	3.forEach循环
    

    break/continue语句

    三目表达式

    <body>
        
        <script>
            // if语句
            // var a = 9;
            // if(a % 2 === 0) {
            //     console.log(a + "是偶数");
            // }else{
            //     console.log(a + "是奇数");
            // }
    
            // var age = 20;
            // if(age >= 0 && age < 18) {
            //     console.log("未成年");
            // } else if(age >= 18 && age < 60) {
            //     console.log("青年");
            // } else if (age >= 60 && age < 200) {
            //     console.log("老年");
            // }else {
            //     console.log("无效年龄");
            // }
    
            // 在if中那些条件为假:0,null,"" 空字符串,undefined,NaN,false
            // if(false) {
            //     alert("真");
            // }else {
            //     alert("假");
            // }
            // var a =  5;
            // switch(a) {
            //     case 1:
            //         console.log("查询");
            //     break;
            //     case 2:
            //         console.log("修改");
            //     break;
            //     case 3:
            //         console.log("删除");
            //     break;
            //     default:
            //         console.log("无效选择");
            //     break;
            // }
    
            // 循环语句
            // var i = 1;
            // while(i <= 10) {
            //     console.log(i);
            //     i++;
            // }
    
            // var i = 10;
            // do {
            //     console.log(i);
            //     i--;
            // }while(i >= 1);
    
            // for(var i = 1; i <= 10; i++) {
            //     console.log(i);
            // }
    
            // 循环中断语句:break continue
            // for(var i = 1; i <= 10; i++) {
            //     if(i % 2 === 0 && i % 3 === 0) break;
            //     console.log(i);
            // }
    
            // for(var i = 1; i <= 10; i++) {
            //     if(i % 2 != 0) continue;
            //     console.log(i);
            // }
    
            // 三目运算符 x ? y : z;
            var a = 15;
            var b = 34;
            var max = a > b ? a : b;
            console.log(max);
     
        script>
    body>
    
  • JavaScript函数

函数是一组可以随时运行的代码语句,此处大家可以理解为方法

函数作用:可以避免载入时执行,可以被多次调用

  • 语法

    function 函数名(参数列表:可以没有){
    	JS代码;
    	[return 返回值;]
    }
    
  • 全局变量和局部变量

    全局变量:函数外面声明,局部变量:函数里面声明的

  • 匿名函数

    匿名函数顾名思义就是一个没有定义名称的函数:

    function (参数列表){	
        JS代码	
        [return 返回值;]
    }
    
    <body>
        <script>
            // 匿名函数
            /*
                var 变量名 = function() {
    
                }
            */
            var m = function() {
                console.log(10 > 20 ? 10 : 20);
            }
    
            // 匿名函数的调用,声明变量名()
            m(); // 调用匿名函数
    
            (function() {
                alert("匿名函数")
            })();
        script>
    body>
    
  • 常用的本地对象

    new 调用,创建对象,再对象去点方法

    • Date:日期对象,表示当前的系统日期
    • String:字符串对象
    • 本地对象Array:数组
    <body>
        
        
        
    
        
        
        
        <script>
            // 创建数组
            // var arrs = new Array(); // 创建一个空数组
            // arrs[0] = 10;
            // arrs[1] = 20;
            // arrs[2] = "abc";
            // arrs[3] = 40;
            // arrs[4] = true;
            // console.log(arrs.length);
    
            // var arrs2 =  Array(10);
            // for(var i = 0; i < arrs2.length; i++) {
            //     arrs2[i] = "a" + i;
            // }
            // arrs2[10] = 123;
            // console.log(arrs2.length);
    
            // var arrs3 = [10,20,30];
            // console.log(arrs3.length);
            // console.log(arrs3[2]);
    
            var arrs4 = new Array(10,20,30,40);
            console.log(arrs4.length);
        script>
    body>
    
  • 内置对象:不能new

    • Global:全局对象
    • Math:数学对象
    <body>
        
        <script>
            // var a = "123";
            // // Global:全局对象
            // var a2 = parseInt(a);
            // console.log(a2 + 1);
    
            // var s = String(123);
            // console.log(s + 1);
    
            // var s2 = "3 + 2 - 5";
            // var s3 = eval(s2);// 将s2中的表达式进行运算
            // console.log(s3);
    
            // Math:数学对象
            console.log(Math.ceil(3.0001));
            console.log(Math.floor(3.999999));
            console.log(Math.round(3.599999));
            console.log(Math.random());
            console.log(Math.pow(2,4));
            console.log(Math.sqrt(16));
        script>
    body>
    

你可能感兴趣的:(javascript,前端,开发语言)