2024-09-03 JS基础笔记

.Javascript介绍

JavaScript(简称“JS”)是当前最流行、应用最广泛的客户端脚本语言,用来在网页中添加一些动态
效果与交互功能,在 Web 开发领域有着举足轻重的地位。
JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页
HTML 用来定义网页的内容,例如标题、正文、图像等
CSS 用来控制网页的外观,例如颜色、字体、背景等
JavaScript 用来实时更新网页中的内容,例如从服务器获取数据并更新到网页中,修改某些标签的
样式或其中的内容等,可以让网页更加生动。

JS使用方法

   <title>Document</title>
    <!-- 外部式--在head头部标签中 通过script引入t同级别 .js 结尾的js文件 script 空格 src ./-->
     <!-- 或者 ../ 找到外部js文件 -->
    <script src="这里 ./ -- ../  快速找到js文件"></script>

</head>
<body>
    <!-- 内部式--在body内部写script标签 在标签内写js代码 -->
     <script>
        // 这里写js代码
     </script>
</body>

JS输出

<body>
    <script>
        // print()  print 可以将当前网页内容打印
        // console.log 在控制台输出内容  右击 检查 控制台
        console.log('啊实打实大师大师');
        // alert("hello js") 在网页直接弹出 
        alert('打开网页自动弹出') 
    </script>
</body>

JS注释

<body>
   <script>
       // 这是单行注释
       /*
       这是多行注释
       */
   </script>
</body>

JS变量

<body>
    <!-- JS不需要指定变量的类型,JS的变量类型由他的值来决定 -->
    <script>
        // 声明变量let  变量赋值     简写            多个变量赋值        打印
        // let a;       a='哈哈'   let b='哈哈'     let c=10,d=20      console.log(a,b,c,d);
        // var const
        var aa = '你好'
        const ss = 'nihao'
        console.log(aa,ss);
        /*let用于定义变量 const用来定义常量  var可以先使用在定义*/
        
    </script>
</body>

JS数据类型

<body>
<!-- 分为基础类型 引用类型 -->
<!-- 基本数据类型 字符串型 (String)数值型 (Number)布尔 (Boolean)undefined (Undefined)null (Null)-->
    <script>
        // String用于表示一个字符序列,即字符串。字符串需要使用 '单引号' 或 "双引号" 括起来。
        let a = "这是字符串a"
        let b = '这是字符串b'
        //  Number 类型用来表示整数和浮点数,最常用的功能就是用来表示10进制的整数和浮点数。数值类型有颜色
        // 整数       
        let c = 10
        //  浮点数
        let d = 10.01
        // Boolean布尔型也被称为逻辑值类型或者真假值类型 首字母 t f 为小写
        // true  真
        let aa = true
        // false 假
        let as = false
        // 在使用 let 声明变量但未对其加以初始化赋值时,这个变量的值就是 undefined
        // 变量声明 没有赋值 就会打印undefined
        let aq;
        console.log(a);
        //  Null空,表示空对象,一般用来初始化变量
        // 当变量需要为空的时候 就可以写null
        let ab = null
        let ba = null



        /*引用数据类型--数组 (Array)是一组按顺序排列的数据的集合,数组中的每个值都称为元素,
        而且数组中可以包含任意类型的数据。在 JavaScript 中定义数组需要使用方括号 [ ] 
        数组中的每个元素使用逗号进行分隔  跟python中列表相似*/
        let ar = [1, 2, 3, 4]
        // 通过索引取值
        // 引用数据类型
        // 1.数组 []表示
        // 我们可以通过索引取值
        let arr = [1, 2, 3, 4, 5, 6]
        console.log(arr[0]);
        // 不支持负数索引//逆向索引
        console.log(arr[-2]);
        // 获取数组的长度 length
        // 从数组最后添加和删除数据
        // push() 方法用于向数组的末尾添加一个或多个元素
        // pop() 方法用于删除并返回数组的最后一个元素
        arr.push(5);
        console.log(arr);
        arr.pop();
        console.log(arr);
        console.log(arr.length);
        // 根据下标添加和删除元素 splice
        arr.splice(start, num, element1, ...elementN)

        /*参数解析:
        1、start:必需,开始删除的索引
        2、num:可选,删除数组元素的个数
        3、elementN:可选,在start索引位置要插入的新元素
        此方法会删除从start索引开始的num个元素,并将elementN参数插入到start索引位置*/
        let arra = [1, 2, 3, 4, 5]
        arra.splice(1, 0, "苹果")
        console.log(arra);
        arra.splice(1, 2)
        console.log(arra);
        arra.splice(1, 0, "鸭梨", "香蕉")
        console.log(arra);

        //对象 (Object)在 JavaScript 中,对象是一种复合数据类型,用于存储键值对。对象可以包含各种类型的数据
        let bq = {
            name: "景明",
            age: 18,
            sex: "男",
        }
        // 对象取值  需要通过.来取值
        console.log(bq);
        console.log(bq.name);
        console.log(bq.age);

判断类型

        // typeof 判断类型  场景:基本数据类型的判断
        let aw = '我是字符串类型'
        let bw = 10
        let cw = undefined
        let dw = null
        let ew = true
        console.log(typeof aw); // string
        console.log(typeof bw); // number
        console.log(typeof cw); // undefined
        console.log(typeof dw); // 如果值是null 打印会为object类型
        console.log(typeof ew); // boolean

运算符

<body>
    <script>
        // 运算符  字符串拼接 字符串拼接使用"+"运算符
        let ae = 33
        let be = 40
        // 77
        console.log(ae + be);
        let cq = "33"
        let dq = 44
        // 字符串和数字进行拼接,自动把数字类型转换成字符串
        // 3344
        console.log(cq + dq);
        // 算数运算符 用于表达式计算。加+  减- 乘* 除/ 自增++ 自减 --
        let a = 10
        let b = 20
        console.log(a + b); // 30
        console.log(a - b); //-10
        console.log(a * b); //200
        console.log(a / b); //0.5
        console.log(++a); //11
        console.log(--b); //19
        // 赋值运算符 赋值运算符用于给 JavaScript 变量赋值。=  +=  -=
        let aq = 10
        let bq = 20
        console.log(aq = 100); //结果 100
        console.log(aq += bq); // a=a+b 结果 30
        console.log(aq -= bq); // a=a-b 结果 -10
        // 比较运算符  == 判断两边的值是否相等 不判断类型 如果相等返回true,否则返回false 只要值相等就相等
        let aw = 30
        let bw = "30"
        console.log(aw == bw); //值相等就会相等  true
        //  != 用来判断两个值是否不相等  如果不相等返回true,否则返回false
        let aa = 30
        let bb = "30"
        console.log(aa != bb); //值相等就会相等  false
        // === 判断两边的值 和数据类型是否相等 ---判断全等
        let ar = 30
        let br = "30"
        console.log(ar === br); //  false
        // 值和类型都相等就会相等 相等返回 true
    </script>
</body>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,084评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,623评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,450评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,322评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,370评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,274评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,126评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,980评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,414评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,599评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,773评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,470评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,080评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,713评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,852评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,865评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,689评论 2 354

推荐阅读更多精彩内容