JS 笔记及案例

JS 笔记及案例

一、Javascript简介

1.什么是Javascript

Javascript简称JS,由网景公司开发的客户端脚本语言,不需要编译,可以直接运行

web前端三层:

  • 结构层HTML,定义页面的结构
  • 样式层css,定义页面的样式
  • 行为层Javascript用来实现交互,提升用户的体验
2.Javascript的作用
  • 在客户端浏览器上动态的操作页面
  • 在客户端浏览器上做数据的校验
  • 可以在客户端上发送异步请求

二、引用方式

1.内联方式

在页面中使用script标签,在script标签中编写js代码

script可以放在页面的任意位置,一般放在头部

<script>
        js代码
</script>
2.行内方式

在普通标签中编写js代码,一般需要结合事件的属性,如onclick、onmouseover等

提示:什么是事件属性?----面向对象

eg:对象—外观修饰—css实现

​ 行为、事件—某一事件发生的对象不一样,所引发的反应也不会相同----对象的多态性

3.外联方式(外部方式)

使用单独的.js方式定义,然后再页面中使用script标签引用外部脚本文件

<!--2.行内方式-->
    <input type="button" value="点我" onclick=alert("被点击了,晕了")>
    <!--<a href="" onclick="alert('超链接被触发')"></a>-->
    <a href="javascript:alert('超链接被触发')">超链接</a>

    <div onmouseover="alert('走开')">把鼠标移上来</div>

注意:如果某个script标签用于引用外部js文件,则读script标签的标签体中不能写js带码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
   
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <!--1.内联方式-->
    <script>
        // alert("hello script")
    </script>
    <!--3.外部方式-->
    <script type="text/javascript" src="js/hello.js"></script>
</head>
<body>
    第一个Javascript程序
    <hr>
    <!--2.行内方式-->
    <input type="button" value="点我" onclick=alert("被点击了,晕了")>
    <!--<a href="" onclick="alert('超链接被触发')"></a>-->
    <a href="javascript:alert('超链接被触发')">超链接</a>

    <div onmouseover="alert('走开')">把鼠标移上来</div>
</body>
</html>

效果图:

在这里插入图片描述

三、基本语法

1.变量

变量是用来存储常量的量

常量就是固定值 --常数项

这是一门弱类型语言,声明变量时使用var关键字,不需要指定变量的类型

语法:var变量名=常量或表达式

在ECMAscript 6规范中新增let关键字,也用于声明变量

使用let 声明变量支持块级作用域,而使用var声明的变量不支持块级作用域

注:在ECMA中配置ES版本 settings–language&frameworks–JavaScript-- language version

变量的命名规则:

  • 有字母、数字、下划线、汉字组成
  • 由字母、下划线开头
  • 不能和系统关键字重名
  • 区分大小写

了解:变量名的命名;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var name;   //定义了一个变量name
        name="any"; //将字符串常量any赋值给变量name
        name="alice"
        // alert(name);
        var age=18;  //定义了一个变量age,并将整数18常量赋值给age
        //age是一个整型变量
        // alert(age);

        var sex="female" //强烈不建议
        // alert(sex)
        {
   
            var x=8;
            // alert(x);
            let y=7;
            // alert(y);
        }
        // alert(x);
        // 姓名="anny";
        // alert(姓名);
        age="18";
        Age="5";
        alert(Age);
    </script>
</head>
<body>

效果图:
在这里插入图片描述

输入和输出

输出:

  • alert() 弹出警告窗
  • console.log() 输出到浏览器的控制台
  • document.write() 输出到页面

输入:

  • prompt()弹出输入框,获取用户输入的数据

使用typeof变量判断变量的类型

使用number(变量)将字符串转换为数值

3.转义字符

常用转义符:

  • \n 换行
  • \t 向右缩进一个制表位
  • \" 双引号
  • \' 单引号
  • \\ \ 斜杠
4.注释

单行注释 //

多行注释 /* 注释内容 */

5.编码规范

代码是区分大小写的

每条语句以分号结尾

代码要注意缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        <!--输出-->
        // alert("嘿嘿");
        // console.log("哈哈");
        // document.write("嘻嘻");
        // 输入
        // var name=prompt("请输入姓名");
        // console.log(name);
        // var age=prompt("请输入你的年龄");
        // console.log(age,age+2,typeof age);
        // age = Number(age);
        // console.log(age,typeof age);
        // console.log(age+2);
        //转义字符
        console.log("he\'llo\n.world");

    </script>
