JS-DAY01

目录

1.Javascript是什么？

2.JavaScript 的作用

3.HTML/CSS/JS 的关系

4.浏览器执行 JS 简介

5.JS的组成

6.体验JS

（1）行内式JS（在body直接写入）

（2）内嵌JS（在head引入stype写JS）

（3）外部JS（在head引入JS文件）

7.JS注释

8.JS输入输出语句

9.变量

10.JS数据类型

---

---

1.Javascript是什么？

• 布兰登·艾奇（Brendan Eich，1961年～）。
• 神奇的大哥用10天完成 JavaScript 设计。
• 最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。
• JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）
• 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
• 现在也可以基于 Node.js 技术进行服务器端编程

  ---

  2.JavaScript 的作用

• 表单动态校验（密码强度检测）  （ JS 产生最初的目的 ）
• 网页特效
• 服务端开发(Node.js)
• 桌面程序(Electron)
• App(Cordova)
• 控制硬件-物联网(Ruff)
• 游戏开发(cocos2d-js)

  ---

  3.HTML/CSS/JS 的关系

(1)HTML/CSS 标记语言--描述类语言

 (2)JS 脚本语言--编程类语言

---

4.浏览器执行 JS 简介

渲染引擎（内核）：解析HTML和CSS。

JS引擎（JS解释器）：读取网页中的JavaScript代码，并处理和运行。工作时，先逐行解释成源码，再交给计算机执行。

---

5.JS的组成

ECMAScripts（JavaScript语法）：JavaScript【网景公司】、Jscript【微软公司】。规定JS编程语法和基础核心知识，所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM（文档对象模型）：W3C组织推荐的处理可扩展标记语言的标准编程接口。通过BOM提供的接口可以对页面的各种元素进行操作。

BOM（浏览器对象模型）：指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口。

6.体验JS

（1）行内式JS（在body直接写入）

• 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如: onclick
• 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
• 可读性差，在html中编写JS大量代码时，不方便阅读;
• 引号易错，引号多层嵌套匹配时，非常容易弄混;
• 特殊情况下使用

<input type="button" value="唐伯虎" onclick="alert('秋香姐')">

（2）内嵌JS（在head引入stype写JS）

• 可以将多行JS代码写到<script>标签中
• 内嵌JS是学习时常用的方式
   

<script>
    alert('沙漠骆驼');
</script>

（3）外部JS（在head引入JS文件）

• 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
• 引用外部JS文件的script标签中间不可以写代码
• 适合于JS代码量比较大的情况
   

<script src="my.js"></script>

alert('如果我是DJ，你还爱我吗？')

---

7.JS注释

单行注释：“//” 【ctrl+/】

多行注释：“/* */”【shift+alt+a】

---

8.JS输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

<script>
        prompt('请输入您的年龄');
      
        alert('计算的结果是');
  
        console.log('我是程序员能看到的');
</script>

---

9.变量

本质:变量是程序在内存中申请的一块用来存放数据的空间。

使用：使用前应该先“声明变量”再“赋值”。

<script>
    var age;
    age = 10;
    console.log(age);
    //变量初始化
    var name = 'pink老师';
    console.log(name);
</script>

• var是一个JS关键字，用来声明变呈( variable变量的意思)。使用该关键字声明变呈后，计算机会自动为变量分配内存空间，不需要程序员管
   
• age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
• = 用来把右边的值赋给左边的变量空问中此处代表赋值的意思
• 变量值是程序员保存到变量空间里的值

 声明多个变量：

var age = 18,
    address = '火影村',
    gz = 2000;

只声明不赋值：undefined

不声明 不赋值 直接使用某个变量会报错

不声明直接赋值使用（全局变量）：
qq = 110;
console.log(qq);

命名规范：

• 由字母(A-Za-z)、数字(O-9)、下划线(_)、美元符号($ )组成，如: usrAge, num01，_name严格区分大小写。var app;和var App;是两个变呈
• 不能以数字开头。18age整错误的
• 不能是关键字、保留字。例如: var、for、while
• 变量名必须有意义。
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
• 推荐翻译网站:有道、爱词霸

  ---

  10.JS数据类型

• 变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
• JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
• 在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
   
• JavaScript拥有动态类型，同时也意味着相同的变呈可用作不同的类型

    <script>
          // int num = 10;  java 
  
          // var num; // 这里的num 我们是不确定属于哪种数据类型的
  
          var num = 10; // num 属于数字型 
  
  
          var str = 'pink'; // str 字符串型
  
       
          var x = 10; // x 是数字型 
  
          x = 'pink'; // x 字符串型
      </script>

（1）简单数据据类型

数据类型	说明	默认值
Number	数字型，包含整型值和浮点值	0
Boolean	布尔类型	false
String	字符串型,JS里面使用字符串要引号(推荐单引号)	""
Undefined	var a;	undefined
Null	var a=null;	null

 1. 八进制  0 ~ 7  我们程序里面数字前面加0 表示八进制

2. 十六进制  0 ~ 9  a ~ f    #ffffff  数字的前面加 0x 表示十六进制

数字型的最大值

console.log(Number.MAX_VALUE);

  

数字型的最小值

console.log(Number.MIN_VALUE);

  

无穷大

