JavaScript入门基础
JavaScript入门基础
- 概述
- 变量的声明
- 变量的作用域
- 基本数据类型
- Number类型
- String类型
- Boolean类型
- Undefined类型
- Null类型
- 三大引用类型
- Object类型
- Array类型
- Function类型
- typeof 操作符
- js编写的位置
- js的三种输出方式
概述
JavaScript是世界上最流行的脚本语言，是一种运行在浏览器中的解释型的编程语言，能够实现跨平台、跨浏览器。虽然只是十多天时间的产物，并且有很多的缺陷和陷阱，但也造就了JavaScript的灵活和强大。随着Node.js的兴起，JavaScript已经从单纯实现前端互动，发展到可以全栈实现整个应用。尤其是在移动互联网蓬勃发展以及应用追求极致用户体验的今天，JavaScript更是必须要重视和掌握的。
变量的声明
使用var关键字进行变量的声明，声明的同时也可以进行赋值。变量的声明只能有一次，但赋值可以有多次。如果只声明变量，但是变量没有被赋值，此时变量的值为undefined。
JavaScript变量的类型取决于右侧的对象。
样例代码：
var variable_name1 = 5;
var variable_name2 = 5.3;
var variable_name3 = false;
var variable_name4 = 'zhangsan';
变量的作用域
JavaScript没有块级作用域
java：
if(true) {int a = 1;
}
System.out.println(a); // 编译错误，超出作用域
javascript：
if(true){var a = 1;
}
console.log(a); // 输出1 ，JavaScript没有块级作用域
基本数据类型
Number类型
Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。
String类型
单引号或双引号扩起来的字符集合。
Boolean类型
该类型只有两个值，true和false。
Undefined类型
只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined。
Null类型
Null类型被看做空对象指针，Null类型也是空的对象引用。
三大引用类型
Object类型
我们看到的大多数类型值都是Object类型的实例，创建Object实例的方式有两种。
第一种是使用new操作符后跟Object构造函数，如下所示
var person = new Object();person.name = "Micheal";person.age = 24;
第二种方式是使用对象字面量表示法，如下所示
var person = {name : "Micheal",age : 24};alert(person.name);
Array类型
数组的每一项可以用来保存任何类型的数据，也就是说，可以用数组的第一个位置来保存字符串，第二个位置保存数值，第三个位置保存对象…另外，数组的大小是可以动态调整的。
创建数组的基本方式有两种
第一种是使用Array构造函数，如下所示
var colors = new Array("red","blue","yellow");
第二种是使用数组字面量表示法，如下所示
var colors = ["red","blue","yellow"];
Function类型
每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。函数通常是使用函数声明语法定义的，如下所示
function sum(num1,num2){return num1 + num2;};
这和使用函数表达式定义函数的方式相差无几。
var sum = function (num1,num2){return num1 + num2;
};var result = sum(5,8); alert(result);
typeof 操作符
由于js中的变量是弱类型的，所以它提供了一种检测当前变量的数据类型的方法，也就是typeof关键字。
typeof 123 //Numbertypeof 'abc' //Stringtypeof true //Booleantypeof undefined //Undefinedtypeof null //Objecttypeof { } //Objecttypeof [ ] //Object
js编写的位置
1.将JS代码编写到script标签中：
<script > 写这里</script>
2.还可以将JS代码编写到外部的js文件中，然后通过script标签来引入外部的文件
3.可以将JS代码编写到标签的指定属性中（不推荐使用）
样例代码：
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <!--可以将JS代码编写到script标签中--> <!--<script type="text/javascript"> alert("hello"); </script>--> <!-- 还可以将JS代码编写到外部的js文件中，然后通过script标签来引入外部的文件 将JS代码编写到外部文件中，可以在不同的页面中引入相同的JS代码， 方便后期的维护，并且写在外部文件中可以使用浏览器的缓存，加快访问速度提高用户体验 如果使用script来引入外部文件，则它就不能在编写任何的JS代码了 ， 如果还需要编写则需要创建一个新的script标签 --> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript"> alert("我是内部的JS代码"); </script> </head> <body> <!-- 将JS代码编写到标签的属性中，属于结构与行为耦合，不方便后期的维护，不推荐使用 --> <!-- 可以将JS代码编写到标签的指定属性中 --> <button onclick="alert('点完的效果');">点这里</button> <!-- 可以将JS代码编写到超链接的href中 --> <a href="javascript:alert('第二个效果');">再点这里</a> <br /><br /> </body>
</html>
效果动态图：
js的三种输出方式
/* 控制浏览器弹出一个提示框 */
alert("Hello JavaScript"); /* 控制浏览器在页面中输出一个内容 document.write()向body中写一个内容 */
document.write("牛哄哄的柯南"); /* 向控制台输出一个内容 */
console.log("Keafmd");
样例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>/* 控制浏览器弹出一个提示框 */ alert("Hello JavaScript"); /* 控制浏览器在页面中输出一个内容 document.write()向body中写一个内容 */ document.write("牛哄哄的柯南"); /* 向控制台输出一个内容 */ console.log("Keafmd");</script></body>
</html>效果截图：
浏览器弹出一个提示框↓
浏览器在页面中输出一个内容↓
向控制台输出一个内容↓
控制台调出步骤：网页右键-检查-选择Console
写作不易，如果看完对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd
JavaScript入门基础相关推荐
- JavaScript入门基础知识
JavaScript入门基础学习 1.三种引用JavaScript的方式 1.1行内式 <input type = "button" value="点我试试&quo ...
- JavaScript 入门基础 (八)
目录 1.JavaScript概述 2.HTML世界 3.JavaScript基本语法 4.JavaScript语句 5.JavaScript内置对象 6.Document对象 7.window和fr ...
- JavaScript入门基础学习总结
一 JavaScript 简介 1 JavaScript基本介绍 1 JavaScript 简称JS,是一种动态的弱类型脚本解释型语言,和HTML,CSS并成为三大WEB核心技术,得到了几乎所有主流浏 ...
- javaScript入门基础说明
JavaScript 教程 JavaScript 是 Web 的编程语言. 所有现代的 HTML 页面都使用 JavaScript. JavaScript 非常容易学,本教程将教你打开 JavaScr ...
- javascript入门基础篇重点 第二节2.
<!doctype html> <html lang="en"> <head> <!--声明当前页面的编码集:charset=gbk,g ...
- 捕获鼠标事件-JavaScript入门基础（005）
为页面增加与用户的交互是JavaScript的基本功能之一.那么我们如何能知道用户什么时候单击了鼠标,什么时候按下了键盘呢? 以上特定动作发生之后,会触发事件.通过事件处理器,我们就可以处理相应的事件 ...
- 超详细JavaScript入门基础+练手小案例
目录 一.什么是JavaScript 二.使用方法 1.元素绑定事件 2.文档内嵌 3.外部链接 三.JavaScript输出语句 四.语法规则 4.1 输入语句 4.2 变量的定义 4.3 命名规范 ...
- Javascript——入门基础
目录 变量类型 显示方式: 获取元素 if条件语句 变量类型 名称 类型 number 数字类型 string 字符串类型 boolean 布尔类型 undefined 未声明/定义类型 null 空 ...
- JavaScript入门基础2
1.运算符的优先级 就和数学中一样,在JS中运算符也有优先級, 比如:先乘除 后加减 在JS中有一个运算符优先级的表, 在表中越常上优先级越高,优先级越高越优先计算, 如果优先级一样,则从左往右计算. ...
- JavaScript 入门（上）
目录 一.JavaScript简介 二.JavaScript的特点 1.动态改变页面内容 2.动态改变网页的外观 3.验证表单数据 4.响应事件 三.内容 1.JavaScript简介 一.JavaS ...
最新文章
- 郎咸平：诸葛亮是一名优秀的企业家吗？
- 聊一聊js中的null、undefined与NaN
- 超详细的redis总结
- opencv_python关于Qt的错误
- 未获取root手机抓包方法
- 如何学习c语言 零基础20天学会C语言
- Excel宏的自动运行设置
- 同济保研计算机,同济大学保研率28%，保研高校前四：复旦、北大、交大、清华...
- 交互式应用安全测试(IAST)学习笔记
- 普通路由器DMZ主机设置及访问方法
- 线结构光传感器的标定
- BI 报表工具如何与 springBoot 框架集成
- Mov文件字幕添加与播放
- 阿里fastjson框架基础
- 记一次Process finished with exit code 1 项目异常
- x86服务器MCE（Machine Check Exception）问题
- 正则表达式之密码验证
- wordpress博客评论框添加背景图片
- （转）学习linux的几本书
- 7-5 喵帕斯之天才算数少女 (20 分)