一篇js的基础介绍送给你们，好好学习呦！❤❤_1.计算一个半径为80cm的圆的面积。打印到页面上。圆周率可以是 3.14-CSDN博客

本文链接：https://blog.csdn.net/weixin_41860983/article/details/109176037

开发工具

前端开发工具介绍

sublime text：收费的代码编辑器 ,打开速度快,效率高
Visual Studio Code（vs code）:微软开发的免费编辑器,集成终端效果好!
atom：github发布的代码编辑器
webstorm：誉为web前端开发神器, 但是合成的插件和配置太多,导致开启速度慢 , 适合初学者!
- 如果大家安装,安装 11 版本,不要下载最新的,部分电脑系统兼容问题很大!
HBuilder：国产的web开发工具

用什么工具不重要，目的都是为了写代码，用熟了都一样

vscode 安装插件使用

open in browser 打开默认浏览器,以虚拟主机的方式打开 ;
Path intellisense 自动提示路径 :
Chinese (Simplified) Language 中文简体包
view in browser 打开浏览器,以文件的形式打开

vscode 的其他用法

隐藏右边迷你预览图 => 查看 => 切换小视图
侧边栏左右切换 : =>查看 => 向右切换侧边栏
打开文件夹 : => 文件 => 打开文件夹
资源管理器中:新建文件 + 新建文件夹 + 刷新 + 全部折叠文件夹

vscode 常用快捷键