console.log(Number.MAX_VALUE * 2);

  

无穷小

console.log(-Number.MAX_VALUE * 2);

  

非数字（No a Number）

console.log('pink老师' - 100);

 isNaN() 这个方法用来判断非数字   并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是true

    <script>
        console.log(isNaN(12)); // false

        console.log(isNaN('pink老师')); // true
    </script>

  

---

（2）字符串型

       引号内的都是字符串型数据

  JS可以用单引号嵌套双引号，或者用双引号嵌套单引号，推荐使用单引号(外双内单，外单内双）

    <script>
        var str = '我是一个"高富帅"的程序员';
        console.log(str);
        // 字符串转义字符  都是用 \ 开头 但是这些转义字符写道引号里面
        var str1 = "我是一个'高富帅'的\n程序员";
        console.log(str1);
    </script>

字符串转义字符

转义符	解释说明
\n	换行符
\\	斜杠\
\'	’单引号
\"	“双引号
\t	tab缩进
\b	空格

---

小技巧：

检测字符串长度【length】

var str = 'my name is andy';
console.log(str.length);//15

字符串拼接【+】

数值相加，字符、变量 相连。

console.log('沙漠'+'骆驼')；//沙漠骆驼

console.log(12+12);//24

console.log('12'+12)；//'1212'

var age = 10;
console.log(age+'岁');//10岁

 获取变量类型【typeof】

var num = 10;

console.log(typeof num); // numbervar str = 'pink ';

console.log(typeof str); 1/ stringvar flag = true;

console.log(typeof flag); 1/ booleanvar vari = undefined;

console.log(typeof vari); // undefinedvar timer = null;

console.log(typeof timer); l/ object I

 颜色判断类型

console.log(18);

console.log('18');

console.log(true);

console.log(undefined);

console.log(nul1);

  

---

（3）布尔型

var flag = true; // flag布尔型

var flag1 = false; // flag1布尔型

console.log(flag + 1); // true参与加法运算当1来看

console.log(flag1 + 1); // false参与加法运算当0来看

//如果一个变量声明未赋值就是undefined 未定义数据类型var str;


var str;

console.log(str);

var variable = undefined;

console.log(variable + 'pink "); // undefinedpink

console.log(variable + 1); // NaN undefined 和数字相加最后的结果是NaN


/ / null空值
var space = null;

console.log(space + 'pink"); // nullpink

console.log(space +1); // 1

---

11.数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换:

• 转换为字符串类型
• 转换为数字型
• 转换为布尔型

（1）转换为字符串类型

方式	说明	案例
toString()	转成字符串	var num= 1; alert(num.toStringO));
String()强制转换	转成字将串	var num = 1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1; alert(num+"我是字符串"");

//1．把数字型转换为字符串型  变量 .tostring()

var num = 10;

var str = num.toString();

console.log(str);//'10'
console.log(typeof str);//str

// 2．我们利用String(变量)

console.log(String(num));//'10'

// 3．利用＋拼接字符串的方法实现转换效果

console.log(num+' ');10

（2）转换为数字型(重点)

方式	说明	案例
parselnt(string)函数	将string类型转成整数数值型	parselnt(78')
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat('78.21')
Number()强制转换函数	将string类型转换为数值型	Number("12")
js 隐式转换( - * / )	利用算术运算隐式转换为数值型	'12'-0

注意：parselnt、parseFloat、Number的大小写字母。

// 1. parseInt(变量)可以把字符型的转换为数字型得到是整数

console.log(parseInt( "3.14'));// 3取整

console.log(parseInt( "3.94'));// 3取整

console.log(parseInt( ' 120px '));// 120会去到这个px单位

console.log(parseInt( " rem120px")); / / NaN


// 2. parseFloat(变量)可以把字符型的转换为数字型得到是小数浮点数

console.log(parseFloat( "3.14'));/风

console.log(parseFloat( ' 120px ')); i/ 120会去到这个px单位

console.log(parseFloat( 'rem120px"));// NaN



// 3．利用Number(变量)var str = '123 ';

console.log(Number(str));

console.log(Number( '12"));


//4．利用了算数运算-*/隐式转换

console.log( '12' - ); // 12

console.log( '123' - '120');//3

console.log( '123'* 1);//123

（3）转换为布尔型

 

方式	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean('true');

• 代表空、否定的值会被转换为false ，如""、0、NaN、 null、undefined
• 其余值都会被转换为true

console.log ( Boolean( " ' ), ;// false
console.log ( Boolean (0 ) ;// false
console . log (Boolean(NaN) ) ; // false
console.log ( Boolean (nu11), ; // false
console.log ( Boolean (undefined ) ; // false
console.log (Boolean ( "小白')); // true
console.log (Boolean (12)); // true

---

练习：用户调查

	<script type="text/javascript">
		alert('接下来要对您进行用户调查，以下信息仅仅用于数据统计！');
		var name,sex;
		name=prompt('请输入您的姓名：');
		sex=prompt('请输入您的性别：');
		age=prompt('请输入您的年龄：');
		alert(
			'谢谢配合，您的信息如下：'
			+'\n'+'\n'
			+'姓名：'+name+'\n'+'\n'
			+'性别：'+sex+'\n'+'\n'
			+'年龄：'+age
		);
	</script>