javascript 入门第一天

显示全部楼层

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，统一了所有客户端脚本语言的编码方式。
总结
```
1995 年，NetScape (网景)公司，开发的一门客户端脚本语言：LiveScript。后来，请来 SUN 公司的专家来 进行修改，后命名为：JavaScript。
1996 年，微软抄袭 JavaScript 开发出 JScript 脚本语言。 
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入门程序

入门程序

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <script type="text/javascript">
<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>//1.定义变量 num=10;
<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>var num = 10; 
<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>//2.弹出的警告框
<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>alert(num);
<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>
                </script>
        </body>
</html>
注意： 书写js代码时，一定一定加上<script> js代码 </script>
复制代码

3.javascript与html结合的两种方式

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

6.常量和变量

javascript是一门弱类型的脚本语言，在定义变量或者常量时，不用指定类型，或者可以使用var, let, const

定义局部变量，使用关键词： let
比如：let num=10;
建议把let放在方法内部（放在方法方法外部也可以，不建议）

                  //2.定义方法一：<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>function test1(){<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>        let num =10;<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>        alert("test1:"+num);<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>}<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>//2.1 调用<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>test1();
复制代码

定义全局变量，
基本语法：变量名称= 值 //变量名称就是全局变量 ,不建议这样书写.
```
[/code] 建议的书写格式：
 var 变量名称A；//变量名称A就是全局变量
 变量名称A =赋值
 [code]
复制代码
```

常量值（不能改变的值），关键词：const

<script type="text/javascript">
                         //1.定义一个常量值
                         const num =10;
                         //2.测试
                         console.log("打印常量值："+num);//正确的写法
                         console.log("改变常量的值："+(num++));//错误的写法：不能改变常量的值
                                         
</script>
注意：常量值定义在方法内部或者方法外部都可以。
复制代码

细节
- 如果定义变量时，使用var关键词：存在类型变量的提升（直接来说：先使用，后定义）
- 如果定义变量或者常量时，使用let或者const关键词：不存在类型变量的提升
- ```
[/code]
[/list] 
[/list] [size=3]7.运算符[/size]
 
[list]
[*] 算术运算符
 [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]
 细节：
 如果数字与字符串类型的数字进行运算时：
[list=1]
[*] 如果是 + 号， 进行的是字符串拼接
[*] 如果不是 + 号，进行的是算术运算
[*] [code]
复制代码
```
赋值运算符

细节：同算术运算符的道理一样。

[/code] 
[list]
[*] 比较运算符
 [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]
[/list]  细节：
  
  == : 只比较值是否一样
  === :即比较值,又比较数据类型
 
[list]
[*] 逻辑运算符
 [img]https://img-blog.caogenbaimg.cn/5077c3599fc74a87ba7891d32b26011d.png#pic_center[/img]
[/list] [code]<script type="text/javascript">
                        var str1="";
                        document.write((!str1)+"<hr/>")//true
                        var str2=null;
                        document.write((!str2)+"<hr/>")//true
                        var str3=0;
                        document.write((!str3)+"<hr/>")//true
                        var str4=NaN;// not a number
                        document.write((!str4)+"<hr/>")//true
                        document.write("<hr>");
                        
                        var a1="hello";
                        var a2= parseInt(a1);//a2: NaN (NOT a Number)
                        console.log(a2);        
                        
                </script>
注意：
1. 空串取反操作：true
2. null取反操作：true
3. 0取反操作：true
4. Nan取反操作：true
复制代码

三元运算符

场景：数据进行分页，100条数据，每页显示10条，求总页数

//场景： 数据进行分页，100条数据，每页显示10条，求总页数<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>var totalCount=109;<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>var pageSize=10;<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>var totalPages = (totalCount%pageSize==0)?<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body><body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>         (totalCount/pageSize):<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body><body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </body>         Math.floor(totalCount/pageSize)+1;<body>
                <script type="text/javascript">
                        //1.定义变量 num=10;
                        var num = 10; 
                        //2.弹出的警告框
                        alert(num);
                        
                </script>
        </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

工作时间

工作时间

javascript 入门第一天

本帖子中包含更多资源

火星云矿 | 预约S19Pro，享500抵1000！