JS基础知识

最新推荐文章于 2022-11-23 17:32:46 发布
最新推荐文章于 2022-11-23 17:32:46 发布
阅读量191 收藏 1
点赞数
分类专栏： Web前端 文章标签： 基础知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/honeygirl_/article/details/102960830
版权

1、JS概述

  • 1、什么是JS

JS是一种运行于JS解释器/引擎中的解释型脚本语言
编译型语言：程序在运行前会进行编译
解释型语言：运行之前不会编译，直接执行，出错则停止

JS解释器/引擎：是JS脚本的运行环境
1、浏览器 Console 中直接输入脚本
2、将JS嵌入在HTML页面中执行
1、元素事件中
< ANY οnclick="">
console.log(“输出的内容”);
2、< script>< /script>元素中
< script>
document.write(“输出在页面的内容”);
注意：该内容是被内容排版引擎解析
< /script>
3、外部脚本文件
1、创建 .js 文件
2、引入js文件
< script src=“xxx.js”>< /script>
window.alert("");
alert("");
1、独立安装的JS解释器
2、嵌入在浏览器内核中的JS解释器

  • 2、JS的发展史

     1、1992年 Nombas 为自己的软件开发了一款脚本语言C Minus Minus(C--)后更名为 ScriptEase,可以嵌入在网页中。
 2、1995年 Netscape为自己的Navigator2.0 开发了另一种客户端脚本语言-LiveScript,为了借助Java势头，所以更名为 Javascript
 3、1996年Microsoft为了进军浏览器市场，在IE3.0 中 发布了Javascript的克隆版，称为JScript
 4、1997年，Javascript1.1作为草案提交给了ECMA(欧洲计算机制造商联合会),Javascript的核心 被更名成 ECMAScript

  • 完整的JS语言是由三部分组成：

     	1、核心(ECMAScript)
 	2、文档对象模型(DOM)
 		Document Object Model
 		让JS有能力与页面进行对话(操作页面内容)
 	3、浏览器对象模型(BOM)
 		Browser Object Mode
 		让JS有能力与浏览器进行对话(操作浏览器)

2、JS调试(重要)

console -> consloe
console -> Console
console.log("");–>
console.log（“”）；

  • 1、代码错误

     	解释型语言，若某行代码出现错误，解释器则终止此次执行。但不会影响后续块和后续的HTML执行

 	<script></script>

  • 2、语法

    1、编写JS代码
    1、语句-会被JS解释器所执行的代码
    console.log();
    document.write();

    由表达式、关键字、运算符组成，大小写敏感，由分号或换行表示结束
    2、注释-不会被JS解释器所执行的内容
    单行注释：//
    多行注释：/* */

3、变量和常量(重点)

  • 1、什么是变量
    变量：内存中的一段存储空间,目的是为了临时的保存数据。
    值：保存在变量(内存空间)中的数据
    变量名：内存空间的别名，可以自定义

  • 2、变量的声明

    1、语法：
    1、声明变量
    var 变量名;
    2、为变量赋值
    变量名=值;
    注意：
    声明时可以省略var关键字，省略之后变量就成了"全局变量"，推荐不要省略var关键字
    ex:声明一个变量叫 age，保存数据 18
    var age;
    age=18;
    3、声明变量并直接赋值
    var 变量名=值;
    ex: var age=18;
    4、在一条语句中声明多个变量
    声明变量age1的值为18，age2的值为36，age3的值为50
    var age1=18;
    var age2=36;
    var age3=50;

    语法：
    var 变量名1,变量名2=值,…;

  • 3、变量名命名规范

     	1、不允许使用JS关键字及保留关键字
 	2、可以包含字母、数字、下划线(_)以及$
 		var %name;//错误，不允许出现%
 	3、变量名不能以数字开头
 		var 1=2; //错误，不能以数字开始
 		var 1name;//错误
 	4、变量名最好见名知意
 		var a,b,c,d,e,f,g;
 		var aa,ab,ac;
 		//以上方式不推荐
 		var stuName,stuAge;
 		var xymc;
 	5、可以采用"匈牙利命名法","驼峰命名法","下划线命名法"
 		驼峰命名法：
 			如果变量名由一个单词组成，全小写
 			如果变量名由多个单词组合而成，第一个单词全小写，从第二个单词开始，每个单词的首字母变大写
 		ex:
 			var age=15;
 			var stuAge;

  • 4、变量的使用

    1、未经初始化的变量
    声明了变量，但是没有被赋过值，值默认为 undefined(未定义)

    var userName;//定义变量，但未赋值
    console.log(userName);//undefined

    小习惯：
    声明变量时，字符串的话可以设置默认值为""，如果是数字的话，可以设置默认值为 0
    2、变量未被定义过，而被直接使用
    console.log(userName);
    语法错误!
    3、对变量值进行的存、取操作
    1、对变量进行存值操作-SET操作
    运算符：=(赋值运算符)
    如果变量名出现在 = 的左边，就是赋值操作
    例子:

    var userName;
					userName="三丰.张";

	var userAge=28;
					userAge=29;

