初识JavaScript

最新推荐文章于 2024-11-12 17:31:26 发布

烬欢yu

最新推荐文章于 2024-11-12 17:31:26 发布

阅读量199

点赞数

分类专栏： JS 文章标签： js javascript

本文链接：https://blog.csdn.net/m0_54446654/article/details/116881529

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript的基础知识，包括它的作用、与HTML和CSS的关系、变量、数据类型及其转换、基本语法和函数用法。JavaScript用于网页特效、服务端开发等多个领域，与HTML、CSS共同构建网页动态交互。文中展示了如何声明和使用变量，以及如何进行数值、字符串和布尔型的转换。此外，还讲解了函数的定义、参数和闭包的概念，帮助读者理解JavaScript的核心概念。

摘要由CSDN通过智能技术生成

JS简介

JS是什么

JavaScript 是互联网上最流行的==脚本（不需要编译，运行过程由JS解释器逐行解释运行）==语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

JS作用

网页特效
服务端开发
桌面程序
APP
游戏开发

JS与HTML、CSS关系

HTML与CSS是标记语言，也就是描述性语言。JS是脚本语言，是一种编程语言。
HTML决定网页结构，CSS决定网页呈现给用户的样式，JS则实现业务逻辑与页面控制。
在这里插入图片描述

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

在这里插入图片描述

JS变量

JavaScript 变量是存储数据值的容器。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头
变量名称对大小写敏感（y 和 Y 是不同的变量）

数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等。

在 JavaScript 中有 6 种不同的数据类型：

string（字符型）
number（数字型）
boolean（布尔型）
object
function
symbol

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

typeof 操作符
可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

数据类型转换

转换为字符型

全局方法 String() 可以将数字或布尔型转换为字符串。

该方法可用于任何类型的数字，字母，变量，表达式。Number 方法和Boolean 方法 toString() 也是有同样的效果。

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回

//toString()
x.toString()
(123).toString()
(100 + 23).toString()

转化为数值型

全局方法 Number() 可把字符串、布尔型、日期转换为数字。

包含数字的字符串（比如 “3.14”）转换为数字（比如 3.14）。
空的字符串转换为 0。
其他字符串将转换为 NaN（Not a number，不是数字）。

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN
Number(false)     // 返回 0
Number(true)      // 返回 1

转化为布尔型

布尔型转换时，代表空、否定的值会被转化为false其余转化为true。

console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean('你好'));//true

声明变量

var是一个JS关键字，用来声明变量，后面跟变量名,赋值规则和之前的语言一样。
注意，这里赋值不需要像c或者其他语言那样声明变量类型，均用var即可。另外，如果只声明不赋值将会产生undefined，如果不声明，不赋值直接使用将会报错，并且JS报错后不会执行后续代码。

var age ;
age = 18;

我们也可以一条语句中声明多个变量，变量与变量之间用逗号隔开。

var person = "Bill Gates", carName = "porsche", price = 15000;

//声明可横跨多行
var person = "Bill Gates",
carName = "porsche",
price = 15000;

JS语法

JS使用

如需在 HTML 页面中插入 JavaScript，使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<head> 中的 JavaScript 函数

<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>

<body> 中的 JavaScript 函数

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

外部的 JavaScript
外部 JavaScript 文件的文件扩展名是 .js。

 <!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

JS输入输出

JavaScript 能够以不同方式“显示”数据：

使用 alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

方法	说明
alert(msg)	浏览器弹出警示框
console.log(msg)	浏览器控制打印输出信息
prompt（info）	浏览器弹出输入框，用户可以输入

详细内容见：JavaScript 输出.

JS语法

JavaScript 语句由以下构成：

值、运算符、表达式、关键词和注释。

运算符

在这里插入图片描述

关键词

在这里插入图片描述

注释

JavaScript 注释用于解释 JavaScript 代码，增强其可读性。

JavaScript 注释也可以用于在测试替代代码时阻止执行。

单行注释
单行注释以 // 开头。

任何位于 // 与行末之间的文本都会JavaScript 忽略（不会执行）。

多行注释
多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被JavaScript 忽略。

JS语句

条件语句
Switch语句
for循环
continue和break语句

由于JS语句与C语言相似，在这里就不做赘述了。

JS数组

JS数组与C语言类似，详细内容在该链接内有细致描述。

JS 数组.

JS函数

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

函数定义

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义，也可以是一个表达式。

function functionname()
{
    // 执行代码
}

函数参数

在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。

声明函数时，需要把参数作为变量来声明。

function myFunction(var1,var2)
{
代码
}

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

function myFunction()
{
    var x=5;
    return x;
}
//函数返回5

arguments的使用

//当我们不确定有多少个参数传递的时候，可以用arguments来获取
function fn(){
console.log(arguments);//里面存储了所有传递过来的实参
}
fn(1,2,3);

arguments是一个伪数组
他具有数组的length属性
能按照下标的方式进行存储
他没有真正数组的一些方法pop（），push（）等

闭包

JavaScript 变量可以是局部变量或全局变量。
私有变量可以用到闭包。

烬欢yu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录