认识JavaScript

最新推荐文章于 2024-08-03 17:05:14 发布

骤雨f

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量189

点赞数

分类专栏： JavaScript 前端文章标签： javascript ecmascript

本文链接：https://blog.csdn.net/Brycee/article/details/119875544

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

什么是JavaScript?

定义

JavaScript是一个编程语言，允许用户在浏览器页面上完成复杂的事情。浏览器页面并不总是静态的，往往显示一些需要动态更新的内容，交互式地图，动画，以及视频等。一个完整的JavaScript包括核心(ECMAScript)，应用程序编程接口即API (比如DOM(Document Object Model)，BOM(Browser Object Model))，以及其他第三方API。JavaScript与HTML、CSS一同配合共同完成一个复杂页面的显示。

特点

客户端代码，在客户机上执行

1.JavaScript特殊的地方在于它也可以作为服务器端代码执行，但是需要搭建Node环境。node hello.js

2.在浏览器上运行

解释性语言

被内置于浏览器或者Nodejs平台中的js解析器解析执行，执行前无需编译

弱类型语言

从上往下顺序解析执行

JavaScript组成

ECMAScrip(JavaScript标准)

描述了该语言的语法和基本对象

注释 // 、/**/

变量

操作符

流程控制语句

数组

对象

函数

正则表达式

...

DOM：Document Object Model文档对象模型

描述处理网页内容的方法和接口。

BOM：Browser Object Model 浏览器对象模型

描述与浏览器进行交互的方法和接口。

开发人员可以使用BOM控制浏览器显示的页面以外的部分。弹出新浏览器窗口；移动，缩放，关闭浏览器的功能；提供浏览器详细信息的navigator对象;提供浏览器所加载页面的详细信息的location对象；提供用户显示器分辨率详细信息的screen对象；对cookies的支持；支持XMLHttpRequest,IE中的ActiveXObject自定义对象

使用JavaScript

内部JavaScript

在<head>标签体中添加<script>元素，然后将js代码填写进来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript">
    alert('hello javascript')
  </script>
</head>
<body>
</body>
</html>

外部JavaScript

新建一个后缀名为.js的js文件，编写好HTML文件，在<head>标签体内添加<script>元素，使用script标签的src属性将将js文件导入进来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>

在body和head中使用JavaScript的区别

在body部分中的JavaScript会在页面加载的时候被执行，在head部分中的JavaScript会在被调用的时候才执行。

因为浏览器解析html是从上到下的。如果把JavaScript放在head里的话，则先被解析，但这时候body还没有解析，所以会返回空值。一般都会绑定一个监听，当全部的html文档解析完之后再执行代码

windows.onload = function(){
	// 这里放执行的代码
}

这就说明了，如果我们想定义一个全局对象，而这个对象是页面中的某个按钮时，我们必须将其放入body中，道理很明显：如果放入head，那当你定义的时候，那个按钮都没有被加载，可能获得的是一个undefind。一般习惯将JavaScript放在body的最后面，类似last-child。

注释

单行注释

//注释内容

多行注释

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

变量

变量是一个值的容器，该容器的值可以随时改变。ECMAScript的变量是弱类型（松散类型），可以用来保存任何类型的数据。定义变量时使用var关键字。

变量的使用：

声明 var message;

初始化 message = "hello"

声明并初始化 var message = "hello";

定义多个变量 var message= "hello",found=false, age = 29;

变量名的命名规则：

变量名由字母，数字，下划线以及$组成。

不要使用下划线或者数字作为变量名的开头

变量名应该具有一定的意义，使用小驼峰命名规则 var userAgeTotal = "";

不要使用关键字或是保留字

var

var用于声明一个变量，在es6中，可以通过let声明一个变量，通过const声明一个常量

变量可以重复声明

变量声明会被提升（函数声明也会）

//console.log(b);//报错
console.log(a);//不会报错
var a = 3;
//等价于：
var a;//在所有代码执行之前，js解释器会将js中所有的var声明的变量提升。
console.log(a);
a=3;

var声明的变量的作用域

案例1

function foo(){
  if(true){
    var a = 3;  
    console.log("inner",a);//inner 3
  }
  console.log("outer",a);//outer 3  //没有块级作用域
}
foo();
console.log(a);//error!  函数作用域：局部作用域
// var 的变量声明提前知会提升到当前作用域的最前面