2、对变量进行取值操作-GET操作
只要变量名称没有出现在=的左边，那么就都是取值操作。
var stuName=“张三丰”;//为stuName赋值
console.log(stuName);//取值

var newName=stuName;
			以上操作，对于stuName，是取值操作
			对于newName，是存值操作

document.write(stuName);
			window.alert(stuName);

var num1 = 10;
			var num2 = 20;
			var sum = num1 + num2;

  • 5、运算符-算术运算符

    +,-,*,/,%(模)
    % : 取余数
    5%2=1
    6%2=0
    适用场合：
    1、判断奇偶性和倍数
    ex:15 是 3 的倍数吗 ？
    15%3=0 ：余数为0，所以15是3的倍数
    25%50 = 25
    2、获取某数字的最后几位
    ex:想获取1234的最后一位数字
    1234%10 : 获取最后一位
    1234%100 : 获取最后2位
    + :
    1、数字运算
    如果 + 两边的数据 都是数字类型，则进行的就是 加法操作
    var num1 = 15;
    var num2 = 18;
    var sum=num1+num2;

    2、字符连接
    如果 +两边有一个是字符串的话，则进行的就是 字符连接 操作如下

     		var stuName="三丰.张";
 		var stuAge=18;
 		var result=stuName+stuAge;//三丰.张18

 		var num1 = "15";//字符串而非数字
 		var num2 = "18";//字符串而非数字
 		var sum = num1+num2;

 		var num1 = 15;
 		var num2 = 18;
 		var str = "Hello";
 		//var result=num1+num2+str;//33Hello
 		var result=str+num1+num2;//Hello1518

  • 6、常量的声明和使用

    1、什么是常量
    在程序中，一旦声明，在运行过程中就不允许被修改的数据，称之为常量

    2、语法
    const 常量名=值;
    注意：常量名一般采用全大写的模式

  • 7、数据类型

1、什么是数据类型
保存在内存中的数据的类型，数据类型决定了数据在内存中占据多大的空间
2、数据类型分类
1、基本数据类型
1、number类型
数字类型：可以表示32位(即4字节)的整数，也可以表示64位(即8字节)的浮点数(小数)

整数：
十进制：逢10进1
八进制：逢8进1
以0作为开始的数字都是八进制数字
var num = 010;
十六进制：逢16进1
0-9,A-F
以0x作为开始的数字都是十六进制
小数：
使用小数点记录数据：12.34
使用指数记录数据：3.14e10
2、string类型
字符串类型：可以表示一系列的文本字符数据
由Unicode字符、数字、标点符号组成

