JavaScript学习01-初识JavaScript

Meowmow

已于 2022-05-05 12:19:36 修改

阅读量482

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2022-05-05 12:17:19 首次发布

本文链接：https://blog.csdn.net/Meowmow/article/details/124582794

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

初识JavaScript

JavaScript是什么

一种运行在客户端的脚本语言
脚本语言：不需要编译，运行过程中由js解释器逐行解释执行
现在可以基于Node.js技术进行服务器编程

JavaScript的作用

表单动态校验
网页特效
Node.js服务端开发
Electron桌面程序
Cordova APP
控制硬件–物联网Ruff
游戏开发

HTML/CSS/JS的关系

HTML/CSS是标记语言–描述语言
JS是脚本语言–编程类语言

浏览器如何执行JS

浏览器分有渲染引擎和JS引擎
渲染引擎解析HTML和CSS，俗称内核
JS引擎读取网页的JavaScript代码，对其逐行处理执行，称为JS解释器

JS的组成

ECMAScript JavaScript语法

ECMAScript是由ECMA国际进行标准化的一门编程语言，分为JavaScript和JsScript
ECMAScript规定了JS的编程语法和基础核心知识，所有浏览器产商都遵循的一套标准

DOM 页面文档对象模型

W3C组织推荐的处理可扩展标记语言的标准编程接口
通过DOM提供的接口可以对页面的各种元素进行大小、位置、颜色等操作

BOM 浏览器对象模型

提供了独立于内容，可以与浏览器窗口进行互动的对象结构
通过BOM可以操作浏览器窗口，比如弹出框、浏览器跳转、获取分辨率等

JS的3种书写位置

行内式

<input type="text" value="确定" onclick="alert('hello')" />

单行代码写在HTML事件属性（以on开头的属性）中
推荐HTML使用双引号，JS使用单引号
可读性差

内嵌式

写在head标签里的script标签内

<head>
	<title></title>
	<style></style>
	<script>
		alert('hello');
	</script>
</head>

外部文件

写在外部js文件内，在html文件内引用js文件

//test.js文件
alert('hello');

//my.html文件
<head>
	<title></title>
	<style></style>
	<script src="test.js"></script>
</head>

JavaScript输入输出语句

alert(msg)  //弹出警示框
console.log(msg)   //浏览器控制台打印
prompt(msg)   //浏览器弹出输入框（一个输入）

<script>
	alrt('这是提示信息');
	prompt('输入点什么吧');
	console.log('这条信息会输出在浏览器控制台');
</script>

变量

用于存储数据的容器，通过变量名获取数据
变量是程序在内存中申请的一块用来存放数据的空间

变量的使用

声明变量 var 关键字申请内存空间

var 变量名;

给变量赋值变量的初始化

var age;
age=18;
//或
var age=18;

使用变量

var age=18;
alert(age);
alert('年龄为：'+age);

更新变量以最后一次赋值为准

var age=18;
alert(age);  //18
age=20;
alert(age);  //20

同时声明多个变量以逗号隔开

var age=11,name='小明',address='中国';

变量声明的特殊情况

只声明不赋值

var age;
console.log(age);  //打印undefined

不声明不赋值

console.log(age);  //报错

不声明只赋值

age=11;
console.log(age);  //11

变量命名规范

可由字母、数字、下划线、美元符号$组成
区分大小写
不能以数字开头
不能是关键字、保留字
驼峰命名法，首字母小写，后单词首字母大写

数据类型

JavaScript是一种弱类型语言（动态语言），不用提前声明变量的类型，程序运行过程中根据赋值会被自动确定

var age=10;  //数字
var name='小明';  //字符串

相同的变量可以有不同的类型

var age=10;  //age为数字
var age='18岁';  //age为字符串

数据类型分类

简单数据类型 Number, String, Boolean, Undefined, Null
复杂数据类型 object

Number 数字型

包括整型和浮点型，默认值0

//进制  二进制、八进制、十进制、十六进制
//八进制前面加0，十六进制前面加0x
//八进制数字范围0~7
var num1=07; 
//十六进制数字范围0~9,A~F
var num2=0xA;

