0
0

JavaScript基础知识1

基本说明

1.JavaScript能改变html内容，能改变html属性，能改变html样式（CSS），能完成页面的数据验证。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.   </head>
  7.   <body>
  8.     <h2>JavaScript能做什么？</h2>
  10.     <p>JavaScript能改变html属性值。</p>
  12.     <p>在本例中，JavaScript改变了图像的src属性值。</p>
  14.     <button onclick="document.getElementById('myImage').src='https://inews.gtimg.com/newsapp_match/0/13912358792/0'">开灯</button>
  16.     <img id="myImage"border="0"src="https://inews.gtimg.com/newsapp_match/0/13912358792/0"style="text-align:center;">
  18.     <button onclick="document.getElementById('myImage').src='https://bpic.588ku.com/element_origin_min_pic/19/04/09/4589b0a710ff537b568e4bdc3d3658ac.jpg'">关灯</button>
  19.   </body>
  20. </html>

2.JS需要运行浏览器来解析执行JavaScript代码

3.JS是Netscape网景公司的产品，最早取名为LiveScript，后更名为JavaScript。和java没关系

4.JavaScript简写JS

JavaScript的特点：

1.JavaScript是一种解释型脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释

2.JavaScript是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象（有对象）

3.JavaScript是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程中可以变化【创建js弱类型.html】

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>JavaScript是弱类型</title>
  6.     <!--案例演示-->
  7.     <!--
  8.     1.js代码可以写在script标签中
  9.     2.type="text/javascript"表示这个脚本（script）类型是JavaScript
  10.     3.type="text/javascript"可以不写，但是建议写上
  11.     4.技术语句换可以不写分号（;）
  12.     5.var
  13.     -->
  14.     <script type="text/javascript">
  15.       //弱类型（不强制，它可类型为string
  16.       var name = "老韩教育";
  17.       //输出方式一：输出alert（），使用弹框方式
  18.       //输出方式二：输出console.log()，在调试输出（即在页面中右击鼠标，点击检查，选择Console）
  19.       alert("name=" + name);
  21.       //输出变量的类型typeof，输出变量的类型
  22.       alert(typeof name);
  23.       name = 100;//给name重新赋值
  24.       alert(typeof (name));//类型number//结果数据类型为string的原因是前面的name影响的，前面的name为string
  26.       var age = 10;//数值
  27.       console.log("age="+age);
  28.       console.log(typeof age);
  29.       age = "北京";
  30.       console.log("age="+age);
  31.       console.log(typeof age);
  33.       //如果输出字符串+数字会类型为string吗
  34.       var n = 123 + "abc";
  35.       console.log(n);
  36.       console.log(typeof n);//结果数据类型为string
  37.     </script>
  38.   </head>
  39.   <body>
  41.   </body>
  42. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>JavaScript是弱类型</title>
  6.     <script>
  7.       num = 1;
  8.       alert("num="+num);
  9.       alert("num 数据类型="+(typeof num));
  10.     </script>
  11.   </head>
  12.   <body>
  14.   </body>
  15. </html>

4.跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

JavaScript快速入门

使用方式1：script标签写JS代码（在script中写）

应用实例 1.js-use.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>script 标签中写JS代码</title>
  6.     <!--
  7.     1.可以在head和body嵌入script
  8.     2.执行顺序 从上到下
  9.     3.建议放在head
  10.     -->
  11.     <script type="text/javascript">
  12.         //在head内使用script写js
  13.         console.log("ok");
  14.     </script>
  15. </head>
  16. <body>
  17. <script type="text/javascript">
  18.     //在body内使用script写js
  19.     console.log("hi");
  20. </script>
  21. </body>
  22. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>script 标签中写JS代码</title>
  6.     <script type="text/javascript">
  7.         //在head内使用script写js
  8.         window.alert("hello,JavaScript");
  9.     </script>
  10. </head>
  11. <body>
  12. <script type="text/javascript">
  13.     //alert是JavaScript语言提供的一个警告框函数
  14.     //它可以输出指定的内容，变量等信息
  15.     //scrpt标签的位置，可以在head中，也可以在body体
  16.     window.alert("hello,老韩教育");
  17. </script>
  18. </body>
  19. </html>

使用方式2：使用script标签引入JS文件

