javascript基础

最新推荐文章于 2024-09-14 19:44:09 发布

xuxuxuxxxxx

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量1.6k

点赞数 33

文章标签： javascript

本文链接：https://blog.csdn.net/2301_80697981/article/details/139140615

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

一、概念

JavaScript 是 Web 的编程语言。

不需要编译，通过浏览器解析执行js代码。

使web网页变得灵活，进行动态操作

二、用法

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。

三、JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

window.alert() 弹出警告框来显示数据：

<!DOCTYPE html>
<html>
<body>
<h1>我的页面</h1>
<p>我的第一个段落。</p>
	
<script>
window.alert(5 + 6);
</script>

</body>
</html>

在这里插入图片描述

document.write() 向文档写入内容：

<!DOCTYPE html><html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

</body>
</html>

在这里插入图片描述

innerHTML 获取或插入元素内容：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>ttt</title> 
</head>
<body>
	
<h1>我的页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
	
</body>
</html>

//document.getElementById("demo") ：使用 id 属性来查找 HTML 元素
//innerHTML = "段落已修改。" ：用于修改元素的 HTML 内容

在这里插入图片描述
console.log() 写入到浏览器的控制台

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>ttt</title> 
</head>
<body>
	
<h1>我的页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

四、语法

1、字面量

在编程语言中，一般固定值成为字面量。

数字（number）：
整数、小数、科学计数(e)
字符串（string）：
使用单引号或双引号
表达式
用于计算，5 + 6
数组（array）
定义一个数组，[5,6,33,30]
对象（object）：
定义一个对象，{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
函数（function）：
function myFunction(a, b) { return a * b;}

2、变量

用于存储数据值。

用 var 来定义变量，使用 = 来为变量赋值

var x, length
x = 5
length = 6

Value = undefined
未使用值来声明的变量，其值为 undefined。

let
const

3、操作符

算术运算符
赋值运算符

4、语句

用于向浏览器发出命令。语句的作用是告诉浏览器该做什么。
用 ;分割

document.getElementById("demo").innerHTML = "你好 Dolly";
//向 id="demo" 的 HTML 元素输出文本 "你好 Dolly"

代码块

作用是一并地执行语句序列。

function myFunction()
{
    document.getElementById("demo").innerHTML="你好Dolly";
    document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

对代码行进行折行

JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

document.write("你好 \
世界!");
//字符串中使用反斜杠对代码行进行换行

5、语句标识符（关键字）

用于标识要执行的操作。
JavaScript 语句通常以一个语句标识符为开始，并执行该语句。
和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。

var ：创建新的变量
function ：定义一个函数
break ：用于跳出循环
continue ：跳过循环中的一个迭代
catch ：语句块，在 try 语句块执行出错时执行 catch 语句块。
try ：实现错误处理，与 catch 一同使用。
while ：当条件语句为 true 时，执行语句块。
do … while ：执行一个语句块，在条件语句为 true 时继续执行该语句块。
for ：在条件语句为 true 时，可以将代码块执行指定的次数。
for … in ：用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
if … else ：用于基于不同的条件来执行不同的动作。
return ：退出函数
switch ：用于基于不同的条件来执行不同的动作。
throw ：抛出（生成）错误。

6、注释

单行注释 //
多行注释 /* */

7、数据类型

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

查看变量的数据类型：typeof操作符

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

声明变量类型：new

当声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;

对象

拥有属性和方法的数据。
对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。

var car = {name:"Fiat", model:500, color:"white"};

JavaScript 对象是变量的容器。
访问对象属性：

//方法一
person.lastName;
//方法二
person["lastName"];

8、函数

javaScript 语句可以写在函数内，函数可以重复引用：
引用一个函数 = 调用函数(执行函数内的语句)。

9、字母大小写

JavaScript 语句和变量对大小写是敏感的。

10、字符集

使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符。