JavaScript基础语法

JavaScript是在开发网页必不可少的一种语言 那如何使用Javascript呢

目录

javascript的基础使用格式

Javascript的输入和输出

输出

 输入

变量的声明

声明(定义)变量相当于创造了一个空的“容器”,通过赋值向这个容器中添加数据。

关于声明变量的两种方式

 关于数据类型

 布尔类型

 JavaScript的几个运算符

比较运算符

在JavaScript里定义数组

访问数组

数组长度的属性

数组使用

JavaScript的函数

function返回值

JavaScript属性

如何调用属性

对于上节课的复盘与总结 


javascript的基础使用格式

我们要在的内部标签定义javascript的语言




  
  JavaScript 基础 - 引入方式


  
  

Javascript的输入和输出

输出

JavaScript 可以接收用户的输入,然后再将输入的结果输出:

`alert()`、`document.wirte()`

alert()是弹窗输出

document.wirte()是在页面输出

以数字为例,向 `alert()` 或 `document.write()`输入任意数字,他都会以弹窗形式展示(输出)给用户。

console.log();也是输出,但是是在控制台进行打印

 输入

向 `prompt()` 输入任意内容会以弹窗形式出现在浏览器中,一般提示用户输入一些内容。




  
  JavaScript 基础 - 输入输出


  
  

变量的声明




  
  JavaScript 基础 - 声明和赋值


  
  

关键字是 JavaScript 中内置的一些英文词汇(单词或缩写),它们代表某些特定的含义,如 `let` 的含义是声明变量的,看到 `let`  后就可想到这行代码的意思是在声明变量,如 `let age;` 

`let` 和 `var` 都是 JavaScript 中的声明变量的关键字,推荐使用 `let` 声明变量!!!

声明(定义)变量相当于创造了一个空的“容器”,通过赋值向这个容器中添加数据。




  
  JavaScript 基础 - 声明和赋值


  
  

关于声明变量的两种方式

JavaScript 使用专门的关键字 `let` 和 `var` 来声明(定义)变量,在使用时需要注意一些细节:

以下是使用 `let` 时的注意事项:

1. 允许声明和赋值同时进行
2. 不允许重复声明
3. 允许同时声明多个变量并赋值
4. JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 `var` 时的注意事项:

1. 允许声明和赋值同时进行
2. 允许重复声明
3. 允许同时声明多个变量并赋值

大部分情况使用 `let` 和 `var` 区别不大,但是 `let` 相较 `var` 更严谨,因此推荐使用 `let`,

 关于数据类型

学过c语言的大概知道几种常用的数据类型比如int char float等等......

但是在javascript里并没有那么多数据类型在js里正整数,负数,小数都属于是number类型的

还有一部分是string的类型,也就是很重要的字符串类型

number的声明以及字符串的声明如下图所示




    
    
    
    Document


    

输出效果 

 JavaScript基础语法_第1张图片

 布尔类型

只有false或者true的这两种类型举个例子




    
    
    
    Document


    

输出的结果

JavaScript基础语法_第2张图片

 JavaScript的几个运算符

在JavaScript里的几个运算符号和C语言里的运算符号的原理是相同的具体就不赘述功能了,简单的介绍一下符号

+    求和符号

-     求差符号

*     求积符号

/     求商符号

%   取模符号

+=     加法赋值 

-+      减法赋值 
*=      乘法赋值 
/=       除法赋值  

%=    取余赋值 
++   自增  变量自身的值加1,例如: x++ 
--    自减  变量自身的值减1,例如: x-- 

比较运算符

 >        左边是否大于右边                       
<         左边是否小于右边                       
 >=      左边是否大于或等于右边                 
<=        左边是否小于或等于右边                 
 ===    左右两边是否`类型`和`值`都相等 注意这里不仅仅是判断数值还判断类型是否相等
==       左右两边`值`是否相等                   
!=        左右值不相等                           
!==      左右两边是否不全等                     

几种与C语言相同的语法

比如while循环 for循环 switch case语句

补充 循环里同样可以用的是break与continue,也是进行同样的想法 在本篇文章不赘述了 

举几个例子看一下

在JavaScript里定义数组

访问数组

数组长度的属性

数组使用

1. push 动态向数组的尾部添加一个单元
2. unshit 动态向数组头部添加一个单元
3. pop 删除最后一个单元
4. shift 删除第一个单元
5. splice 动态删除任意单元 

JavaScript的函数




  
  JavaScript 基础 - 声明和调用


  

补充:使用function定义函数的形式 function 函数名(){函数体} 




  
  JavaScript 基础 - 函数参数


  

function返回值




  
  JavaScript 基础 - 函数返回值



  

JavaScript属性

数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。

1. 属性都是成 对出现的,包括属性名和值,它们之间使用英文 `:` 分隔
2. 多个属性之间使用英文 `,` 分隔
3. 属性就是依附在对象上的变量
4. 属性名可以使用 `""` 或 `''`,一般情况下省略,除非名称遇到特殊符号如空格、中横线等




  
  JavaScript 基础 - 对象语法



  

如何调用属性




  
  JavaScript 基础 - 对象语法



  

对于上节课的复盘与总结 

 首先引用一下学姐的博客@水工.

前端第三周 CSS进阶_水工.的博客-CSDN博客浮动,定位,伪类,伪元素https://blog.csdn.net/m0_65291134/article/details/129974321?spm=1001.2014.3001.5502通过上次课进一步的加深了对于盒子模型的理解与了解,并且了解了对于盒子的浮动,以及对于CSS的布局,进一步了解如果做一些比较简单的项目,以及清除浮动和伪类于伪元素的了解,并且知道如何进行学习前端的一些布局,进一步巩固了对于前端的理解,在文章的末尾,再次感谢学姐上一周的讲课与付出。

你可能感兴趣的:(Bulemsun,javascript,前端,html)