初识JavaScript的基础

目录
  • 一、JavaScript的书写位置
  • 二、JavaScript常用的输入输出语句
    • 1.浏览器弹出警告框：
    • 2.浏览器控制台打印输出信息：
    • 3.浏览器弹出输入框，让用户可以输入：
  • 三、变量
    • 1.变量的使用：
    • 2.读取输入的值(cin>>)
    • 3.JavaScript中数值的最大最小值、无穷
    • 4.使用isNaN来判断是否为数字
    • 5.typeof检测变量数据类型
    • 6.数据类型转换
      • 6.1转换为字符串
      • 6.2转化成数字型
      • 6.3转化为布尔型
  • 四、运算符
  • 五、函数
    • 1.函数的使用：先声明函数，再调用函数
    • 2.函数的参数
    • 3.函数的返回值
    • 4.argument的使用
    • 5.函数的两种声明方法
      • 1.命名函数
      • 2.匿名函数
  • 六、作用域
    • 1.JavaScript的作用域
    • 2.变量的作用域
    • 3.作用域链
  • 总结

一、JavaScript的书写位置

一般分为三种：行内、内嵌、和外

<!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>
    <!-- 2.内嵌式的js -->
    <script>
        alert('弹出')
    </script>
    <!-- 3.外部的js -->
    <script src="outside.js"></script>
</head>
<body>
    <!-- 1.行内式的js,直接写在元素内部 -->
    <input type="button" value="button" onclick="alert('我是一个按键')">
</body>
</html>

二、JavaScript常用的输入输出语句

1.浏览器弹出警告框：

alert（msg）

2.浏览器控制台打印输出信息：

console.log(msg)

输出信息在F12中的console可以看到

3.浏览器弹出输入框，让用户可以输入：

prompt（info）

三、变量

1.变量的使用：

1.声明变量 2.赋值

js的数据变量类型在程序运行时根据等号右边的值来进行确认

         var a；//声明变量a
         a=1；
         alert（a）

2.读取输入的值(cin>>)

 <script>
        var a = prompt();
        // a=1;
        alert(a);
    </script>

3.JavaScript中数值的最大最小值、无穷

Number.MAX_VALUE Number.MIN_VALUE

Infinity -Infinity

4.使用isNaN来判断是否为数字

isNaN(11) 返回false 不是数字返回true

5.typeof检测变量数据类型

<script>
    var num =10;
    console.log(typeof num);//检测num的数据类型
</script>

6.数据类型转换

6.1转换为字符串

//1. toString()
var num=1;
alert(num.toString());
//2.String()强制转换
var num = 1;
alert(String(num));
//3.加号拼接字符串
var num = 1;
alert(num+"字符串");

6.2转化成数字型

    <script>
        // 1.parseInt 得到的是整数
        var age = prompt("input your age");
        console.log(parseInt(age))
        // 2.parseFloat 得到的是浮点数
        console.log(parseFloat(age));
        // 3.Number()强制转换
        console.log(Number(age));
        // 4.利用算数运算 - * /都可以
        console.log('12'-0);
        console.log('12'-'10')//输出为数字型的2
    </script>

6.3转化为布尔型

使用Boolean()函数

代表空、否定的值会被转换为 false ，如〝O、NaN、 null、undefined

其余值都会被转换为 true

四、运算符

运算符优先级

五、函数

1.函数的使用：先声明函数，再调用函数

function 函数名(){
        //函数体
}

2.函数的参数

分为形参和实参

3.函数的返回值

用return return 返回的值

return后面的代码不会被执行且只能返回一个值

4.argument的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments 对象，arguments 对象中存储了传递的所有实参

function fn(){
    console.log(argument);//里面存储了所有传递过来的实参
    }
fn(1,2,3);

浏览器中

argument展示形式是一个伪数组，但是他具有数组的length的属性并且按照索引的方式存储。可是他没有数组的一些方法 如：pop push

5.函数的两种声明方法

1.命名函数

 function fn(){
    //函数体
    }
    fn();

2.匿名函数

var fun = function(){
    //函数体
}
fun();

fun是变量名 不是函数名但函数表达式（匿名函数）也可以进行参数的传递

六、作用域

1.JavaScript的作用域

通常来说 ，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻程的局部性，增强了程序的可靠性，减少了名字冲突。

一般分为全局作用域和局部作用域

全局作用域是在整个script标签中的，局部作用域是在函数内部