应用实例 创建test.js和2.js-use.html

  1. alert("hh,你好");
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>使用script标签引入JS文件</title>
  6.     <!--
  7.     <script type="text/javascript" src="引入的JS文件"></script>
  8.     -->
  9.     <!--<script type="text/javascript"src="js/my.js"></script>不是同一目录下的-->
  10.     <script type="text/javascript"src="./my.js"></script>
  11. </head>
  12. <body>
  14. </body>
  15. </html>

两种使用js的方式，不能混用

应用实例，js-use-detail.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>两种使用js的方式，是二选一，不能混用.</title>
  6.     <!--
  7.     如果两种方法都使用了
  8.     1.不会报错
  9.     2.但是只有一个生效，前面引入的js生效
  10.     -->
  11.     <script type="text/javascript"src="./my.js">
  12.         alert("hi,你好");
  13.     </script>
  14. </head>
  15. <body>
  17. </body>
  18. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>两种使用js的方式，是二选一，不能混用.</title>
  6.     <!--
  7.     如果两种方法都使用了
  8.     1.不会报错
  9.     2.但是只有一个生效，前面引入的js生效
  10.     -->
  11.     <!--
  12.     <script type="text/javascript"src="引入的js文件"></scripe>
  13.     -->
  14.     <script type="text/javascript"src="./test.js">
  15.       alert("hh,老韩~");//这里的alert("hh,老韩~");没有执行，如果想再次使用，再写一段script即可
  16.     </script>
  17.     <script type="text/javascript">
  18.       alert("hh:这里能用");
  19.     </script>
  20.   </head>
  21.   <body>
  23.   </body>
  24. </html>

查看JS错误信息

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>怎么看错误提示</title>
  6.       <!--
  7.     进入调试器ctrl+shift+i，就可以看到错误提示
  8.     -->
  9.     <script type="text/javascript">
  10.         console1.lop("hi");
  11.     </script>
  12. </head>
  13. <body>
  15. </body>
  16. </html>

浏览器：ctrl+shift+i

错误位置在右边：error.html，显示错误在第7行

直接查看错误位置的方法（在调试器（即Sources）位置）

把光标放在红色的错误显示的地方，就可以知道具体错误位置

执行JS，chrome浏览器如何查看错误信息

更多工具=》开发者=》console

执行JS，ff浏览器如何查看错误信息

web开发工具=》web开发者工具=》控制台

JavaScript变量

JavaScript变量表示存储数据的容器

变量概念在任何语言都是一样的

应用实例 simple_var.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>变量举例</title>
  6.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.       var num = 100;
  10.       var name = "老韩";//与前面名字相同，不执行，因为只有一个num被执行了，结果输出为name=100
  11.       job = "JavaEE工程师";//JavaScript十分松散，没有var也不会报错=》弱类型
  12.       alert("num=" + num);
  13.       alert("job=" + job);
  15.       name1 = 'a';
  16.       console.log(typeof name1);//数据类型为string，在控制台输出结果，但是要在前面（即在弹窗输出完才会在控制台输出结果
  17.     </script>
  18.   </body>
  19. </html>

JavaScript数据类型

数据类型介绍

JavaScript常用的数据类型

数值类型： number

字符串类型： string=》'a' "abc"

对象类型： object

布尔类型： boolean

函数类型： function

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数据类型介绍</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9.     age = 1.1;
  10.     alert("age1" + age);//输出age11.1
  11.     console.log(typeof age);//输出number
  13.     age = 100;
  14.     alert("age2" + age);//输出age2100
  15.     console.log(typeof age);//输出number
  17.     var name = 15;//直接命名为name，会报错，要在前面声明var
  18.     var name = "夏目";
  19.     job = "程序设计师";
  20.     alert(name);//输出夏目
  21.     alert(name);//输出夏目
  22.     console.log(job);//输出程序设计师
  24. </script>
  25. </body>
  26. </html>

特殊值

undefined 变量未赋初始值时，默认undefined

null 空值

NaN Not a Number 非数值

应用实例：datetype.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>数据类型-特殊值</title>
  6.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.       //1.typeof()是JavaScript语言提供的一个函数
  10.       //2.返回变量的数据类型
  11.       //3.3个特殊值undefined  ；没有赋值就使用null；NaN 当不能识别类型
  12.       var email;//特殊值undefined
  13.       console.log("email=" + email);//undefined
  14.       var address = null;
  15.       console.log("address=" + address);//null
  16.       console.log(10*"abc");//NaN=Not a Number
  18.     </script>
  19.   </body>
  20. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>数据类型</title>
  6.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.       //数据类型举例
  10.       var name;
  11.       //alert(name);//undefined
  12.       name = "北京";
  13.       //1.typeof()是JavaScript语言提供的一个函数
  14.       //2.返回变量的数据类型
  16.       alert(typeof(name));
  17.       var age = 10;
  18.       alert("age 数据类型="+typeof(age));
  19.       //特殊值
  20.       var job = null;
  21.       alert("job="+ job);
  22.       alert(1 * "hello");//NaN非数值
  23.     </script>
  24.   </body>
  25. </html>

