有一个文本文件。需要读取出来，自动拼接成一个 JavaScript 语句： console.table

在没有 Collectors.joining 之前，我们总是无法优雅地处理 开头 和 结尾 。现在就舒服多了。

// 文件路径
String in="E:\\temp\\test\\in\\in.txt";
Path path=Paths.get(in);
// 从字符输入流中读取文本
BufferedReader bufferedReader=Files.newBufferedReader(path);
// Java8 的新方法 lines() 获流
Stream<String> stream=bufferedReader.lines();
// 定义分隔符、前缀、后缀 （加了换行方便看）
String delimiter="',\n'";
String prefix="console.table([\n'";
String suffix="']);";
// 拼接字符串
String str=stream.collect(Collectors.joining(delimiter, prefix , suffix));
// 输出看效果
System.out.println(str);

输出 JavaScript：

console.table([
'花开无鑫人有泪',
'相期别时更易醉',
'抚花还问花开处',
'把酒却是罢酒徒',
'饰新观，做新娘',
'抱上他人床',
'红烛泪落做哭状',
'燃尽相思郎',
'天一方，海一方',
'相连似在天尽处',
'相隔又在海尽旁',
'为尔做情郎']);

F12 打开调试窗口测试一下：

#文者伤心##原创##诗词##java##javascript#

avaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

• 作用: 负责给页面添加动态效果语言
• 特点:属于脚本语言(不需要编译直接由浏览器解析执行)
• 基于面向对象
• 属于弱类型语言

//java: 
String name="tom"; int age=18; int x; x="abc";
//JS: 
let name="tom"; let age=18; let x; x="abc"; age="xyz"

• 安全性强: JS语言只能访问浏览器内部的数据,浏览器以外电脑上的数据禁止访问.
• 交互性强: 因为JS语言是嵌入到html页面中最终执行在客户端的语言 可以和用户直接进行交互, 而像Java语言是运行在服务器的语言和用户交互需要借助于网络,所有交互性JS语言会更强一些

如何在HTML页面中添加JS语言

三种引入方式:

• 内联: 在标签的事件属性中添加js代码,当事件触发时执行. ①事件: 是系统提供的一系列时间点. ②点击事件: 当点击元素时触发的时间点
• 内部: 在html页面中的任意位置(推荐写在/body上面)添加script标签,标签体内写js代码
• 外部: 在单独的js文件中写js代码, 然后在html页面中通过script标签的src属性引入到html页面

<!--onclick点击事件   alert()弹出提示框   方式一 -->
<input type="button" value="按钮" onclick="alert('按钮点击了!')">

<!--内部引入JS  方式二 -->
<script>
    /*在浏览器的控制台输出*/
    console.log("内部引入成功!");
</script>
<!--引入外部js文件 如果script标签引入了外部js文件 则不能在标签体内写js代码-->
<script src="my.js"></script>

浏览器终端 Console 窗口调试 JavaScript 代码

变量

• JS属于弱类型语言
• let和var关键字的区别, 作用域有区别 let：局部作用域 var：全局作用域
• 使用let声明的变量,作用域和Java语言的作用域类似
• 使用var声明的变量,不管在什么位置声明 都相当于是一个全局变量
• const 关键字来定义一个常量

java:
for(int i=0;i<10;i++){
  int y=i+1;
}
// int z=i+y; 报错 i和y超出了自身的作用域
JS:
for(let i=0;i<10;i++){ 
  let y=i+1;
}
let z=i+y;  
//不报错,但是访问不到i和y 因为超出了作用域
for(var i=0;i<10;i++){ 
  var y=i+1;
}
var z=i+y;  
//不仅不报错还能够访问到i和y的值  

数据类型

• JavaScript中只有对象类型
• 常见的对象类型包括:

1. 字符串: string 可以用单引号或双引号修饰
2. 数值: number 相当于Java中所有数值类型的综合
3. 布尔值: boolean true和false
4. 未定义: undefined 当变量只声明不赋值时属于未定义
5. 对象(Object)、
6. 数组(Array)、
7. 函数(Function)
8. 正则（RegExp）--特殊的对象：
9. 日期（Date）--特殊的对象：

