JS入门必备基础知识(适合小白)_js基础-程序员宅基地

技术标签: 脚本语言  前端  JS  js  javascript  

一、JS是什么?

1、JS简介

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的 高级编程语言 。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

2、JS的组成部分

ECMAScript,描述了该语言的语法和基本对象。
文档对象模型(DOM),描述处理网页内容的方法和接口。
浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

3、JS的基本特点

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

    1、是一种解释性脚本语言(代码不进行预编译)。
    2、主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
    3、可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
    4、跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。
    5、Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。
    6、可以实现web页面的人机交互。

4、JS的特性

JavaScript脚本语言具有以下特点:
1)脚本语言。 JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
2)基于对象。 JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
3) 简单。 JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
4) 动态性。 JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
5) 跨平台性。 JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。

5、JS与HTML、CSS的对比

相同点: 三者运行环境都可以在浏览器中。
不同点: HTML、CSS 不叫编程语言,JS运行环境不只是浏览器,也可以是其他环境。

二、JS的用法

1、JS的引入方法

1)head中的 JavaScript 函数

  把<script>标签写在html文件中的<head>标签中

实例如下:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
     
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

2)body中的 JavaScript 函数

把<script>标签写在html文件中的<body>标签中

实例如下:

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
     
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

3)外部的 JavaScript

把JS代码写在JS文件中,然后在html文件中通过<script>标签引入,写项目时通常会把JS写在一个单独的文件中

实例如下:

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

2、JS的基本语法

    1)JS是区分大小写
    2)忽略空白符(空格  换行  tab)
    3)语句分号可加可不加
    4)单行注释//  多行注释/* */
    5)要特别注意标识符和关键字 
    6)不能以数字开头

3、JS中的变量

变量是用于存储信息的"容器",也就是内存中的一个空间。

1)变量名

内存空间的别名

    注意:
    变量必须以字母开头
    变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
    变量名称对大小写敏感(y 和 Y 是不同的变量)

2)变量值

存储在内存空间的数据

3)全局变量与局部变量

全局变量与局部变量的分界点是函数,函数外部的是全部变量,内部的是局部变量。全局变量在函数内外都可以访问,局部变量只能在函数内部访问。

4、数据类型

为了更加合理的使用内存空间,基本上所有的编程语言中都提出
数据类型的概念,研究针对不同的数据,分配不同的空间。

1)基本数据类型

a)number: 数字型

number是一个数据类型,这个数据类型对应的值有无数个。
在JS中number数据类型是不分整数和小数 都是number
可以通过typeof查看一个变量值的数据类型
最大值 和 最小值
number可以通过不同进制显示 进制 10进制 2进制 16进制 8进制
NaN Not a Number 不是一个数字
JS中不要对小数运算

b)String: 字符串类型

在JS中 使用‘’ “”把字符串包起来 不包 JS会给它当成变量
单引号不要嵌套单引号 双引号不要嵌套双引号 外单内双 外双内单
string数据类型对应的数据有无数个

c)boolean 布尔类型

boolean数据类型对应的值就两个 true false
true 和 True 不一样的 JS是区分大小写的

d)undefiend 没有值

undefiend是一个数据类型,这种数据类型对应的值是undefiend

  • 什么时候会出现undeined?
  • 答:一个变量没有赋值 它的值是undefiend 这个值的类型是undefiend

e)**null ** 没有值

2)引用数据类型

object 对象

array 数组
function 函数

3) JS的数据类型转换

隐式类型转化:静悄悄地,JS代码不知不觉地就进行了类型转化
强制类型转化:写代码进行转化

 <script>
    console.log(parseInt(3.14)); // 把小数转成整数
    console.log(parseInt("3.14abc")); // 尝试把小数或非数字转成整数
    console.log(parseFloat(3))
    console.log(parseFloat("3.14abc"))
    console.log(Number("abc123"))  // NaN
    console.log(Number("123abc"))  // NaN
    console.log(Number("123"))  // 123
    console.log(String(123456))  // 123456*/
 </script>

4)typeof 操作符

你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {
    name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {
    }         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

5、JS代码在执行时分两个阶段

1)预编译

把加var的变量进行提升 变量声明会提升 变量的赋值是不会提升
提升到了代码段最前面,把使用function声明的函数进行提升,提升的是整个函数声明

2)代码执行

从头到尾,代码一句一句的执行。