</head>
<body>

</body>
</html>

效果图:
在这里插入图片描述

四、核心语法

1.数据类型

常量:具体值,不变的量—常数项

变量:变化的量,存储常量的量

基础数据类型:

  • string字符串
  • number数值(NaN表示非数字Not a Number 类型,表示数值的不正常状态)
  • Boolean 布尔
  • null空类型
  • underfined 未定义类型
  • 转换number

使用number()、parselnt()、persefloat()

  • 转换为字符串

拼接空字符串

  • 转换为布尔Boolean

使用Boolean()

注意:0、空字符串、null、underfined、NaN会被转换为

false,其他被转为true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var name = "tom";
        var age = 18;
        var height=165;
        var flog = true;
        var hobby=null;
        var date = new Date();
        var arr = new Array();
        var sex;

        // console.log(typeof name);
        // console.log(typeof age);
        // console.log(typeof height);
        // console.log("hello"-5); //返回了一个NaN表示非数字类型
        // console.log(typeof flog);
        // console.log(typeof hobby);
        // console.log(typeof date);
        // console.log(typeof arr);
        // console.log(typeof sex);
        /*
        类型转换
         */
        //1. 转换为number
        var a = '12';
        // console.log(a,typeof a);
        //方式1:使用number
        // a = Number(a);
        // console.log(a,typeof a);
        // a = Number('12.5');
        // a = Number('12abc');
        // a = Number('abc12');
        //方式2  parsenint()
        // a = parseInt('12'');
        // a = parseInt('12.5');     //转换时去掉小数部分
        // a = parseInt('12abc');     //按照字符的顺序一次解析
        // a = parseInt('abc12');

        //方式3 parsefloat();
        // a = parseFloat('12');
        // a = parseFloat('12.5');
        // a = parseFloat('12abc');
       // a = parseFloat('abc12');

        // var a =12;
        //
        // console.log(a, typeof a);
        // a = a+'';   //后接一个空字符串
        // console.log(a,typeof a);


        //转换为布尔
        // var a;
        // a = Number(false);   //true用1或非0表示,false用0表示
        // console.log(a,typeof a);
        //转换为布尔
        // var a = Boolean(0);
        // var a = Boolean(null);
        // var a = Boolean(undefined);
        // var a = Boolean(NaN);
        // var a = Boolean(4);
        var a = Boolean('tom');
        var name;
        name = 'tom';
        if(name){
   
            console.log(name)
        }
        // console.log(a,typeof a);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

2.运算符

算术运算符:+、-、*、/、%取余、**乘方、++、–

比较运算符:>、>=、<、<=、=、!=不等于

赋值运算符:=、+=、-=、*=、/=、%=

逻辑运算符:&&并且、||或者、!非