值得注意的是，在js中是没有块级作用域的，即如果在if中声明一个变量，在外面也是可以调用的

if(3>5){
    var num = 1;
}
console.log(num);

在浏览器中是可以进行编译不会报错的

2.变量的作用域

全局变量也是在script标签中的，如果在函数内部没有声明直接赋值的变量也属于全局变量

function fn(){
    num2 =10;//全局变量
    var num1 =1;//局部变量
    }

全局变量在函数中也可以使用

3.作用域链

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问

采用就近原则。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

赞 (0)

相关推荐

  • javascript的基础交互详解

    目录 一.元素的获取方式 文档下获取 id获取 类名获取(className) 标签名(tagName) 自定义获取范围 二.鼠标事件 区别: 三.元素操作 1.操作元素内容 操作表单元素内容 操作普通闭合标签 2.操作元素属性 总结 一.元素的获取方式 文档下获取 只要在文档中符合都会获取到 id获取 基本语法:document.getElementById(id值); document:文档,表示获取的范围 get:获取 Element:元素 By:通过.. 返回的是元素对象 返回值:获取到

  • Javascript基础:运算符与流程控制详解

    目录 1. 运算符(操作符) 1.1 算数运算符 1.2 递增和递减运算符 1.3 比较运算符 1.4 逻辑运算符 1.5 赋值运算符 1.6 运算符优先级 2. 流程控制 2.1 if 的语法结构 2.2 if else双分支语句 2.3 if else if语句(多选1) 2.4 三元表达式 2.5 switch分支流程控制 总结 1. 运算符(操作符) 「运算符」是用于实现赋值.比较和执行算数运算等功能的符号.常用运算符分类如下 算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运

  • Javascript基础知识详解

    Javascript基础知识详解

    目录 变量 数据类型 扩展点 总结 变量 基本语法 var age=10;//声明一个名称为age的变量,并且为它赋值,称为变量的初始化 var是一个JS关键字,用来声明变量.我们也可以按照其他编程语言的思路,给变量进行更新,并且可以同时声明多个变量,此时只需要使用一个var 多个变量名之间使用英文逗号来隔开. 命名规范 由字母(A-Za-z).数字(0-9).下划线(_).美元符号( $ )组成,如:usrAge, num01, _name 严格区分大小写.var app; 和var App;

  • javascript函数式编程基础

    javascript函数式编程基础

    目录 一.引言 二.什么是函数式编程 三.纯函数(函数式编程的基石,无副作用的函数) 四.函数柯里化 五.函数组合 六.声明式和命令式代码 七.Point Free 八.示例应用 九.总结 一.引言 函数式编程的历史已经很悠久了,但是最近几年却频繁的出现在大众的视野,很多不支持函数式编程的语言也在积极加入闭包,匿名函数等非常典型的函数式编程特性.大量的前端框架也标榜自己使用了函数式编程的特性,好像一旦跟函数式编程沾边,就很高大上一样,而且还有一些专门针对函数式编程的框架和库,比如:RxJS.cy

  • JavaScript的基础语法和数据类型详解

    JavaScript的基础语法和数据类型详解

    目录 引入JavaScript 1.内部标签 2.外部引入 基础语法 数据类型 number 字符串 布尔值 逻辑运算 比较运算符 数组 对象 流程控制 Map和Set iterator 总结 引入JavaScript 1.内部标签 <script> alert("hello world"); </script> 2.外部引入 <script src="js/abc.js"></script> 基础语法 定义变量 &l

  • Javascript基础知识中关于内置对象的知识

    目录 1.内置对象介绍 1.1 Math对象 1.2 Math中的方法 1.3 Date对象 2.Date中的方法 3.经典案例:倒计时效果: 4.Array数组对象 4.1 数组的创建 4.2 数组中的常用方法 5.字符串String 1.内置对象介绍 JavaScript组成: ECMAScript | DOM | BOM ECMAScript: 变量 , 函数, 数据类型 ,流程控制,内置对象 js中的对象: 自定义对象 , 内置对象 , 浏览器对象(不属于ECMAScript) 1.1

  • 初识JavaScript的基础

    初识JavaScript的基础

    目录 一.JavaScript的书写位置 二.JavaScript常用的输入输出语句 1.浏览器弹出警告框: 2.浏览器控制台打印输出信息: 3.浏览器弹出输入框,让用户可以输入: 三.变量 1.变量的使用: 2.读取输入的值(cin>>) 3.JavaScript中数值的最大最小值.无穷 4.使用isNaN来判断是否为数字 5.typeof检测变量数据类型 6.数据类型转换 6.1转换为字符串 6.2转化成数字型 6.3转化为布尔型 四.运算符 五.函数 1.函数的使用:先声明函数,再调用函

  • javascript数据类型基础示例教程

    javascript数据类型基础示例教程

    js中的输入输出语句 方法 说明 归属 alert(msg) 浏览器弹出警示框 浏览器 console.log(msg) 浏览器控制台打印输出信息 浏览器 prompt(info) 浏览器弹出输入框,用户可以输入 浏览器 注:prompt(info)获取的输入都是字符串类型,跟python中的input()类似. <script> prompt("请输入:"); alert('你好呀!小可爱!'); console.log('阿牛最帅啦!'); </script>

  • 老生常谈JavaScript面向对象基础与this指向问题

    前 言 我们的程序语言经历了从"面向机器".到"面向过程".再到"面向对象"的一个过程.而JavaScript是一门基于对象的一门语言,它介于面向过程与面向对象之间.在学习JavaScript的过程中,OOP是非常重要的一环,下面我们来一起探讨一下JS中的面向对象吧!!! 1 .OOP的基础问题 1.1什么是面向过程和面向对象? 面向过程:专注于如何去解决一个问题的过程步骤.编程特点是由一个个的函数去实现每一步的过程步骤,没有类和对象的概念. 面

  • JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运算符(+,-,*,/,++,--,%).比较运算符(>,<,<=,>=,==,===,!=,!==).逻辑运算符(||,&&,!).条件运算(?:).位移运算符(|,&,<<,>>,~,^)和字符串运算符(+). 可能很多人不知道&quo

  • JavaScript常用基础知识强化学习

    首先,还是用比较官方的文字描述来解释下JavaScript: JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. JavaScript拥有以下几个特点: · 脚本语言.JavaScript是一种解释型的脚本语言,C.C++等语言先编译后执行,而JavaScript是在程序的运行

  • javascript cookie基础应用之记录用户名的方法

    本文实例讲述了javascript cookie基础应用之记录用户名的方法.分享给大家供大家参考,具体如下: 前面有一篇关于cookie基础的文章,封装了 cookie.js,下面我们通过一个实例来应用这个 js. 最常见的就是记住用户名,当用户登录过一次后,通过 cookie 记录下该用户的账号和密码,这样下次打开页面的时候不用再次输入账号密码了.附上代码: <!DOCTYPE HTML> <html lang="en-US"> <head> &l

  • JavaScript 语言基础知识点总结（思维导图）

    JavaScript 语言基础知识点总结（思维导图）

    JavaScript 数组 JavaScript 函数基础 Javascript 运算符 JavaScript 流程控制 JavaScript 正则表达式 JavaScript 字符串函数 JavaScript 数据类型 JavaScript 变量 Window 对象 DOM 基本操作    由于上面的图片比较大,建议大家下载到本地查看

  • JavaScript弹窗基础篇

    JavaScript弹窗基础篇

    confirm()意既确认框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>confirm</title> </head> <body> <script> var con=confirm("do you like to study javascript?"); if (con) { do

  • JavaScript实现基础排序算法的示例详解

    目录 前言 正文 1.冒泡排序 2.选择排序 3.插入排序 4.快速排序 前言 文本来总结常见的排序算法,通过 JvavScript  来实现 正文 1.冒泡排序 算法思想:比较相邻两个元素的大小,如果第一个比第二个大,就交换它们.从头遍历到尾部,当一轮遍历完后,数组最后一个元素是最大的.除去最后一个元素,对剩下的元素重复执行上面的流程,每次找出剩余元素中最大的,遍历完后,数组是升序的 算法分析:总共需要进行length * (length - 1) / 2 次比较,所以时间复杂度为O(n^2)

  • JavaScript Typescript基础使用教程

    目录 简介 安装 安装命令 使用原因 TypeScript类型概述 JS原有的类型 TS新增的类型 类型别名 泛型 简介 typescript是微软公司开发的开源编程语言,Type+Javascript(type是类型,在js的基础上添加了类型支持) 简称:ts,是Javascript的超集 安装 node.js或者我们的浏览器,他只认识js代码,不认识ts代码,所以我们需要把我们的ts转换为我们的js代码,然后进行运行操作 安装命令 npm i -g typescript yarn globa

随机推荐