• 获取变量类型的方法 typeof 变量;

typeof "John"    // 返回 string
typeof 3.14        // 返回 number
typeof false        // 返回 boolean
typeof [1,2,3,4]      // 返回 object
typeof {name:'John', age:34} // 返回 object
//注意 null  返回时 object
typeof undefined     // undefined
typeof null            // object
null===undefined    // false
null==undefined      // true

运算符

算数运算符: + - * / % , JS中的除法会根据结果自动转换整数或小数

//Java:
int x=5 ; int y=2; x/y=2;
//JS :
let x=5; let y=2; x/y=2.5; x=6 x/y=3;

• 关系运算符: > < >=<=!===和===
• ==: 先统一两个变量的类型 再比较值"666"==666 true
• ===:先比较类型,类型相同后再比较值 "666"===666 false
• 逻辑运算符: && || !
• 赋值运算符: =+=-=*=/=%=++ --
• 三目运算符: 条件?值1:值2

各种语句:

if else

//语法
if (condition)
{
    当条件为 true 时执行的代码
}
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

for

//语法：
for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}
//语句 1 （代码块）开始前执行
//语句 2 定义运行循环（代码块）的条件
//语句 3 在循环（代码块）已被执行之后执行
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

while

do while

while (条件)
{
    需要执行的代码
}
//语法  do while 至少执行一次
do
{
    需要执行的代码
}
while (条件);

switch case

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

方法

// java: 写法 
public 返回值类型 方法名(参数列表){方法体}
//JS:  写法
function 方法名(参数列表){方法体}

常见的四种方法:

1. 无参无返回值
2. 有参无返回值
3. 无参有返回值
4. 有参有返回值

三种声明方法的格式:

1. function 方法名(参数列表){方法体}
2. let 方法名=function (参数列表){方法体}
3. let 方法名=new Function("参数1","参数2","方法体");

<input type="button" value="按钮" onclick="f1()">
<script>
    //1. 无参无返回值
    function f1() {
        console.log("f1");
    }
    //调用
    f1();
    //2. 有参无返回值
    function f2(name,age) {
        console.log(name+":"+age);
    }
    f2("孙尚香",50);
    //3. 无参有返回值
    function f3() {
        return "我是返回值";
    }
    let info=f3();
    console.log(info);
    //4. 有参有返回值
    function f4(x,y) {
        return x*y;
    }
    let result=f4(8,9);
    console.log(result);
    //第二种声明方法的方式
    let f5=function (name,age) {
        console.log(name+":"+age);
    }
    f5("刘备",20);
    //第三种声明方法的方式
    let f6=new Function("name","age","console.log(name+':'+age)");
    f6("吕布",66);
</script>

和页面相关的方法

• 通过选择器获取页面中的元素对象

1. let 元素对象=document.querySelector("选择器")

• 获取和修改元素的文本内容

1. 元素对象.innerText="xxx"; 修改文本内容
2. 元素对象.innerText 获取文本内容

• 获取和修改input控件的值

1. 控件对象.value="xxx"; 修改
2. 控件对象.value 获取

NaN

1. Not a Number: 不是一个数
2. isNaN(x) 判断变量是否是NaN

<body>
<div>这是div</div>
<input type="text" id="i1">
<input type="button" value="按钮" onclick="f()">
<script>
    function f() {
        //得到文本框和div
        let i=document.querySelector("#i1");
        let d=document.querySelector("div");
        //取出文本框的值并赋值给div
        d.innerText=i.value;
    }
</script>

简易计算器 Demo

<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<div>
    结果:<span></span>
