0
0

JavaScript的简易概念及基本语法

一.JavaScript简单介绍

1.JavaScript 简称 JS，是一门弱类型的语言。主要用于给HTML页面上添加动态效果与交互效果。

2.JavaScript 的组成（ECMAScript、DOM、BOM）

ECMAScript：JavaScript的基本语法

DOM：文档对象模型

BOM：浏览器对象模型

二.JavaScript的特点

1.JavaScript是一门弱类型的语言，对代码的规范性要求不是很高，使用起来较为灵活。

2.JavaScript的代码不需要编译就能执行。

3.JavaScript是基于客户端的语言，运行在客户端的浏览器上。

4.可在多平台运行 如(Windos,Linux,Max,ios,Android等)。

三.JavaScript的基本使用

1.如何使用JS?

1.使用script标签,一般而言都是放在head标签中

2.编写js文件,通过script标签中的src属性引入

3.可以在同一个界面中引入多个js文件,执行顺序与引入顺序一致

2.JS的调试

浏览器 : 控制台(Console) 右键进入检查 点击控制台进行查看

Console：

  1.     .log() 打印信息
  3.     .dir() 打印一个对象的所有属性和方法

3.变量与数据类型：

js中的所有变量都由var来定义，并且变量的值与类型都可以发生改变

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>JavaScript01</title>
  6.     </head>
  7.     <body>
  8.         <h1>JavaScript01</h1>
  9.         <script type="text/javascript">
  10. /*             编写代码必须在 script 标签中*/    
  11.             console.log('hello world')
  12.             console.log('你好 世界')
  13.             
  14.             /* 定义变量 ：js中的所有变量都由var来定义*/
  15.             var i=10;
  16.             var f=1.23;
  17.             
  18.             /* 定义字符串变量 */
  19.             var s='1';
  20.             var s2='数字的值：'+f+'hello world';
  21.             var s3=`发大水发生￥{f}激发事件发生`;//反引号，用反引号可以直接用美元符号来连接字符串与数字
  22.             var s4='a';
  23.      </script>
  24.     </body>
  25. </html>

使用 typeof 可以查看数据类型(number,string,boolean)

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>JavaScript01</title>
  6.     </head>
  7.     <body>
  8.         <h1>JavaScript01</h1>
  9.         <script type="text/javascript">
  11.             var s4='a';
  12.             
  13.             //查看类型
  14.             console.log(s4/i);
  15.             //NaN not a number 不是一个数字
  16.             console.log(1/0);
  17.             //Infinity 无穷大
  18.             console.log(-Infinity)
  19.             //转换 在这里分整数小数
  20.             //Integer.parseInt()
  21.             console.log(parseInt("1.23"));
  22.             console.log(parseFloat("1.23"));
  23.             //答案
  24.             //在所有编程语言中，基本上小数的运算都不靠谱
  25.             console.log(0.6-0.2);
  26.             //小数的取几位
  27.             console.log((1.234).toFixed(2));//取小数点后两位
  29.             //boolean
  30.             var f1=true;
  31.             var f2=false;
  32.             console.log(f1||f2)//true 或者，只要有一真，则都为真
  33.             console.log(f1&&f2)//false 并且，只要有一假，都为假
  34.             console.log(!f1)//false f1是true !f1 就是不为true
  35.             console.log(!!-1)// !! 将这个变量变成boolean
  36.             
  37.             //什么情况下会得到false
  38.             //字符串："" 为空字符时;
  39.             //数字：0
  40.             // null 也为 false;
  41.             //underfined 未定义 也为false;
  42.             //NaN 不是数字类型 也为false;
  43.             
  44.             //短路
  45.             console.log(""||0)//0 也可理解为false
  46.             console.log(1||0)//1 ||只要有一个为true 就会停止
  47.             console.log("2"||"1"||1)// 2
  48.             
  49.             console.log("2"&&"1"&&1)//1 &&只要有一个为false 就会停止
  50.             console.log("2"&&0&&1)//0 0就是代表false
  51.             
  52.      </script>
  53.     </body>
  54. </html>

4.JS中的弹框

alert ：提示框

confirm ：询问框

prompt ：输入框

5.基本语句结构

if结构

switch结构

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>JavaScript01</title>
  6.     </head>
  7.     <body>
  8.         <h1>JavaScript01</h1>
  9.         <script type="text/javascript">
  10.     
  11.             var f6=prompt("请输入星期几");//接收到的是一个String类型，需要进行类型的转换
  12.             if(!isNaN(parseInt(f6))){
  13.                 switch(parseInt(f6)){
  14.                     case 1:
  15.                         console.log("周一")
  16.                         break
  17.                     case 2:
  18.                         console.log("周二")
  19.                         break
  20.                     case 3:
  21.                         console.log("周三")
  22.                         break
  23.                     default:
  24.                         console.log("xxx")
  25.                 }
  26.             }
  27.      </script>
  28.     </body>
  29. </html>

while结构

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>JavaScript01</title>
  6.     </head>
  7.     <body>
  8.         <h1>JavaScript01</h1>
  9.         <script type="text/javascript">
  10.     //while 循环
  11.             var j=1
  12.             while(j<10){
  13.                 j++;
  14.             }
  15.             
  16.             //死循环
  17.             while(true){
  18.                 console.log("死循环")
  19.             }
  20.      </script>
  21.     </body>
  22. </html>

for结构

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>JavaScript01</title>
  6.     </head>
  7.     <body>
  8.         <h1>JavaScript01</h1>
  9.         <script type="text/javascript">
  10.         //for循环
  11.             var count=prompt("请输入次数")
  12.             for(var i=0;i<count;i++){
  13.                 //在页面中进行html输出
  14.                 document.write("<font color='red'>哈哈哈<font><br>")
  15.             }
  16.      </script>
  17.     </body>
  18. </html>

6.基本语法

1.JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{}

2.JavaScript并不强制要求在每个语句的结尾加;

3.// 行注释

4./* */ 块注释

5.JavaScript严格区分大小写

今天的JS分享就到此为止，精彩下期继续。

标签： javascript 前端 开发语言
本文转载自: https://blog.csdn.net/weixin_65474399/article/details/123146425
版权归原作者 xiongᥫᩣ 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JavaScript的简易概念及基本语法”的评论:

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

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

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

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

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

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

Kafka学习笔记

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