JS的一丢丢基础

最新推荐文章于 2024-08-22 14:32:34 发布

xusisi123

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量789

点赞数 9

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/lisi_123/article/details/139151521

版权

JS的一丢丢基础

html,css和js都是做什么的
js的用法
js的输出有哪些
- - js的输出主要有四种分别是：
注释方式
变量声明
数据类型
js对象
函数
- 调用带参数的函数
- 带有返回值的函数
js常见事件
js的运算符
- 算数运算符
- 赋值运算符
JavaScript 比较和逻辑运算符

html,css和js都是做什么的

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为
打个比方，html相当于人们的身体，人们要出门去玩，肯定是得有衣服的，不能光溜溜的出去。所以css就相当于人的衣服，它起到了修饰的作用，出去玩，肯定伴随着各种动作，比如唱，跳，rap，篮球，而js就是这个作用，它赋予了网页的各种动作，比如点击，网页之间的切换，鼠标移动上去出现弹窗等等。

js的用法

js主要有两种引入方式，一种是在html页面中使用 <script> 标签去包裹js代码，一种是使用引入外部的js文件，下面来演示两种引入方式。
- 第一种使用<script>标签来包裹

<!DOCTYPE html>
<html>
<body>

<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>

</body>
</html>

在这里插入图片描述

第二种引入外部js文件来使用

<script src="./js.js"></script>

// js 内容
document.write('这是一段测试代码')

在这里插入图片描述

js的输出有哪些

js的输出主要有四种分别是：

使用 window.alert() 弹出警告框。

// window.alert()
<script>
       window.alert('测试代码');
</script>

使用 document.write() 方法将内容写到 HTML 文档中。

<script>
        document.write("测试代码");
</script>

使用 innerHTML 写入到 HTML 元素。

<p id="id">这是一段测试代码</p>
<script>
    document.getElementById("id").innerHTML = Date()
</script>

使用 console.log() 写入到浏览器的控制台。

<script>
        console.log('这是一段测试代码');
</script>

注释方式

js的注释方式有两种
分别是//和/* */

// 这是一个单行注释
/* 这是一个多行注释 
1112111
22222*/

变量声明

js变量声明有三种方式
分别是var,let,consit 三种方式

var a = 1;
// 声明变量a  将1赋值给a

let b = 2;
// 声明变量b  将2赋值给b

const c = 3;
// 声明变量c  将3赋值给c

var 声明的是全局变量，可以被重新声明和赋值，最后的赋值会覆盖先前的赋值
let 声明的是局部变量
const 声明后的变量不可被重新赋值修改，也不可以重新声明

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

var a = "5555"    // 字符串类型
var b = 5      // 数字类型
var b = true    // 布尔类型 两个分别是true和false
var b = null    // null
var b     // undeinded

var c = [1,5,6,88,4,58]   // 数组类型
var c = { 
   name:"刘三",
   age:18,
}   // 对象

function a(){
  alert(555555)
}  // 函数

js对象

在 JavaScript中，几乎所有的事物都是对象。
对象由键值对构成，例如以下

var person = {
    name:'张三',
    age:28,
    sex:'男'
}
console.log(person.name);
console.log(person.age);
console.log(person.sex);

// 对象的值也可以修改。例如
person.name = "王五"
console.log(person.name)

在这里插入图片描述

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数语法

 function functionname ()
 {
   // 执行代码
}
// functionname 是函数的名字

调用带参数的函数

函数的格式

function myFunction(var1,var2){
    代码
}

示例

<button onclick="myFunction('张三','18')">点击这里</button>
<script>
        function myFunction(name,age) {
            alert("我的名字是： " + name + ", 今年我： " + age);
        }
</script>

在这里插入图片描述

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
格式

function myFunction()
{
    var x=5;
    return x;
}

示例

<button onclick="add(18,20)">点击求和</button>
<script>
   function add(val1,val2) {
        var num = val1 + val2
        return console.log(num)
   }
</script>

在这里插入图片描述

js常见事件


onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

js的运算符

算数运算符

以下当y=5时，运算


运算符	描述	例子	x运算结果	y运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y， x=y++	6，5	6 ，6
–	自减	x=–y，x=y–	4 ，5	4，4

赋值运算符

给定 x=10 和 y=5，下面的表格解释了赋值运算符：


运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

JavaScript 比较和逻辑运算符

比较运算符


运算符	描述	比较	返回值
==	等于	x==8	false
		x==5	true
===	绝对等于（值和类型均相等）	x===“5”	false
		x===5	true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!==“5”	true
		x!==5	false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true