查看字符的Unicode编码
字符.charCodeAt();
字符 “张”，在内存中的存储形式 :0101111100100000
要求：字符串使用过程中，必须用""或’'引起来
var num1 = 1000; //数字
var num2 = 1000;
num+num2 : 2000
var str1 = “1000”;//字符串
var str2 = “1000”;
str1+str2 : 10001000
转义字符:
\n : 换行
\r : 回车(非换行，接收指令)
\t : 制表符
’ : ’
" : "
\ :
3、boolean类型
布尔类型：来表示结果的真或假，肯定或否定
该类型仅有两个值：
true 表示真(肯定)
false 表示假(否定)
ex:
var isBig = true;
var isSmall = false;
在实际运算中，true可以当成1做运算，false可以当成0做运算
4、undefined
语义：访问的数据不存在
产生undefined的场合：
1、声明变量未赋值
2、访问的对象的属性不存在

4、数据类型转换

1、弱类型
由数据来决定数据类型
var num;//undefined
num=12;//number
num=“你好”;//string
num=false;//boolean
强数据类型：由数据类型来决定数据

1 、typeof() 函数
作用：获取指定数据的数据类型
语法：
typeof(变量) 或者 typeof 变量;
使用：
var result = typeof(变量);
2、隐式转换
不同类型的数据在计算过程中会自动进行转换
特点：
任何一种数据类型的数据，再与string做“+”运算时，都会转换成 string，再做连接
NaN : Not a Number , 不是一个数字

函数：isNaN(数据)
作用：判断数据是否为 非数字类型(只判断数值，与类型无关) ，如果是非数字，返回true，是数字返回false

问题：将字符串25转换为 数字25，再做加法运算
3、强制转换(显示转换)
由JS提供的一组转换函数来完成数据类型的转换
1、toString()
转换成字符串，任一数据类型的数据均可转换为string类型
语法：数据(变量).toString()
2、parseInt(数据)
将数据转换为number类型(整数)
碰到第一个非整数字符，则停止转换
如果无法转换时，转换的结果为NaN
3、parseFloat(数据)
将数据转换为number类型(小数)
碰到第一个非小数点或数字字符，则停止换换
4、Number(数据)
将一个数据解析为number类型
注意：如果数据中包含非法字符，则返回NaN

2、运算符和表达式
1、运算符
做数据的运算
2、表达式
由运算符和操作数所组成的式子，称之为表达式
var a = 5;//赋值表达式
var b = 10;//赋值表达式
a+b;//算术表达式

3、运算符分类
1、算术运算符
+,-,*,/,%

++(自增)，–(自减)
++：在自己值的基础上做加1操作
–：在自己值的基础上做减1操作

var num=5;
num++; 作为后缀，先去使用变量的值，然后对其进行自增操作
++num; 作为前缀，先对变量进行自增操作，然后再使用变量的值

优先级：
先*，/，%，再+，-
想提升优先级：()

2、关系运算符
1、运算符
>,<,>=,<=,==(判断等于),!=

= = =(全等),!==(不全等)

= = = 与 = =的区别:
1、= =
只判断数值，不判断类型
“35”= =35 结果为 true
2、= = =
判断 类型以及数值 是否都相等
“35”===35 结果为 false

2、特殊注意
1、字符串 和 数字比较大小关系时
先将字符串通过Number()转换成数字再进行比较
2、字符串 和 字符串比较大小关系时
实际上是比较每位字符的Unicode码
张三丰
张无忌
3、NaN参与关系比较时，结果一律为 false
3、isNaN 函数
判断一个数据是否为非数字
isNaN()
3、逻辑运算符
1、作用
多条件之间的判断关系
2、逻辑运算符
逻辑非 : !
逻辑与 : &&
逻辑或 : ||

逻辑与：
判断两个条件，如果两个条件的值都为true的话，整个表达式的结果为true，如果有一个条件的结果为false，整个表达式的结果就为 false

逻辑或：
判断两个条件，两个条件中，有一个条件为true，那么整个 逻辑或 的结果就为 true，否则为 false(两个结果同时为false时)

逻辑非：
对现有条件结果进行取反
非真即假
非假即真