6、加var的变量和没有加var的变量的区别

<script>
// 1)在全局代码中,加var会提升,没有var的不会提升。
     console.log(a);
     a = 110;  // a is not defined

// 2)不管加没加var的全局变量,都会作为window的属性
     var a = 1;
     b = 2;
    console.log(window.a)
     console.log(window.b)

// 3)没有加var的变量,只能作为全局变量,只要是全局变量,肯定是window的属性
     function f() {
    
         a = 666;
    }
     f()
     console.log(window.a)

// 4)加var的局部变量,不会作为window的属性
     function f() {
    
         var a = 666;
     }
    f()
     console.log(a)
     访问一个对象上不存在的属性,结果就是und
     console.log(window.a) // undefined
</script>

7、初步了解执行上下文( 给代码提供数据)

代码分两类:
全局代码 函数外面的代码叫全局代码
函数代码 一个函数就是一个局部代码

 全局执行上下文:
    全局代码在执行时时,就会产生全局的EC。 EG(G)
 局部执行上下文:
    函数代码在执行时,就会产生局部的EC。调用一个函数就产生一个EC,调用100个函数,就产生100个EC。

 EC栈:
    栈:杯子
    每产生一个EC就会放到杯子中,通俗的说就是杯子中放鸡蛋。
    栈:先放进去的后出来

8、初步了解函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数定义= 声明 + 赋值
函数就是包裹在花括号中的代码块,前面使用了关键词 function:

注意:调用函数时,就会把函数体中的代码都执行了,函数调用的过程就是实参向形参赋值的过程,一个函数没有返回值,返回的类型就是undefined。

9、let和const声明

1)let声明

<script>
    // 1)let声明的变量没有提升(let声明的变量也提升,仅仅是没有初始化)
     console.log(a);
     let a = 110;  //  Cannot access 'a' before initialization

    // 2)let 配合 {} 也可以形成块级作用域
     if(true){
    
        var a = 110; // 全局变量
         // b只能在当前的{}中被访问到 出了块就访问不了
         let b = 666; // let + {} 形成块级作用域
     }
     console.log(b); // b is not defined

    //  3)使用let声明的变量不会挂载到GO上
     let a = 110;
     console.log(window.a); // undefine

    // 4)使用let不能重复声明
    let a = 1;
    let a = 2;
     console.log(a); // Identifier 'a' has already been declared

    // 不要使用var来定义变量  使用let声明变量

</script>

2)const声明

<script>
    // const是声明一个常量
     const a = 110;  // 定义了一个常量(不会改变的量)
     a = 666;
     console.log(a); // TypeError: Assignment to constant variable.

    // 1)也没有提升
    console.log(a);
    const a = 1;  //  Cannot access 'a' before initialization

    // 2) 也会形成块级作用域
     if(true){
    
         const a = 111;
     }
     console.log(a); //  a is not defined

    // 3)使用const声明的常量不会挂载到GO上
     const a = 1;
     console.log(window.a); // undefined

    // 4)使用const不能重复声明
    const a = 1;
    const a = 2;
    // Identifier 'a' has already been declared
    console.log(a);

    // 5)const在声明常量时,必须赋值
     const a;
     a = 1;
     console.log(a)

    // 用法:声明变量使用let  声明常量使用const  不要用var
</script>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/a_l_f_/article/details/107416292

智能推荐

JWT(Json Web Token)实现无状态登录_无状态token登录-程序员宅基地

文章浏览阅读685次。1.1.什么是有状态?有状态服务,即服务端需要记录每次会话的客户端信息,从而识别客户端身份,根据用户身份进行请求的处理,典型的设计如tomcat中的session。例如登录:用户登录后,我们把登录者的信息保存在服务端session中,并且给用户一个cookie值,记录对应的session。然后下次请求,用户携带cookie值来,我们就能识别到对应session,从而找到用户的信息。缺点是什么?服务端保存大量数据,增加服务端压力 服务端保存用户状态,无法进行水平扩展 客户端请求依赖服务.._无状态token登录

SDUT OJ逆置正整数-程序员宅基地

文章浏览阅读293次。SDUT OnlineJudge#include<iostream>using namespace std;int main(){int a,b,c,d;cin>>a;b=a%10;c=a/10%10;d=a/100%10;int key[3];key[0]=b;key[1]=c;key[2]=d;for(int i = 0;i<3;i++){ if(key[i]!=0) { cout<<key[i.