数据类型注意事项

1.String字符串【可以双引号括起来，也可以单引号括起来】"a book of JavaScript",'abc',"a",""

运算符

算术运算符

  1. 算术运算符用于执行变量与/或值之间的算术运算
  2. y等于5，下面的表格解释了这些算术运算符

和java用法几乎一样

赋值运算符

  1. 赋值运算符用于给JavaScript变量赋值
  2. 给定 x = 10和 y = 5，下面的表格解释了解赋值运算符

和java中用法相似

关系运算符

  1. 关系（比较）运算符在逻辑语句中使用，以测定变量或值是否相等
  2. 给定 x = 5，下面的表格解释了比较运算符

关系运算符注意事项

relationship-oprator-关系运算符.html

  1. 等于： ==是简单的做字面值的比较
  2. 全等于： ===除了做字面值的比较之外，还会比较两个变量的数据类型
  3. 应用实例 relationship-oprator-关系运算符.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>关系运算符</title>
  6.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.       var a = "100";//string
  10.       var b = 100;//number
  11.       console.log(a == b);//true  字面值是相同的
  12.       console.log(a === b);//false  字面值相同，但是类型不同
  13.     </script>
  14.   </body>
  15. </html>

逻辑运算符

逻辑运算符说明

  1. 逻辑运算符用于测定变量或值之间的逻辑
  2. 给定 x = 6 以及 y = 3，下表解释了逻辑运算符

逻辑运算符注意事项和细节

logic-operation-逻辑运算符.html

  1. 在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用
  2. 0、null、undefined、""（空串）、NaN都认为是false
  3. && 且运算，有两种情况=》&& 返回值是遵守短路与的机制

（1）当表达式全为真的时候。返回最后一个表达式的值

（2）当表达式中，有一个为假的时候。返回第一个为假的表达式的值

  1. || 或运算，有两种情况=》 || 返回值是是遵守短路或的机制

（1）当表达式全为假时，返回最后一个表达式的值

（2)只要有一个表达式为真，就会返回第一个为真的表达式的值

  1. && 运算 和 || 运算 有短路现象

短路想象：当这个&& ||运算有确定结果后，后面的表达式不再执行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>逻辑运算符注意事项和使用细节</title>
  6.     <script type="text/javascript">
  7.       //1.在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用
  8.       //体会：js语法是比较松散
  9.       var name = "老韩";
  10.       var age = 800;
  11.       n1 = null;//注释输出结果为一次输出的弹窗结果
  12.       if(name){
  13.         alert("hi1");//h1
  14.       }
  15.       if(age){
  16.         alert("hi2");//h2
  17.       }
  18.       if(!n1){
  19.         alert("hi");//hi
  20.       }
  22.       // 2. 0、null、undefined、""（空串）、NaN都认为是false
  24.       var address;//undefined
  25.       if(!(100 * "hello")){
  26.         alert("ok~~");//ok~~
  27.       }
  29.       // 3. && 且运算，有两种情况=》&& 返回值是遵守短路与的机制
  30.       var res1 = null && 800;
  31.       alert("res1=" + res1);//res1=null
  32.       // 4. || 或运算，有两种情况=》 || 返回值是是遵守短路或的机制
  33.       var res2 = "老韩"|| 800;
  34.       alert("res2=" + res2);//res2=老韩
  36.       //小练习
  37.       // ||运算（1）当表达式全为假时，返回最后一个表达式的值
  38.       var res6 = (10 < 1)||(6 < 0);
  39.       alert("res6=" + res6);//res6=false
  40.       // ||运算（2)只要有一个表达式为真，就会返回第一个为真的表达式的值
  41.       var res3 = (10 + 1)||(6 < 0);
  42.       alert("res3=" + res3);//res3=11
  43.       // 5. && 运算 和 || 运算 有短路现象
  44.       var n1 = 1;
  45.       var n2 = 3;
  46.       var res4 = (n1++ > 100)||n2++;
  47.       alert("n1=" + n1 + "n2=" + n2);//n1=2n2=4
  49.       // ||运算（2)只要有一个表达式为真，就会返回第一个为真的表达式的值
  50.       var n3 = 1;
  51.       var n4 = 3;
  52.       var res4 = (n3++)||n4++;
  53.       alert("n3=" + n3 + "n4=" + n4);//n3=2n4=3
  55.       var n = 0;
  56.       if(!n){
  57.         console.log("yes");//yes
  58.       }
  59.       // &&运算（1）当表达式全为真的时候。返回最后一个表达式的值
  60.       var value = 10 > 5 && "hsp";
  61.       console.log(value);//hsp
  62.       // &&运算（2）当表达式中，有一个为假的时候。返回第一个为假的表达式的值
  63.       var res5 = (10 > 1)&&(3 <0);
  64.       alert("res5="+res5);//res5=false
  65.     </script>
  66.   </head>
  67.   <body>
  69.   </body>
  70. </html>

