• 售前

  • 售后

热门帖子
入门百科

javascript 入门第一天

[复制链接]
彩云彩2017 显示全部楼层 发表于 2022-1-12 12:13:23 |阅读模式 打印 上一主题 下一主题

typora-copy-images-to: img

今日内容

  • JavaScript介绍
  • JavaScript的基本语法
  • JavaScript的属性和文本操作
  • JavaScript的Dom操作
一.JavaScript介绍

1. JavaScript概述

​ JavaScript是一门客户端脚本语言,基于对象和事件驱动的一门客户端脚本语言,可以直接在浏览器端运行。


  • 客户端: 浏览器
  • 脚本语言:无需编译,可以直接运行(只要电脑上安装了浏览器,可以运行javascript语言)
  • 基于对象:javascript已经提供好了大部分对象,前端开发者,可以直接使用这些对象(对象无需创建,直接使用)
  • 事件驱动:通过触发事件,驱动事件绑定的javascript代码,实现网页的动态效果。
  • 核心功能就是增强用户和 HTML 页面的交互过程,让页面有一些动态效果。以此来增强用户的体验!

2.JavaScript发展历程



  • 1995 年,NetScape (网景)公司,开发的一门客户端脚本语言:LiveScript。
    后来,请来 SUN 公司的专家来 进行修改,后命名为:JavaScript。
  • 1996 年,微软抄袭 JavaScript 开发出 JScript 脚本语言。
  • 1997 年,ECMA (欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,统一了所有客户 端脚本语言的编码方式。
  • 总结
    1. 1995 年,NetScape (网景)公司,开发的一门客户端脚本语言:LiveScript。后来,请来 SUN 公司的专家来 进行修改,后命名为:JavaScript。
    2. 1996 年,微软抄袭 JavaScript 开发出 JScript 脚本语言。
    3. 1997 年,ECMA (欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,统一了所有客户 端脚本语言的编码方式。
    复制代码

3.JavaScript和Java的关系

==JavaScript和java的不同之处


  • JavaScript是一门脚本语言:无需编译,可以直接运行(在浏览器运行)
  • Java是一门编程语言:先编译,后运行(编译的过程依赖与jvm)
  • JavaScript是基于对象的脚本语言:对象可以直接使用,无需创建
  • Java是面向对象的编程语言:对象必须先创建,然后再使用
  • JavaScript是一门弱类型的脚本语言,指的在JavaScript所有类型都可以使用var来表示
    比如:var num=10; var str=“hello”, var flag = true;
  • Java是一门强类型的编程语言,指的在定义变量时,必须先确定类型,然后在定义变量。
    比如:int num=10; String str=“hello”; boolean flag = true;
==JavaScript和java的相同之处


  • JavaScript 和 java的定义基本语法很相似
  • javaScript书写方式和 java的书写的代码方式很相似
4.JavaScript组成


  • ECMAScript
    规范了javascript的基本语法
  • DOM
    document object model : 文档对象模型(由一系列文档对象构成的模型)
    作用:操作标记性的文档(指的xml或者html文档)
  • BOM
    browser object model: 浏览器对象模型(由一系列浏览器对象构成的模型)
    作用:操作浏览器的。
5.JavaScript小结



  • javascript是一门客户端脚本语言
  • javascript是一门弱类型语言(即使有时语法写的很不规范,也不报错)
  • javascript的三个组成部分= 基本语法+DOM+BOM
  • 常见的前端开发工具
    前端开发工具:开发前端代码,比如 html,css, javascript

    • HBuilder (国产的开发工具): 强大很好用,收费的
    • Vscode (非国产的开发工具):强大很好用,收费的
    • WebStom (非国产的开发工具):强大很不好用,收费的
    • DreamWeaver(非国产的开发工具): 不强大,很好用
    后端开发工具: 开发后端的代码,当然也可以开发前端代码(缺点:补全功能不是很好)
       

    • Idea(集成开发工具): 开发所有语言,开发前端语言,不方便
    • Eclipse(集成开发工具): 开发java语言,开发前端语言,不方便
    • MyEclipse(集成开发工具): 开发java语言,开发前端语言,不方便
    • STS(spring tools suitable 集成开发工具): 开发java语言,开发前端语言,不方便

二.JavaScript的基本语法

1.语法规范



  • 区分大小写的
  • 每行代码结束,建议使用分号表示。
  • 代码书写格式(建议与java的代码书写格式保持一致)
2.javascript入门程序


  • 入门程序
    1. <!DOCTYPE html>
    2. <html>
    3.         <head>
    4.                 <meta charset="UTF-8">
    5.                 <title></title>
    6.         </head>
    7.         <body>
    8.                 <script type="text/javascript">
    9. <body>
    10.                 <script type="text/javascript">
    11.                         //1.定义变量 num=10;
    12.                         var num = 10;
    13.                         //2.弹出的警告框
    14.                         alert(num);
    15.                        
    16.                 </script>
    17.         </body>//1.定义变量 num=10;
    18. <body>
    19.                 <script type="text/javascript">
    20.                         //1.定义变量 num=10;
    21.                         var num = 10;
    22.                         //2.弹出的警告框
    23.                         alert(num);
    24.                        
    25.                 </script>
    26.         </body>var num = 10;
    27. <body>
    28.                 <script type="text/javascript">
    29.                         //1.定义变量 num=10;
    30.                         var num = 10;
    31.                         //2.弹出的警告框
    32.                         alert(num);
    33.                        
    34.                 </script>
    35.         </body>//2.弹出的警告框
    36. <body>
    37.                 <script type="text/javascript">
    38.                         //1.定义变量 num=10;
    39.                         var num = 10;
    40.                         //2.弹出的警告框
    41.                         alert(num);
    42.                        
    43.                 </script>
    44.         </body>alert(num);
    45. <body>
    46.                 <script type="text/javascript">
    47.                         //1.定义变量 num=10;
    48.                         var num = 10;
    49.                         //2.弹出的警告框
    50.                         alert(num);
    51.                        
    52.                 </script>
    53.         </body>
    54.                 </script>
    55.         </body>
    56. </html>
    57. 注意: 书写js代码时,一定一定加上<script> js代码 </script>
    复制代码
3.javascript与html结合的两种方式



  • 方式一: 直接在html里面,嵌入js代码
    优点:可以直接看到书写的js代码
    缺点:js代码和html标签在一起,不便于后期的维护
    1. <body>
    2.                 <script type="text/javascript">
    3.                         //1.定义变量 num=10;
    4.                         var num = 10;
    5.                         //2.弹出的警告框
    6.                         alert(num);
    7.                        
    8.                 </script>
    9.         </body>
    复制代码
  • 方式二:引入外部的js文件
    步骤一: 先定义好一个js文件, 步骤二:通过script标签的src属性引入外部定义好的js文件
    优点:便于后期js的代码维护
    outer.js:
    1. //1.定义变量 num=10;
    2. var num = 10010;
    3. //2.弹出的警告框
    4. alert(num);
    复制代码
    在html网页里面引入:外部的js文件
    1. [/code]
    2. [*] 细节
    3. [/list][size=3]4.javascript的注释[/size]
    4. [list]
    5. [*]和java的注释基本一样
    6. [*]单行注释: // 注释内容
    7. [*]多行注释:/* 注释内容 */
    8. [/list] [size=3]5.五种原始类型[/size]
    9. [list=1]
    10. [*] java的类型和javascript的类型基本一样
    11. [*] javascript里面的类型分为两大类型
    12. [list]
    13. [*] 判断变量属于什么类型的,可以使用关键词:[b]typeof[/b]
    14. [*] 原始类型
    15. [list=1]
    16. [*]number类型: 数字类型
    17. [*]string类型: 字符串或者字符
    18. [*]null类型:比如: 定义一个变量,赋值为null , var a =null;
    19. [*]undefined类型:未定义类型,比如: 定义一个变量,没有赋值 ,var a;
    20. [*]boolean类型:表示true或者false…
    21. [/list]
    22. [*] 引用类型
    23. [list=1]
    24. [*]Boolean类型
    25. [*]Number类型
    26. [*]String类型
    27. [*]等等
    28. [/list]
    29. [*] 代码演示
    30. [code]
    复制代码

6.常量和变量



  • javascript是一门弱类型的脚本语言,在定义变量或者常量时,不用指定类型,或者可以使用var, let, const
  • 定义局部变量,使用关键词: let
    比如:let num=10;
    建议 把let放在方法内部(放在方法方法外部也可以,不建议)
    1.                   //2.定义方法一:<body>
    2.                 <script type="text/javascript">
    3.                         //1.定义变量 num=10;
    4.                         var num = 10;
    5.                         //2.弹出的警告框
    6.                         alert(num);
    7.                        
    8.                 </script>
    9.         </body>function test1(){<body>
    10.                 <script type="text/javascript">
    11.                         //1.定义变量 num=10;
    12.                         var num = 10;
    13.                         //2.弹出的警告框
    14.                         alert(num);
    15.                        
    16.                 </script>
    17.         </body>        //1.定义局部变量<body>
    18.                 <script type="text/javascript">
    19.                         //1.定义变量 num=10;
    20.                         var num = 10;
    21.                         //2.弹出的警告框
    22.                         alert(num);
    23.                        
    24.                 </script>
    25.         </body>        let num =10;<body>
    26.                 <script type="text/javascript">
    27.                         //1.定义变量 num=10;
    28.                         var num = 10;
    29.                         //2.弹出的警告框
    30.                         alert(num);
    31.                        
    32.                 </script>
    33.         </body>        alert("test1:"+num);<body>
    34.                 <script type="text/javascript">
    35.                         //1.定义变量 num=10;
    36.                         var num = 10;
    37.                         //2.弹出的警告框
    38.                         alert(num);
    39.                        
    40.                 </script>
    41.         </body>}<body>
    42.                 <script type="text/javascript">
    43.                         //1.定义变量 num=10;
    44.                         var num = 10;
    45.                         //2.弹出的警告框
    46.                         alert(num);
    47.                        
    48.                 </script>
    49.         </body>//2.1 调用<body>
    50.                 <script type="text/javascript">
    51.                         //1.定义变量 num=10;
    52.                         var num = 10;
    53.                         //2.弹出的警告框
    54.                         alert(num);
    55.                        
    56.                 </script>
    57.         </body>test1();
    复制代码
  • 定义全局变量,
    基本语法: 变量名称= 值 //变量名称 就是全局变量 ,不建议这样书写.
    1. [/code] 建议的书写格式:
    2. var 变量名称A;//变量名称A就是全局变量
    3. 变量名称A =赋值
    4. [code]
    复制代码
  • 常量值(不能改变的值),关键词:const
    1. <script type="text/javascript">
    2.                          //1.定义一个常量值
    3.                          const num =10;
    4.                          //2.测试
    5.                          console.log("打印常量值:"+num);//正确的写法
    6.                          console.log("改变常量的值:"+(num++));//错误的写法:不能改变常量的值
    7.                                         
    8. </script>
    9. 注意:常量值定义在方法内部或者方法外部都可以。
    复制代码
  • 细节

    • 如果定义变量时,使用var关键词: 存在类型变量的提升(直接来说: 先使用,后定义)
    • 如果定义变量或者常量时,使用let或者const关键词:不存在类型变量的提升
      1. [/code]
      2. [/list]
      3. [/list] [size=3]7.运算符[/size]
      4. [list]
      5. [*] 算术运算符
      6. [img]https://img-blog.caogenbaimg.cn/58fd178f98a1430a99db67f4048acd6c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP56CB5ZOl55qE6L-b6Zi2,size_17,color_FFFFFF,t_70,g_se,x_16#pic_center[/img]
      7. 细节:
      8. 如果数字与字符串类型的数字进行运算时:
      9. [list=1]
      10. [*] 如果是 + 号, 进行的是字符串拼接
      11. [*] 如果不是 + 号,进行的是算术运算
      12. [*] [code]
      复制代码

  • 赋值运算符

    细节: 同算术运算符的道理一样。
  1. [/code]
  2. [list]
  3. [*] 比较运算符
  4. [img]https://img-blog.caogenbaimg.cn/1f6519282bec420c9fa63cf71f21ce6f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP56CB5ZOl55qE6L-b6Zi2,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center[/img]
  5. [/list] ​ 细节:
  6. ​ == : 只比较值是否一样
  7. ​ === :即比较值,又比较数据类型
  8. [list]
  9. [*] 逻辑运算符
  10. [img]https://img-blog.caogenbaimg.cn/5077c3599fc74a87ba7891d32b26011d.png#pic_center[/img]
  11. [/list] [code]<script type="text/javascript">
  12.                         var str1="";
  13.                         document.write((!str1)+"<hr/>")//true
  14.                         var str2=null;
  15.                         document.write((!str2)+"<hr/>")//true
  16.                         var str3=0;
  17.                         document.write((!str3)+"<hr/>")//true
  18.                         var str4=NaN;// not a number
  19.                         document.write((!str4)+"<hr/>")//true
  20.                         document.write("<hr>");
  21.                        
  22.                         var a1="hello";
  23.                         var a2= parseInt(a1);//a2: NaN (NOT a Number)
  24.                         console.log(a2);       
  25.                        
  26.                 </script>
  27. 注意:
  28. 1. 空串取反操作:true
  29. 2. null取反操作:true
  30. 3. 0取反操作:true
  31. 4. Nan取反操作:true
复制代码


  • 三元运算符

    • 场景: 数据进行分页,100条数据,每页显示10条,求总页数
      1. //场景: 数据进行分页,100条数据,每页显示10条,求总页数<body>
      2.                 <script type="text/javascript">
      3.                         //1.定义变量 num=10;
      4.                         var num = 10;
      5.                         //2.弹出的警告框
      6.                         alert(num);
      7.                        
      8.                 </script>
      9.         </body>var totalCount=109;<body>
      10.                 <script type="text/javascript">
      11.                         //1.定义变量 num=10;
      12.                         var num = 10;
      13.                         //2.弹出的警告框
      14.                         alert(num);
      15.                        
      16.                 </script>
      17.         </body>var pageSize=10;<body>
      18.                 <script type="text/javascript">
      19.                         //1.定义变量 num=10;
      20.                         var num = 10;
      21.                         //2.弹出的警告框
      22.                         alert(num);
      23.                        
      24.                 </script>
      25.         </body>var totalPages = (totalCount%pageSize==0)?<body>
      26.                 <script type="text/javascript">
      27.                         //1.定义变量 num=10;
      28.                         var num = 10;
      29.                         //2.弹出的警告框
      30.                         alert(num);
      31.                        
      32.                 </script>
      33.         </body><body>
      34.                 <script type="text/javascript">
      35.                         //1.定义变量 num=10;
      36.                         var num = 10;
      37.                         //2.弹出的警告框
      38.                         alert(num);
      39.                        
      40.                 </script>
      41.         </body>         (totalCount/pageSize):<body>
      42.                 <script type="text/javascript">
      43.                         //1.定义变量 num=10;
      44.                         var num = 10;
      45.                         //2.弹出的警告框
      46.                         alert(num);
      47.                        
      48.                 </script>
      49.         </body><body>
      50.                 <script type="text/javascript">
      51.                         //1.定义变量 num=10;
      52.                         var num = 10;
      53.                         //2.弹出的警告框
      54.                         alert(num);
      55.                        
      56.                 </script>
      57.         </body>         Math.floor(totalCount/pageSize)+1;<body>
      58.                 <script type="text/javascript">
      59.                         //1.定义变量 num=10;
      60.                         var num = 10;
      61.                         //2.弹出的警告框
      62.                         alert(num);
      63.                        
      64.                 </script>
      65.         </body>document.write(totalPages);
      复制代码


8.流程控制语句

<ul> if 语句
  switch 语句
  for 循环
  while 循环
  小练习: 99乘法表
[code]<script type="text/javascript"><body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10;
                        //2.弹出的警告框
                        alert(num);
                       
                </script>
        </body>document.write("[table]")<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10;
                        //2.弹出的警告框
                        alert(num);
                       
                </script>
        </body>//1.循环的行<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10;
                        //2.弹出的警告框
                        alert(num);
                       
                </script>
        </body>for (var i = 1; i

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作