</div>
<script>
      function f(x) {
        //得到页面中相关的元素对象
        let i1=document.querySelector("#i1");
        let i2=document.querySelector("#i2");
        let s=document.querySelector("span");
        //判断输入的两个值是不是NaN
        if (isNaN(i1.value)||isNaN(i2.value)){
          s.innerText="输入错误!";
          return;
      }
      switch (x) {
        case 1: //加
          //当两个字符串进行-*/运算时会自动转成数值,进行+运算是拼接
          //s.innerText=i.value*1+i.value*1;
          //parseFloat()将字符串转成整数或小数
          // s.innerText=parseFloat(i.value)+parseFloat(i.value);
          s.innerText=i1.value*1+i2.value*1;
          break;
        case 2: //减
          s.innerText=i1.value-i2.value;
          break;
        case 3: //乘
          s.innerText=i1.value*i2.value;
          break;
        case 4: //除
          s.innerText=i1.value/i2.value;
          break;
      }
    }
</script>

定时器 Demo

<h1>0</h1>
<h2>0</h2>
<script>
    let count=0;
    //开启定时器 每隔1秒调用一次方法
    //方法作为参数进行传递时不写()
    setInterval(f,1000);
    function f() {
        count++;
        let h=document.querySelector("h1");
        h.innerText=count;
    }
    let num=0;
    //匿名方法开启定时器
   let timer=setInterval(function () {
        num++;
        let h=document.querySelector("h2");
        h.innerText=num;
        if (num==50){
            //停止定时器
            clearInterval(timer);
        }
    },100);
    //开启只执行一次的定时器
    setTimeout(function () {
        alert("时间到!")
    },3000);
</script>

学习记录，如有侵权请联系删除

、Angular和React框架

1.Angular

Angular更适合开发一些大型应用，其强大之处在于可以把静态页面与动态数据绑定起来。该框架拥有良好的项目结构，适合大型项目的开发，但也因此丧失了一些灵活性。值得一提的是，Angular 由于API设计差而长期饱受开发者诟病。

2.React

React是一个构建用户界面的 JavaScript 库。React实际上和Vue有些类似，例如都使用虚拟Dom技术，都专注视图层，都可以灵活的与其它框架配合。由于Facebook在17年修改了开源React的使用许可协议，引起了一些公司的不满，进而放弃了使用React。

二、Vue.js框架介绍

下面是官方给出的对Vue.js解释：

Vue.js是一套用于构建用户界面的渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时
Vue也完全能够为复杂的单页应用提供驱动。

1.渐进式框架

需要什么就用什么

从简单到困难

组件化管理

模块化的编程方式

2.只关注视图层

一旦从后端拿到了数据，接下来的事情只需要交给Vue.js的虚拟DOM技术就可以啦！这样，我们就只需要按照设计稿，写出相应的HTML元素就可以了。当然，这需要按照Vue.js的语法方式进行书写。可以说，使用了Vue.js之后，就不需要再像jQuery那样手动拼接Html的代码了。

三、谈谈Vue.js的优点

(1)体积小

以2.6.11版本为例，只有335KB，

(2)更高的运行效率

Vue.js使用了虚拟Dom技术，虚拟Dom技术在JavaScript内存当中计算好了最后一步DOM需要展现出的那种状态，然后将这个状态告诉浏览器去渲染。这样就很大程度提升了数据视图展现的性能和前端用户的体验。

(3)双向数据绑定

双向数据绑定不是Vue首发，但正是由于双向数据绑定，我们只需要关注视图，可以把更多的精力放在业务上。

(4)生态丰富 学习成本低

Vue的社区非常火爆，各种UI组件，动画效果，现成的Demo应有尽有，直接拿来使用可以实现项目的快速开发。

学习成本：Angular > React > Vue

四、Vue.js的部署与安装

Vue的官方比较友好，可以直接前往下载，下载完成后粘贴进项目内即可。

方式1:直接使用<Script>标签引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
	</body>
</html>

如果不想下载，也可以使用CDN的方式引入：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

方式2:使用CLI命令行工具

建议先不使用CLI工具，在熟悉 Vue 本身之后再使用 CLI。

五、第一个Vue.js应用

下面的代码是第一个Vue.js应用的小案例，后续的文章逐步介绍Vue.js框架！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
	  {{ message }} {{name}}
	</div>
	
	<script type="text/javascript">
	var app=new Vue({
		el: '#app',
		data: {
			message: 'Hello Vue!',
			name : "Vue"
		}
	});
	</script>

</body>
</html>

注：文章转自互联网