条件运算

  1. JavaScript还可以使用 类似java的三元运算符
  2. 应用实例 condition-operation-条件运算符.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>条件运算符</title>
  6.     <script type="text/javascript">
  7.       //1. 规则 如果（10 > 1）条件表达式为T，返回值第一个表达式的值 一直大师
  8.       //                     条件表达式为F，返回第2个表达式的值
  9.       //2. 看出js使用比较灵活,相比java会更加自由
  10.       var n1 = 90;
  11.       var n2 =1;
  12.       var res = n2 > 9 ? "老韩" + "你好" : 800 + n1;
  13.       alert("res=" + res);//res=890
  15.       var res1 = 5 > 0 ? "hello":"ok";
  16.       alert(res1);//hello
  17.     </script>
  19.   </head>
  20.   <body>
  22.   </body>
  23. </html>

数组定义 array_define.html

  1. 应用实例 array_define.html，演示js的数组定义使用的4种方式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数组定义</title>
  6.     <script type="text/javascript">
  7.         //"Audi","BMW","Volvo";
  8.         //数组定义方式1
  9.         var cars1 = ["Audi","BMW","Volvo"];
  10.         console.log("cars1="+cars1);
  11.         console.log(cars1[1]);//表示访问cars1数组的第2个元素，1表示下标/索引，从0开始编号
  13.         //数组定义方式2
  14.         var cars2 = [];//空数组//一开始这里我写漏了数字2，代码输出为：如下图
  15.         //添加元素
  16.         cars2[0] = "奥迪";
  17.         cars2[1] = "宝马";
  18.         cars2[2] = "奔驰";
  19.         console.log("cars2="+cars2);
  20.         console.log("cars2[2]=" + cars2[2]);//奔驰
  21.         console.log("cars2[10]=" + cars2[10]);//如果该元素不存在，返回的就是undefined
  23.         //数组定义方式3
  24.         var cars3 = new Array("Audi","BMW","Volvo");
  25.         console.log("car3=" + cars3);
  26.         console.log("cars3[0]=" + cars3[0]);//Audi
  28.         //数组定义方式4
  29.         var cars4 = new Array();//空数组
  30.         console.log(typeof cars4);
  31.         cars4[0] = "法拉利";
  32.         cars4[1] = "保时捷";
  33.         cars4[2] = "yy";//相当于是给数组扩容
  34.         cars4[0] = "zz";//替换
  36.         cars4[8] = "红旗";//扩容，如果是跳过了下标给赋值，那么中间没有赋值的元素为undefined
  37.         console.log("cars4[3]=" + cars4[3]);//undefined
  38.         console.log("car4=" + cars4);
  39.     </script>
  40. </head>
  41. <body>
  43. </body>
  44. </html>

没有显示就是undefined，不是空

一开始数组cars2我写漏2的结果：

数组使用和遍历

  1. 应用实例：创建array_for.html,演示js的数组遍历
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数组使用和遍历</title>
  6.     <script type="text/javascript">
  7.         var cars =["Audi","BMW","Volvo",100,1.1,true];
  9.         //遍历
  10.         console.log("数组的长度=" + cars.length)//6
  11.         for(i = 0;i < cars.length;i++){
  12.             console.log(cars[i]);//log 方法会自动换行
  13.         }
  14.     </script>
  15. </head>
  16. <body>
  18. </body>
  19. </html>

标签： javascript 开发语言 ecmascript
本文转载自: https://blog.csdn.net/m0_62110645/article/details/132572325
版权归原作者 蔬菜院院长 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JavaScript基础知识1”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？