3、短路逻辑
1、&&(短路与)
如果第一个表达式的结果为false，那么第二个表达式就不用再判断，整个表达式的结果为 false
如果第一个表达式的结果为true的话，则继续判断第二个表达式的结果，并且以第二个表达式的执行结果作为整个逻辑表达式的结果。
2、||(短路或)
如果第一个表达式的结果为true的话，那么就不在继续执行第二个表达式，并且将 true作为整个逻辑表达式的结果。
如果第一个表达式的结果为false的话，则继续执行第二个表达式，并且将第二个表达式的计算结果作为逻辑表达式的结果
4、位运算
1、特点
1、做数字运算
2、将数字转换为二进制，再进行运算
2、运算符
1、&
按位 与,将两边的操作数转换成二进制，每位的数字，只有对应都为1的时候，该位的结果才为1，否则该位的结果就是0

2、|
按位或，两边的操作数转换成二进制，比较每位上的数字，两个数中有1个是1的话，该位的结果为1，否则为0
场合：向下求整
求：5 | 3
5:101
3:011
=========
111
6.5 | 0
==>
6 | 0
6:110
0:000
3、<<
按位左移，将2进制数向左移动几位，后面以0补齐
ex:
2<<1 : 4
2<<2 : 8
2<<3 : 16

0000 0000 0000 0000
0000 0000 0001 0000
4、>>
按位右移，将2进制数向右移动几位，前面补0
8>>1 : 4
0000 0000 0000 0000
0000 0000 0000 0100
8>>2 : 2
8>>3 : 1
8>>4 : 0