条件运算符:条件?表达式1:表达式2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        算术运算符:+、-、*、/、%取余、**乘方、++、--

    比较运算符:>、>=、<、<=、==、===、!=不等于

    赋值运算符:=、+=、-=、*=、/=、%=

    逻辑运算符:&&并且、||或者、!非

    条件运算符:条件?表达式1:表达式2

         */
        //1.算术运算符
        // var a = 5;
        // var b = 3;
        // var c = '2';
        // var d = false;
        // console.log(a+b);
        // console.log(a-b);
        // console.log(a*b);
        // console.log(a/b);
        // console.log(a%b);
        // console.log(a**b);    //a的b次方
        // console.log(a-c);     //当变量c为数字字符,会自动将数字字符转换为数值
        // console.log(a+d);
        // var a = 1;
        // console.log(a++); //先使用a中的值再自加,在原值的基础上再自加,表达式返回变化前a的值,a=a+1;
        // console.log(a--);
        //  console.log(++a); //先自加,再返回值
        //  console.log(a);  //自加自减表达式执行完a的值是多少

        //2.比较运算符
        // var a = 1;
        // var b = true;
        // console.log(a>b);
        // console.log(a<b);
        // console.log(a>=b);
        // console.log(a<=b); //返回值是布尔值

        // console.log(a==b); //判断a和b的值是否相等   只判断a和b的内容是否相等
        // console.log(a===b); //全等于,既判断内容又判断类型
        // console.log(a+b);
        // console.log(a===b);  //在js中true表示1,false表示0

        //3.赋值运算符
        // var a = 8;
        // a += 2;  //a = a + 2;
        // a -= 2;  //a = a - 2;
        // console.log(a);

        //4.逻辑运算符
        var x = true;
        var y = false;
        // console.log(x && y);//两边为真才为真,一边为假就是假
        // console.log(x || y); //两边为假才是假,一边为真就是真
        //逻辑运算的短路问题
        a = 20;
        b = 5;
        console.log(a && b); //0--false
        console.log(a || b);

        //5.条件运算符
        console.log(a>b?a+b:a-b);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用math对象来进行数学运算,用法,Math,方法名
        console.log(Math.abs(-5));
        //2.幂运算
        console.log(Math.pow(2,4));
        //3.四舍五入
        console.log(Math.round(132.745)); //在js中不可以指定四舍五入到第几位
        //4.向上取整,向下取整
        console.log(Math.ceil(3.5));//取大于等于3.5的最小整数
        console.log(Math.floor(3.5));//取小于等于3.5的最大整数
        //5.生成一个[0,0.1]之间随机浮点数
        console.log(Math.random());  //以当前系统时间为随机数种子
        //6.最大值,最小值
        console.log(Math.max(23,25,57,56));
        console.log(Math.min(23,25,57,56));
        //7.圆周率的值
        console.log(Math.PI);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

3.选择结构

if…else、switch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age=25;
        if(age>60)
        {
   
            console.log('老年');
        }
        else if(age>30)
        {
   
            console.log('中年');
        }
        else
        {
   
            console.log('青年')
        }

        var day = '周五';
        switch (day){
   
            case'周一':
                console.log('吃包子');
                break;
            case'周二':
                console.log('吃饺子');
                break;
            case'周三':
                console.log('吃油条');
                break;
            case'周四':
                console.log('吃面条');
                break;
            case'周五':
                console.log('吃油饼');
                break;
            default:
                console.log('不吃了');
                break;
        }
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

4.循环结构

while、do…while、for、for…in

break、continue

break:推出整个循环

