整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
有一個(gè)文本文件。需要讀取出來(lái)，自動(dòng)拼接成一個(gè) JavaScript 語(yǔ)句： console.table
在沒(méi)有 Collectors.joining 之前，我們總是無(wú)法優(yōu)雅地處理 開(kāi)頭 和 結(jié)尾 ?，F(xiàn)在就舒服多了。
// 文件路徑
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([
'花開(kāi)無(wú)鑫人有淚',
'相期別時(shí)更易醉',
'撫花還問(wèn)花開(kāi)處',
'把酒卻是罷酒徒',
'飾新觀，做新娘',
'抱上他人床',
'紅燭淚落做哭狀',
'燃盡相思郎',
'天一方，海一方',
'相連似在天盡處',
'相隔又在海盡旁',
'為爾做情郎']);F12 打開(kāi)調(diào)試窗口測(cè)試一下：
#文者傷心##原創(chuàng)##詩(shī)詞##java##javascript#
avaScript 是互聯(lián)網(wǎng)上最流行的腳本語(yǔ)言，這門(mén)語(yǔ)言可用于 HTML 和 web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。
//java:
String name="tom"; int age=18; int x; x="abc";
//JS:
let name="tom"; let age=18; let x; x="abc"; age="xyz"如何在HTML頁(yè)面中添加JS語(yǔ)言
三種引入方式:
<!--onclick點(diǎn)擊事件 alert()彈出提示框 方式一 -->
<input type="button" value="按鈕" onclick="alert('按鈕點(diǎn)擊了!')">
<!--內(nèi)部引入JS 方式二 -->
<script>
/*在瀏覽器的控制臺(tái)輸出*/
console.log("內(nèi)部引入成功!");
</script>
<!--引入外部js文件 如果script標(biāo)簽引入了外部js文件 則不能在標(biāo)簽體內(nèi)寫(xiě)js代碼-->
<script src="my.js"></script>瀏覽器終端 Console 窗口調(diào)試 JavaScript 代碼
瀏覽器終端執(zhí)行js
變量
const常量
java:
for(int i=0;i<10;i++){
int y=i+1;
}
// int z=i+y; 報(bào)錯(cuò) i和y超出了自身的作用域
JS:
for(let i=0;i<10;i++){
let y=i+1;
}
let z=i+y;
//不報(bào)錯(cuò),但是訪(fǎng)問(wèn)不到i和y 因?yàn)槌隽俗饔糜?
for(var i=0;i<10;i++){
var y=i+1;
}
var z=i+y;
//不僅不報(bào)錯(cuò)還能夠訪(fǎng)問(wèn)到i和y的值 數(shù)據(jù)類(lèi)型
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
//注意 null 返回時(shí) object
typeof undefined // undefined
typeof null // object
null===undefined // false
null==undefined // true運(yùn)算符
算數(shù)運(yùn)算符: + - * / % , JS中的除法會(huì)根據(jù)結(jié)果自動(dòng)轉(zhuǎn)換整數(shù)或小數(shù)
//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;各種語(yǔ)句:
if else
//語(yǔ)法
if (condition)
{
當(dāng)條件為 true 時(shí)執(zhí)行的代碼
}
if 語(yǔ)句 - 只有當(dāng)指定條件為 true 時(shí)，使用該語(yǔ)句來(lái)執(zhí)行代碼
if...else 語(yǔ)句 - 當(dāng)條件為 true 時(shí)執(zhí)行代碼，當(dāng)條件為 false 時(shí)執(zhí)行其他代碼
if...else if....else 語(yǔ)句- 使用該語(yǔ)句來(lái)選擇多個(gè)代碼塊之一來(lái)執(zhí)行
switch 語(yǔ)句 - 使用該語(yǔ)句來(lái)選擇多個(gè)代碼塊之一來(lái)執(zhí)行for
//語(yǔ)法：
for (語(yǔ)句 1; 語(yǔ)句 2; 語(yǔ)句 3)
{
被執(zhí)行的代碼塊
}
//語(yǔ)句 1 （代碼塊）開(kāi)始前執(zhí)行
//語(yǔ)句 2 定義運(yùn)行循環(huán)（代碼塊）的條件
//語(yǔ)句 3 在循環(huán)（代碼塊）已被執(zhí)行之后執(zhí)行
for - 循環(huán)代碼塊一定的次數(shù)
for/in - 循環(huán)遍歷對(duì)象的屬性
while - 當(dāng)指定的條件為 true 時(shí)循環(huán)指定的代碼塊
do/while - 同樣當(dāng)指定的條件為 true 時(shí)循環(huán)指定的代碼塊while
do while
while (條件)
{
需要執(zhí)行的代碼
}
//語(yǔ)法 do while 至少執(zhí)行一次
do
{
需要執(zhí)行的代碼
}
while (條件);switch case
switch(n)
{
case 1:
執(zhí)行代碼塊 1
break;
case 2:
執(zhí)行代碼塊 2
break;
default:
與 case 1 和 case 2 不同時(shí)執(zhí)行的代碼
}方法
// java: 寫(xiě)法
public 返回值類(lèi)型 方法名(參數(shù)列表){方法體}
//JS: 寫(xiě)法
function 方法名(參數(shù)列表){方法體}常見(jiàn)的四種方法:
三種聲明方法的格式:
<input type="button" value="按鈕" onclick="f1()">
<script>
//1. 無(wú)參無(wú)返回值
function f1() {
console.log("f1");
}
//調(diào)用
f1();
//2. 有參無(wú)返回值
function f2(name,age) {
console.log(name+":"+age);
}
f2("孫尚香",50);
//3. 無(wú)參有返回值
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>和頁(yè)面相關(guān)的方法
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>簡(jiǎn)易計(jì)算器 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>
結(jié)果:<span></span>
</div>
<script>
function f(x) {
//得到頁(yè)面中相關(guān)的元素對(duì)象
let i1=document.querySelector("#i1");
let i2=document.querySelector("#i2");
let s=document.querySelector("span");
//判斷輸入的兩個(gè)值是不是NaN
if (isNaN(i1.value)||isNaN(i2.value)){
s.innerText="輸入錯(cuò)誤!";
return;
}
switch (x) {
case 1: //加
//當(dāng)兩個(gè)字符串進(jìn)行-*/運(yùn)算時(shí)會(huì)自動(dòng)轉(zhuǎn)成數(shù)值,進(jìn)行+運(yùn)算是拼接
//s.innerText=i.value*1+i.value*1;
//parseFloat()將字符串轉(zhuǎn)成整數(shù)或小數(shù)
// 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>定時(shí)器 Demo
<h1>0</h1>
<h2>0</h2>
<script>
let count=0;
//開(kāi)啟定時(shí)器 每隔1秒調(diào)用一次方法
//方法作為參數(shù)進(jìn)行傳遞時(shí)不寫(xiě)()
setInterval(f,1000);
function f() {
count++;
let h=document.querySelector("h1");
h.innerText=count;
}
let num=0;
//匿名方法開(kāi)啟定時(shí)器
let timer=setInterval(function () {
num++;
let h=document.querySelector("h2");
h.innerText=num;
if (num==50){
//停止定時(shí)器
clearInterval(timer);
}
},100);
//開(kāi)啟只執(zhí)行一次的定時(shí)器
setTimeout(function () {
alert("時(shí)間到!")
},3000);
</script>學(xué)習(xí)記錄，如有侵權(quán)請(qǐng)聯(lián)系刪除
、Angular和React框架
1.Angular
Angular更適合開(kāi)發(fā)一些大型應(yīng)用，其強(qiáng)大之處在于可以把靜態(tài)頁(yè)面與動(dòng)態(tài)數(shù)據(jù)綁定起來(lái)。該框架擁有良好的項(xiàng)目結(jié)構(gòu)，適合大型項(xiàng)目的開(kāi)發(fā)，但也因此喪失了一些靈活性。值得一提的是，Angular 由于API設(shè)計(jì)差而長(zhǎng)期飽受開(kāi)發(fā)者詬病。
2.React
React是一個(gè)構(gòu)建用戶(hù)界面的 JavaScript 庫(kù)。React實(shí)際上和Vue有些類(lèi)似，例如都使用虛擬Dom技術(shù)，都專(zhuān)注視圖層，都可以靈活的與其它框架配合。由于Facebook在17年修改了開(kāi)源React的使用許可協(xié)議，引起了一些公司的不滿(mǎn)，進(jìn)而放棄了使用React。
下面是官方給出的對(duì)Vue.js解釋?zhuān)?/p>
Vue.js是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架 。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)
Vue也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。1.漸進(jìn)式框架
需要什么就用什么
從簡(jiǎn)單到困難
組件化管理
模塊化的編程方式
2.只關(guān)注視圖層
一旦從后端拿到了數(shù)據(jù)，接下來(lái)的事情只需要交給Vue.js的虛擬DOM技術(shù)就可以啦！這樣，我們就只需要按照設(shè)計(jì)稿，寫(xiě)出相應(yīng)的HTML元素就可以了。當(dāng)然，這需要按照Vue.js的語(yǔ)法方式進(jìn)行書(shū)寫(xiě)?？梢哉f(shuō)，使用了Vue.js之后，就不需要再像jQuery那樣手動(dòng)拼接Html的代碼了。
三、談?wù)刅ue.js的優(yōu)點(diǎn)
(1)體積小
以2.6.11版本為例，只有335KB，
(2)更高的運(yùn)行效率
Vue.js使用了虛擬Dom技術(shù)，虛擬Dom技術(shù)在JavaScript內(nèi)存當(dāng)中計(jì)算好了最后一步DOM需要展現(xiàn)出的那種狀態(tài)，然后將這個(gè)狀態(tài)告訴瀏覽器去渲染。這樣就很大程度提升了數(shù)據(jù)視圖展現(xiàn)的性能和前端用戶(hù)的體驗(yàn)。
(3)雙向數(shù)據(jù)綁定
雙向數(shù)據(jù)綁定不是Vue首發(fā)，但正是由于雙向數(shù)據(jù)綁定，我們只需要關(guān)注視圖，可以把更多的精力放在業(yè)務(wù)上。
(4)生態(tài)豐富 學(xué)習(xí)成本低
Vue的社區(qū)非常火爆，各種UI組件，動(dòng)畫(huà)效果，現(xiàn)成的Demo應(yīng)有盡有，直接拿來(lái)使用可以實(shí)現(xiàn)項(xiàng)目的快速開(kāi)發(fā)。
學(xué)習(xí)成本：Angular > React > VueVue的官方比較友好，可以直接前往下載，下載完成后粘貼進(jìn)項(xiàng)目?jī)?nèi)即可。
方式1:直接使用<Script>標(biāo)簽引入
<!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。
下面的代碼是第一個(gè)Vue.js應(yīng)用的小案例，后續(xù)的文章逐步介紹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>注：文章轉(zhuǎn)自互聯(lián)網(wǎng)
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