Ctrl + / : 注释
Alt+B : 快速开启浏览器
复制 : shift + alt + ↓
移动 : alt + ↓
格式化代码规范 : shift + alt + F
折叠侧边栏 : Ctrl + B
ctr + ` => 切换vscode终端
浏览器调出控制台

F12 打开控制台

mac双系统的 F12 = fn+F12

以前讲过的 :

Ctrl+N : 新建
Ctrl + C : 复制 ( 光标在这一行即可)
Ctrl + X : 剪切当前行
Ctrl+Z 撤销这一次操作
Ctrl+Shift+Z : 反撤销

为什么要学习javaScript

网页三部分：

HTML：控制网页的结构

CSS：控制网页的样式

JavaScript：控制网页的行为

不同于HTML和css，JavaScript是一门编程语言，因此要比HTML和css复杂一些，学习的时间也更长。
最初的javascript
- 用于判断客户端的输入（表单校验）
现在的JavaScript：现在的JS无所不能
- 异步与服务器交互（AJAX）
- 网页和特效（演示）
- 服务端开发（nodejs）
- 命令行工具开发（nodejs）
- 桌面程序（Electron）
- app开发（ReatNative）
- 控制硬件–物联网（Ruff）
- 游戏开发（cavans, cocos2d-js）
网页特效 :
- 美女相册
- Canvas游戏

JavaScript概述(了解)

发展诞生

1995年，Netscape(网景)公司的Brendan Eich(布兰登·艾奇)（伊利诺伊大学香槟分校），花了10天时间为Netscape Navigator2.0开发了一个位置为LiveScript的脚本程序，目的是在浏览器中执行预检测程序（表单校验）
后来Netscape在与Sun合作之后将其改名为JavaScript。目的是为了利用 Java 这个因特网时髦词汇。
微软发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）
三足鼎立阶段：
- CEnvi的scriptEase
- Netscape的JavaScript
- IE的JScript
标准化阶段：1997年，ECMA（欧洲计算机制造商协会）邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39，最终锤炼出来了ECMA-262，该标准定义了一门全新的脚本语言，名为ECMAScript。

JavaScript的组成(掌握)

三部分 ECMAScript、BOM、DOM

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YdItCFAj-1603160744745)(/1576394330618.png)]

ECMAScript - JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准,与具体实现无关
DOM：一套操作网页元素的API(方法)
BOM：一套操作浏览器功能的API(方法)

Js和H5的关系

HTML5是一种新的技术，就目前而言，我们所知的HTML5都是一些标签，但是有了JS之后，这些标签深层的扩展功能才得以实现。

JavaScript初体验

js使用方式(记忆)

可以有两种方式在HTML页面进行引入，一种是外联，一种是内部标签。

外联

 <script src="js文件路径"></script>

 这是一对html标签，原则上可以放在html页面的任意位置,src后链接的是JavaScript文件，文件的扩展名为.js，如index.js,在里面直接写js文件即可.
 
 <script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"> </script>
注意:一般是将js代码放到body最后,多以当执行到js代码时,html页面都已载入完成,避免找不到元素而报错.

例1: 引入demo.js文件,输出内容

alert('见过你的美,还能爱上谁');

注意:外联方式在写项目的时候,使用.

标签写法

直接写在html文件内

       <script type="text/javascript">
            //在script标签内写js脚本
        </script>
        
        简写:
        <script>
            //在script标签内写js脚本
        </script>  


        错误的写法：
        <script src="js文件路径">
            //在script标签内写js脚本
        </script>

注意要写在script标签之内

行内写法

   <a href="#" onclick="alert(666)"> 点我</a>

js的输出(记忆)

例1:在页面上输出’I have a dream’

document.write('I have a dream');

例2:输出’I have a dream’切加粗

  // 文本加粗输出
  document.write('<strong> I have a dream</strong>');

例3:控制台中的输出

console.log('I have a dream');
打开浏览器,按住F12键,即可召唤出控制台,后面js的效果调试都在这里
 console.error('错误信息');

例4:以弹出框的形式输出内容

alert(123);

例5: confirm 确认框

//confirm弹出一个确定框
confirm("我帅吗？");

javaScript的注释(掌握)

1、可以将暂时不需要执行的代码注释，就可以不允许，保留一些代码以备后用
2、注释可以用来解释代码的含义，每个人的代码，不管现在还是工作中都必须写
    学习期间  注释是代码的150%
    工作期间  注释是代码30%-50%
3、注释还可以用来记录个代码不同版本直接修缮问题

行注释 //

表识当前行的代码不注释,或者解释下一行代码的意思

块注释

/*代码块*/
多用来多行代码注释不执行,或者解释某一块代码的功能.

变量的概念及基本运算(掌握)

变量声明

语法格式

直接声明变量

//  var 来声明变量的
//  age : 变量名
//  结构 : var + 变量名 ; 
 var age;

先声明,后赋值

var name;  // 声明一个变量 name
name = '乘风破浪'; // 一个等号 是赋值,,后面的值赋值给前面的

同时声明+赋值

    var name = '峰哥好靓';
    var str  = "靓的飞起来";
    console.log(name,str);

同时声明多个变量并赋值

var age = 10,name= 'zs' 
// 相当于
var age = 10;
var name = 'zs';
 console.log(name,age);

不声明变量，直接赋值(不会报错，但是不推荐)

//  没有用 var 修饰的不管代码在哪里都是全局的
// 不推荐 
height=100;
console.log(height);

不声明变量，也不赋值变量，直接使用（会报错）

 //   weight is not defined 要知道是没有定义,,估计是变量名写错了
 console.log(heightt);

结论：

变量需要声明之后，才能使用，养成一个良好的编程习惯。
javascript代码一旦报错了，后面的代码就不再执行了。

变量命名规则

规则 : ( 必须遵守的,不遵守会报错 )
- 由字母、数字、下划线、$符号组成 ;
- 不能以数字开头
- 区分大小写
- 不能是关键字和保留字 (不用死记 , 慢慢就见多了)
```
  //关键字：对于js来说有特殊意义的一些单词
  //保留字：js保留了一些单词，这些单词现在不用，但是以后要用。