年终奖盲区_年终奖盲区表-程序员宅基地

文章浏览阅读2.2k次。年终奖采用的平均每月的收入来评定缴税级数的,速算扣除数也按照月份计算出来,但是最终减去的也是一个月的速算扣除数。为什么这么做呢,这样的收的税更多啊,年终也是一个月的收入,凭什么减去12*速算扣除数了?这个霸道(不要脸)的说法,我们只能合理避免的这些跨级的区域了,那具体是那些区域呢?可以参考下面的表格:年终奖一列标红的一对便是盲区的上下线,发放年终奖的数额一定一定要避免这个区域,不然公司多花了钱..._年终奖盲区表

matlab 提取struct结构体中某个字段所有变量的值_matlab读取struct类型数据中的值-程序员宅基地

文章浏览阅读7.5k次,点赞5次,收藏19次。matlab结构体struct字段变量值提取_matlab读取struct类型数据中的值

Android fragment的用法_android reader fragment-程序员宅基地

文章浏览阅读4.8k次。1,什么情况下使用fragment通常用来作为一个activity的用户界面的一部分例如, 一个新闻应用可以在屏幕左侧使用一个fragment来展示一个文章的列表,然后在屏幕右侧使用另一个fragment来展示一篇文章 – 2个fragment并排显示在相同的一个activity中,并且每一个fragment拥有它自己的一套生命周期回调方法,并且处理它们自己的用户输_android reader fragment

FFT of waveIn audio signals-程序员宅基地

文章浏览阅读2.8k次。FFT of waveIn audio signalsBy Aqiruse An article on using the Fast Fourier Transform on audio signals. IntroductionThe Fast Fourier Transform (FFT) allows users to view the spectrum content of _fft of wavein audio signals

随便推点

Awesome Mac:收集的非常全面好用的Mac应用程序、软件以及工具_awesomemac-程序员宅基地

文章浏览阅读5.9k次。https://jaywcjlove.github.io/awesome-mac/ 这个仓库主要是收集非常好用的Mac应用程序、软件以及工具,主要面向开发者和设计师。有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章《工具武装的前端开发工程师》,于是建了这么一个仓库,持续更新作为补充,搜集更多好用的软件工具。请Star、Pull Request或者使劲搓它 issu_awesomemac

java前端技术---jquery基础详解_简介java中jquery技术-程序员宅基地

文章浏览阅读616次。一.jquery简介 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互 jQuery 的功能概括1、html 的元素选取2、html的元素操作3、html dom遍历和修改4、js特效和动画效果5、css操作6、html事件操作7、ajax_简介java中jquery技术

Ant Design Table换滚动条的样式_ant design ::-webkit-scrollbar-corner-程序员宅基地

文章浏览阅读1.6w次,点赞5次,收藏19次。我修改的是表格的固定列滚动而产生的滚动条引用Table的组件的css文件中加入下面的样式:.ant-table-body{ &amp;amp;::-webkit-scrollbar { height: 5px; } &amp;amp;::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box..._ant design ::-webkit-scrollbar-corner

javaWeb毕设分享 健身俱乐部会员管理系统【源码+论文】-程序员宅基地

文章浏览阅读269次。基于JSP的健身俱乐部会员管理系统项目分享:见文末!

论文开题报告怎么写?_开题报告研究难点-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏15次。同学们,是不是又到了一年一度写开题报告的时候呀?是不是还在为不知道论文的开题报告怎么写而苦恼?Take it easy!我带着倾尽我所有开题报告写作经验总结出来的最强保姆级开题报告解说来啦,一定让你脱胎换骨,顺利拿下开题报告这个高塔,你确定还不赶快点赞收藏学起来吗?_开题报告研究难点

原生JS 与 VUE获取父级、子级、兄弟节点的方法 及一些DOM对象的获取_获取子节点的路径 vue-程序员宅基地

文章浏览阅读6k次,点赞4次,收藏17次。原生先获取对象var a = document.getElementById("dom");vue先添加ref <div class="" ref="divBox">获取对象let a = this.$refs.divBox获取父、子、兄弟节点方法var b = a.childNodes; 获取a的全部子节点 var c = a.parentNode; 获取a的父节点var d = a.nextSbiling; 获取a的下一个兄弟节点 var e = a.previ_获取子节点的路径 vue