continue:结束本次循环,返回到条件判断处继续进行下一次执行循环的条件判断

 var str ='welcome';//将字符串看作是由多个字符组成的集合
        for(var index in str)
        {
   
            // console.log(index);//输出了str索引
            //console.log(str[index]);
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //while
        var i = 1;
        var sum = 0;
        while (i<=100)
        {
   
            sum+=1;
            i++;
        }
        console.log(sum);

        //do..while
        var i = 1;
        var sum = 0;
        do
        {
   
            sum+=1;
            i++;
        }while (i<=101);
        console.log(sum);

        //for
        var sum=0;
        for(i = 1;i<=100;i++)
            if(i%7==0);
                sum+=i;
        console.log(sum);

        //for...in
        // var str='welcome;'//可以将字符串看成由多个字符组成的集合
            // for(var index in str);
        {
   
            // console.log(c); //输出了str的索引
            // console.log(str[index]);
        }
        // s = 'abc';
        // document.write(s[0]);
        // document.write(s[1]);
        // document.write(s[2]);
        //
        //break
        for(var i =1;i<=10;i++)
        {
   
            if(i%2==0)
                continue;
            console.log(i);
        }

    </script>
</head>
<body>

在这里插入图片描述

5.数组
5.1定义方式

语法:

var arr = new array();
var arr = new array(值一,值2,…);
var arr = [1,值2];

注意:

  • 数组的长度会自动扩展
  • 数组中元素的默认值为undefined
  • 使用length属性来获取数组的长度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = Array();
        // arr[0]=12;
        // arr[1]=23;
        // //……
        // console.log(arr.length);
        // console.log(arr[0]);
        // console.log(arr[1]);

        // var arr = new Array('tom','anny','alice');
        // console.log(arr);
        // console.log(arr[2]);
        // console.log(arr[arr.length-1]);
        // var arr = ['tom','jack','alice','anny'];
        // console.log(arr[0]);
        // console.log(arr[arr.length-1]);

        //将1-100之间所有能被3整除的数字放到数组number中,输出这个数组并统计个数
        // var arr = [];
        // for(var i=1;i<=100;i++)
        //     if(i%3==0)
        //         arr[arr.length]=i;
        // console.log(arr);
        // var arr = ['anny','alice','tom']
        // var arr = [24,32,27,59,19];
        // console.log(arr);
        // arr.sort();
        // console.log(arr);
        var arr = ['anny','alice','tom','jack','alice']
        console.log(arr);
        // arr.reverse();
        // arr.join();
        // console.log(arr.join());
        console.log(arr.indexOf('alice'));
        console.log(arr.lastIndexOf('alice'));
        console.log(arr.slice(1,4))
        console.log(arr.slice(1))
        console.log(arr.toString());
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

5.2数组的常用方法
方法 描述
sort() 排序,默认按字符编码进行升序列,非string类型就自动转换为string可自定义比较规则
reverse 反转,将数组元素倒序排列
join 将数组中的元素使用指定的分隔符练成字符串,默认通过逗号连接
indexOf() 返回指定元素在数组中首次出现的位置
slice 截取数组中缩影从begin到end之间的数组,左闭右开,如果省略到第二个参数,则表示截取到末尾
tostring 将数组转换为字符串
5.2二维数组

二维数组可看认为是一个特殊的一维数组,即一维数组中的每个元素又是一个一维数组

var arr = new array();//定义了一个具有m行个元素的特殊的一维数组
arr[0] = new array();//第0行有n个元素
arr[1] = new array();//第一行有n个元素
arr[][]=;

var arr =[
    [1,值2……]
    [1,值2……]
    [值,值2……]
]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = new Array();
        // arr[0] = new  Array();
        // arr[1] = new  Array();
        // arr[0][0]=15;
        // arr[0][1]=9;
        // arr[1][0]=10;
        // console.log(arr);
        var arr = [
            [12,56,32],
            [27,23,64],
            [25,16,39]
        ]
        // console.log(arr[0][1];
        for (var i=0;i<=arr.length;i++)
        {
   
            //循环输出灭行的4个元素
            for(var j=0;j<arr[i].length;j++)
                document.write(arr[i][j]+'&nbsp;&nbsp;');
            //输出每行的换行
            document.write('<br>')
        }
    </script>
</head>
<body>

在这里插入图片描述

六、函数

6.1 函数的定义

语法:

function 函数名(参数1,参数2……)
{
   
    函数体;
}

注意:

  • 定义函数时,不需要指定函数的参数
  • 实参的个数和形参的个数可以不同,未指定实参时形参的默认值为undefined
  • 不需要指定返回值的类型,如果有返回值,直接使用return语句返回即可
  • 如果函数中没有return语句返回值,则默认返回undefined

变量的作用域:

  • 局部作用域

在函数中声明的变量,只能在该函数内访问,函数运行中结束变量会自动销毁

  • 全局作用域

在函数外声明的变量,在任何位置都可以访问

  • 块级作用域

使用let关键字声明的变量,只能在声明它的代码内访问

6.2回调函数

不立即执行的函数调用,满足一定条件时会执行或者由别的代码调用执行,称为回调函数callback调用时只写函数名,没有小括号和参数

应用:

  • 作为时间绑定的函数
  • 作为另一个函数的参数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        <!--1.定义函数-->
        function show()
        {
   
            console.log("嘿嘿");
        }
        function calc(num1,num2,num3)
        {
   
            // console.log(num1,num2,num3);//形式参数
            var sum = num1 + num2 + num3;
            // console.log(sum);
            // return sum;
        }
        //2.调用函数,2个功能 1).返回值 2).执行函数体为目的实现某一功能
        // show();
        var result =  calc(12,6,2,9); //实际参数
        // console.log(result);
        //3.变量的作用域
        // var c = 6;  //全局变量
        // function fn()
        // {
   
        //     var a = 5;  //局部变量
        //     console.log(a);
        //     console.log(c);
        //}//定义函数
        //fn();//调用函数
            function fn()
            {
   
                if(true)
                {
   
                    // var a = 5; //局部变量
                    let a = 5;   //块级变量
                    console.log(a);
                }
                console.log(a);
            }

        fn();
        {
   
            var d = 2;
            let x = 4
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值