```
规范 : (建议遵守的不遵守不会报错)
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写!
  
  myName, userPassword

关键字(了解)

以下这些关键字用于执行特定操作等。按照规则，关键字也是语言保留的，不能用做标识符

break	do	instanceof	typeof
case	else	new	var
catch	finally	return	void
continue	for	switch	while
debugger*	function	this	with
default	if	throw	delete
in	try

保留字(了解)

未来可能做为关键字的存在


abstract	enum	int	short
boolean	export	interface	static
byte	extends	long	super
char	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	implements	protected	volatile
double	import	public

例1:以数字开头的变量

var a = 'I have a dream!';
console.log(a);
var 2a = 'Hello';
console.log(2a);

例2:以关键字开始的变量

<script>
var do = '测试';
console.log(do);
</script>

变量类型(记忆)

六种基本数据类型

1 变量中的数据时需要存储在计算机中的

2 计算机底层只能识别0和1,所以需要对不同类型的数据进行转.

3 转换的结果会导致所需空间不同，所以JS中分成多种数据类型，以方便计算机的存储。

基本数据类型

显著的特点：只能存放一个值

数据类型	描述	示例
数字型（number）简写：num	表示一个数字、可以是整数或者小数	如：1.1、5666、888
字符串型（string）简写str	用单引号或双引号引起来的一个字符串	如： “abc”, “张三”, “123”, “123.456”, “这是任意一句话”; 特性：会原样输出
布尔型（boolean）简写：bool	表示一个“真或假”的正负状态的值。这种类型只有两个值	如：true，false

复合数据类型

显著的特点：可以存放多个值

数据类型	描述	示例
数组（array) 简写：arr	用于存储多个值,后面单独讲	arr=[1,2], arr=[ 18,‘zs’ ]
对象（object）简写：obj	后面单独讲.	var obj = new Object(); // 创建一个空对象 { }

特殊类型

数据类型	描述	示例
空类型（null）	表示“空值”，或者说“没有值”	如：// 创建一个空类型 var name = “zs”; var name = null; console.log(name); var age=’ ';
未定义类型（undefined)	没有定义变量的值	如：var other;console.log(other);

数据类型的获取typeof()

typeof() 检测当前变量的数据类型的方法

例1: 分别检测a=1,b='1’的数据类型

  // 1 声明变量
  var a=1;
  var b='1';
  // 2 使用typeof进行检测
  console.log(typeof(a));
  console.log(typeof(b));

例2:检测a=true,b={}

<script>
  // 1 声明变量

  var d={};
  var f=true;
  // 2 使用typeof进行检测

  console.log(typeof(d));
  console.log(typeof(f));

</script>

运算符(掌握)

算术运算符

JS中的运算符

算术／赋值／关系／逻辑／字符串

    算术运算符：  +加法    -减法    *乘法    /除法    %取余

        var a = 1, b = 2;

        a + b = 3

        a - b = -1

        a * b = 2

        a / b = 0.5

        a % b = 1

目测，跟数学中的运算符是一样的。但是：

        var a = "1", b = "2";

        a * b = 2

        a / b = 0.5

        a - b = -1

        a + b = ???

+号，有两层意思.

第一层算数之间的加法；
第二层字符串的连接；执行过程中，先检测加号两边的数据类型，如果发现字符型，那就先 生效字符的连接

    数据类型转换：强制转换、隐式转换

例1:将I have a dream 和 I want to beauiful girl进行链接

    var str1 = 'I have a dream';
    var str2 = 'I want to betiful girl';
     var str3 = str1+str2;
    console.log(str3);

其实还是有点不一样：和我们概念中的逻辑运算符很多都是不一样的：

    比如：  =    ==    ===
    var num=2;   // number
     var num1 = '2';  // string
     console.log(num==num1);// 值相等,不判断类型  true
     console.log(num===num1)  // 值相等,类型不相等  false

赋值运算符：

= += -+ *= /+ %=

运算符	例子	等价于	运算结果
=	y = 6		y = 6
+=	y += 1	y = y+1	y = 7
-=	y -= 1	y = y-1	y = 5
*=	y *= 2	y = y*2	y = 12
/=	y /= 2	y = y/2	y = 3
%=	y %= 4	y = y%4	y = 2

关系运算符：

< <= > >= == != ===

运算符	说明	例子	运算结果
==	等于	2 == 3	false
===	恒等于（值和类型都要做比较）	2 === 2 2 === “2”	true false
!=	不等于，也可写作<>	2 != 3	true
>	大于	2 > 3	false
<	小于	2 < 3	true
>=	大于等于	2 >= 3	false
<=	小于等于	2 <= 3	true

脚下留心:

  语句结束要加分号，虽然不加分号在JS语法上没有什么问题，但是建议不要省略分号，加了分号之后可以使用软件压缩。

逻辑运算符

运算符	说明	例子	运算结果
&&	逻辑与（and）	x = 2;y = 6;x>5 && y>5	FALSE
\|\|	逻辑或（or）	x = 2;y = 6;x>5 \|\| y>5	TRUE
!	逻辑非，取逻辑的反面	x = 2;y = 6;!(x > y)	TRUE

例1: 使用逻辑运算符&&输出 x = 4;y = 8; x>5 && y>5

var x = 2;
var y = 6;
console.log(x>5 && y>5);
console.log(x>1 && y>1);
两边都要满足条件才能成立,返回true

例2: 使用 || 运算符

var x = 4;  var y = 8;
console.log(x>5 || y>5);
console.log(x<2 || y<2);
一边满足条件,即可成立,返回true

例3: 使用逻辑运算符! 输出 x = 2;y = 6;!(x > y)

  console.log(!(x>y));

一元运算符

自增(++)/自减(–)运算

a++表示在a原有的基础上增加1

相当于: a = a+1;

a–表示在a原有的基础上减小1

相当于: a = a-1;

例1:a=1;输出a++的值

      var a=1;
       a++;  // a= a+1
       console.log(a);

例2:b=2;输出b–的值

   var b=2;
       b--; // b=b-1
       console.log(b);

思考:++a和–a呢?

例3:a=1;输出++a的值

<script>
 var a=1;
  console.log(a++);
 console.log(a);
</script>

例4:a=2;输出–a的值

<script>
   var a=2;
   console.log(a--);
   console.log(a);
</script>

脚下留心

   前自增与后自增有本质的区别，他们相同点都是为自身加了1，
    不同点是
        前自增是先加1，再使用操作数的值
        后自增是先使用操作数的值，再加1

练习与应用

1.为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？

    var a = 89;
     // 取整
     var b = parseInt(a/24);
     // 取剩下的小时.
     var c = a%24;
   //   console.log(b);
     // console.log(c);
     //document.write(b);
     // 字符串连接
     document.write('一共'+b+'天'+c+'小时');

2.小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。

它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。

提示： 1摄氏度(℃)=33.8华氏度(℉) 。

应用

1．计算两个变量的和

2.掌握逻辑运算的意义

&& 两边都成立,才为true

|| 一边成立就为true

! 取反

各人练习

1.计算一个半径为80cm的圆的面积。打印到页面上。

2.var k=10; console.log(k++ + ++k +k +k++);

提高题:计算两个文本框的加减乘除

1 获取文本框的值 .value
2 检验值是否合格
3 判断进行的是+-*%那个运算
4 使用switch进行计算

是先使用操作数的值，再加1


练习与应用

1.为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？

var a = 89;
 // 取整
 var b = parseInt(a/24);
 // 取剩下的小时.
 var c = a%24;




2.小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。

它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。

提示： 1摄氏度(℃)=33.8华氏度(℉) 。







 应用

1．计算两个变量的和



2.掌握逻辑运算的意义

&&  两边都成立,才为true

|| 一边成立就为true

!   取反



 作业

1.计算一个半径为80cm的圆的面积。打印到页面上。

  

2.var k=10;  console.log(k++ + ++k +k +k++);





提高题:计算两个文本框的加减乘除

1 获取文本框的值 .value
2 检验值是否合格
3 判断进行的是±*%那个运算
4 使用switch进行计算