冯晓如
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js基础知识js的简介
12-06
1、js的简介JavaScript 是⼀种客户端脚本语⾔（脚本语⾔是⼀种轻量级的编程语⾔，语法和java类似。JavaScript 通常被直接嵌⼊ HTML ⻚⾯，由浏览器解释执⾏JavaScript 是⼀种解释性语⾔（就是说，代码执⾏不进⾏预...
js常见错误,调试
梧桐落叶~~
05-26 332
文章目录错误分类错误类型常见错误分析调试方法此次案例代码 错误分类 代码错误：这种错误浏览器会报错，可以根据错误类型去排错 逻辑错误：这种错误浏览器不会报错，但是可以使用断点进行调试排错 错误类型 Uncaught Syntaxerror 语法错误：编写的代码不符合js编码规则 Uncaught ReferenceError 引用错误：使用了没有定义的变量 Uncaught TypeError 类型错误：提供的类型，不是JS所需要的 Uncaught RangeError 范围错误：指定的范围
js中的 逻辑运算符返回值问题详解
ShawnRogers的博客
10-28 250
原文： js中的 || 与 && 逻辑运算符返回值问题详解_مطر的博客-CSDN博客
JS用法
aiyanfa0733的博客
09-27 623
JS JavaScript是一种运行于JavaScript解释器/引擎中的解释性脚本语言。 JS基本语法 运行环境 ： 1，独立安装的JS解释器（NodeJS） 2，嵌入在【浏览器】内核中JS解释器 解释型：运行前是不需要编译的，运行之前不会检查错误，直到碰到错误为止。 编译型：对源码进行编译，还能检查语法错误（C/...
Javascript 基础知识学习
岳来的博客
11-23 5750
javascript 基础学习
javascript基础知识
10-22
本文主要介绍javascript一些基础知识，比较实用，希望能给大家做一个参考。
javascript基础知识讲解
10-20
本篇适合javascript新手或者学了前端一段时间，对js概念不清晰的同学。本文将讲述几点对于初学者遇到的javascript的坑，相信对javascript基础薄弱的同学，可以加深对javascript的理解
javascript基础知识整理
10-29
对于刚开始学习js的朋友，非常有帮助，主要知识点都已经整理好了。
利用html简单自我介绍案例
热门推荐
honeygirl_的博客
10-27 3万+
案例实战： 在网页标题栏中显示“自我介绍”文本信息 以一级标题的形式显示“自我介绍”文本信息 以定义列表下面以图像的形式插入个人的头像 以段落文本形式显示个人简历 <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html...
正则表达式中的特殊字符
honeygirl_的博客
11-24 1万+
正则表达式中的特殊字符 组成 一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。 特殊字符非常多，可以参考： MDN jQuery 手册：正则表达式部分 边界符 正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符 边界符 说明...
CSS美化超链接样式
honeygirl_的博客
10-30 8957
美化超链接样式 一、使用动态伪类 注意！！！超链接的四种状态样式的排列是固定的，一般不能随意调换 正确的顺序时Link，visited,hover,active 当鼠标经过超链接是，会先执行第一行声明， 但是紧接着第三行声明会覆盖掉第一行和第二行声明的样式， 所以无法看到鼠标经过和被激活时的效果 <style type="text/css"> a:link{color: red;} ...
CSS伸缩布局
honeygirl_的博客
11-04 1595
CSS伸缩布局 CSS flex 是一种伸缩布局，之前块级元素布局在同一行，可以通过display或position或float来实现，而flex 为和模型布局提供了极大地灵活性，所谓弹性布局即可根据大小判定自动伸缩。 flex相关属性如下： 1、display：flex；在父盒子定义flex，子盒子才能使用flex属性 2、flex：none |flex-grow flex-shrink f...
HTML复杂表单制作
honeygirl_的博客
10-31 1533
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> <h1>修改个人性息</h1> <form> ...
JS——操作CSS样式
honeygirl_的博客
11-09 1407
页面往往是动态变化的，我们经常需要在脚本里对元素的样式进行操作，刚学习js的时候大家都知道通过style属性设置css样式相关的属性，但有时候也想先获取样式，结果发现通过style取到的值是空，这就需要我们对这些概念足够熟练。 一、访问行内样式： css样式包括三种： 外部样式、内部样式、行内样式。 这个style对象包含通过HTML的style属性设置的所有CSS样式信息，但不包含祥式表中的...
HTML5设计网站结构简单设计
honeygirl_的博客
10-28 1234
一、构建网页标题 <header id="bloghead"> <div id="blogTitle"> <h1 id="blogname">HTML5+CSS3+JavaScript入门到精通</h1> <div id="bloglink">http://mysite.com/index.html...
CSS排版网页
honeygirl_的博客
11-03 1188
CSS盒模型 盒模型是CSS布局的核心概念。 认识display： 使用CSS的display属性可以改变元素的显示类型，代码如下： display: 属性值如下: none:隐藏对象 inline：对象为内联元素，可以并列显示。 block：对象为块元素 ，适合搭建文档框架。 inline-block：对象为内联块元素 认识CSS盒模型： CSS盒模型定义了网页对象的基本显示结构。每个元素都显示...
CSS美化图像按钮及表格
honeygirl_的博客
11-01 999
一、设计图形按钮链接 使用css的background-image属性实现。 代码如下： <style type="text/css"> a.reg{ background: transparent url('ps做好的背景图') no-repeat top left; display: block; width: 74px; height: 25px ...
JS——简单实现Ajax步骤
honeygirl_的博客
11-11 940
Ajax（Asynchronous JavaScript + XML）使得浏览器可以额外地向服务器请求数据而不用重新刷新页面，ajax从服务器或许到数据后，可用javascript操作DOM以改变页面。 定义XMLHttpRequest 实现ajax的核心是XMLHttpRequest对象，其使用主要是open()、send()等函数。 实现异步通信一班需要以下四步： 第一步：定义对象 第二步：调...
JavaScript基础知识
最新发布
08-02
回答: JavaScript是一门最流行的运行在浏览器的脚本...JavaScript可以通过行内样式、嵌入样式和外部样式来书写，可以写在HTML标签的行内，也可以写在script标签中，还可以写在外部的js文件中并在页面中引入。[1][2][3]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值