//数字范围
Number.MAX_VALUE  
Number.MIN_VALUE

//特殊值
alert(Infinity);  //无穷大
alert(-Infinity);  //无穷小
alert(NaN);  //NaN 非数字

//方法 isNaN()判断变量是否为非数字类型，返回true或false
var x=18;
console.log(isNaN(x));  //false
var x='xxxx';
console.log(isNaN(x));  //true

String 字符串型

用配对的双引号或者单引号表示的，默认""

//引号嵌套
var str1='嵌套"字符"串';  //外单内双
var str2="嵌套'字符'串";  //外双内单

字符串转义符

转义符	解释
\n	换行
\ \	斜杠
\ ’	单引号
\ "	双引号
\t	tab缩进
\b	空格

var str='字符串\n转义符';
//输出
//字符串
//转义符

//字符串长度
var str='这是一个字符串';
alert(str.length);   //7

//字符串拼接  使用加号连接字符串
alert('字符串1'+'字符串2');

任何类型与字符串拼接结果都是字符串

Boolean 布尔型

true、false 默认false

//true值为1，false值为0
console.log(true+1);  //2
console.log(false+1);  //1

Undefined

声明了未赋值，默认值undefined

var x;
console.log(x);  //undefined
console.log('hello'+x);  //helloundefined
console.log(1+x);  //NaN
console.log(true+x);  //NaN

Null

声明了赋值为null，默认值null

var x=null;
console.log(x);  //null
console.log('hello'+x);  //hellonull
console.log(1+x);  //1
console.log(true+x);  //1

获取数据类型

console.log(typeof 变量名);

var x=null;
console.log(typeof x);   //打印object

字面量

固定值的表示方法
数字字面量：8，9，120…
字符串字面量：‘字符串1’,‘字符串啦啦啦’…
布尔字面量：true,false

数据类型转换

转为字符串类型

var num=10;

//1  .toString()
alert(num.toString());

//2  String()
alert(String(num));

//3  隐式转换 +
alert('字符串：'+num);

转为数字型


//1 转为整型
alert(parseInt('3.14'));   //3
alert(parseInt('12个苹果'));  //12

//2 转为浮点型
alert(parseFloat('3.14'));   //3.14
alert(parseFloat('12个苹果'));  //12

//3 转为数字型
alert(Number('3.14'));   //3.14

//4  隐式转换 使用 - * /
alert('12'-1);  //11
alert('12'*1);  //12
alert('12'/1);  //12

转为布尔型
代表空、否定的值会转换为false
其他的全部为true

//false
console.log(Boolean(''));  
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));

//true
console.log(Boolean('小明'));
console.log(Boolean(12));

解释型语言和编译型语言

翻译器翻译的方式：编译和解释
编译器：在代码执行前编译，生成中间代码文件（把所有菜做好才能吃）
解释器：在运行时解释，并立即执行（吃火锅一样边涮边吃）

标识符、关键字、保留字

标识符

为变量、属性、函数、参数取的名字，不能是关键字和保留字

关键字

JS已经使用了的，不能作为变量名和方法名
break , case , catch , continue , default , do , if , else , finally , for , function , in , instanceof , new , return , switch , this , throw , try , typeof , var , void , while , with…

保留字

预留的关键字，未来可能成为关键字
boolean , byte , char , class , const , debugger , double , enum , extends , final , float , goto , implements , import , int , long , native , package , private , protected , public , short , static , super , synchronized , throws , transient , volatile…

Meowmow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习01-初识JavaScript

目录初识JavaScriptJavaScript是什么JavaScript的作用HTML/CSS/JS的关系浏览器如何执行JSJS的组成ECMAScript JavaScript语法DOM 页面文档对象模型BOM 浏览器对象模型JS的3种书写位置行内式内嵌式外部文件JavaScript输入输出语句变量变量的使用变量声明的特殊情况变量命名规范数据类型数据类型分类Number 数字型String 字符串型Boolean 布尔型UndefinedNull获取数据类型字面量数据类型转换解释型语言和编译型语言标
复制链接

扫一扫