案例2

//如果在函数中定义变量没有加var，该变量为全局变量
function test(){
  message = "hello"; 
}
test();
console.log(message); //可以访问

案例3

//用var操作符定义的变量将成为定义该变量的作用域中的局部变量
//全局作用域
function b() {
  a = 10;
  return;
}
var a = 1;
b();
console.log(a);//10

案例4

x = 1;//window.x  global.x
console.log(x); //1
function y() {
  console.log(x); //undefined
  console.log(this.x);//1
  var x = 2;
  console.log(x); //2
}
y();
console.log(x);//1

案例5

//函数作用域：局部作用域
var a = 1;
function b() {
  a = 10;
  return;
  //a函数声明，提前变量a，将a认为是函数b作用域的变量，具有局部效果
  function a(){}
} 
b(); 
console.log(a); // 1

数据类型

JavaScript基本数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值）

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "Brycee";      // 现在 x 为字符串

字符串 String

字符串是存储字符（比如 "Bill Gates"）的变量。

字符串可以是引号中的任意文本。可以使用单引号或双引号：

可以使用字符字面量，转义字符 \n 换行 \t 制表 \b 退格 \r 回车 \ 斜杠 ' 单引号 " 双引号字符长度可通过length属性获取字符长度

var str = "我是字符串";
console.log(str);
console.log(str.length);
var s4='\n\t\b\r';

数字 Number

JavaScript 只有一种数字类型。数字有很多类型，按照数字精度可以分为整数(int),单精度(float),双精度(double )，按照数字的表示方法可以分为二进制(Binary)，八进制(Octal)，十进制(decimal system)，十六进制(Hexadecimal)。但是在js中，所有的数字统一使用Number来表示。

整数：

var num1 = 34;         //不使用小数点来写
var num2 = 010;        //8
var num3 = 0x10;       //16
console.log(x1, x2, x3, x4);

浮点数：

var f1 = 3.1415926;  //3.1415926
var f2 = 3.125e7;    //31250000
console.log(f1, f2);

非数值：

该数值表示一个本来要返回数值的操作数未返回数据的情况

var a = 10/ "a";	// a为NaN

布尔 Boolean

布尔（逻辑）只能有两个值：true 或 false。

Null

该类型的取值只有一个，即null。null可以表示一个空对象的指针

如果一个变量准备将来保存对象，可以将该变量初始化null而不是其他，这样可以通过检查null值就可以知道相应的变量是否已经保存了一个对象的引用。

Undefined

Undefined 这个值表示变量不含有值。未定义的。

undefined 与null关系

undefined继承null，所以undefined == null结果为true，但是null表示空对象，undefined表示未定义；

null与undefined用途不同，null可以用来表示一个空对象，但是没有必要把一个变量的值显式设置为undefined。

引用数据类型

对象Object

对象是模拟现实生活的对象，对象由键值对组成，通过使用大括号将所有键值对括起来。

var obj = {
	name: 'momo',
	age: 1
}

数组Array

数组是一个特殊的对象，包含了多个值，值与值之间使用逗号分隔开，所有的值通过中括号括起来。

var classArr = ['2021','2022','2023']
var studentArr = ['zhangsan','lisi','wangwu']

函数Function

函数是代码执行单元，用于实现某些特殊的功能。

function sum(a, b) {
  return a + b;
}
//执行函数
sum(1,2); // 3

类型判断

typeof

使用typeof判断数据类型

返回该变量名所指向数据的类型

语法： typeof 变量名

返回值如下：

"undefined" 未定义
"boolean" 布尔类型
"string" 字符串
"number" 数值
"object" 对象或者null或者数组
"function" 函数

isNaN

判断是否是不是一个数字

var a = 10/'a';
isNaN(a);    //true

isFinite

判断是否是一个有效值

var a = 10/0 ;
isFinite(a)   // false

骤雨f

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识JavaScript

目录什么是JavaScript?定义特点JavaScript组成使用JavaScript注释变量数据类型JavaScript基本数据类型引用数据类型类型判断什么是JavaScript?定义JavaScript是一个编程语言，允许用户在浏览器页面上完成复杂的事情。浏览器页面并不总是静态的，往往显示一些需要动态更新的内容，交互式地图，动画，以及视频等。一个完整的JavaScript包括核心(ECMAScript)，应用程序编程接口即API...
复制链接

扫一扫