JavaScript簡單使用
輸出
//彈框輸出
alert('hello world');
//除錯輸出
console.log('hello world')
基本資料型別的運算
//遵循的規律：運算從左往右；任何型別的變數與string型別變數拼接就會被強轉為string
//4.1字串的拼接
var newName=name + '-' +name2;
console.log(newName);
//4.2 題目
var str1=10+10+'10';//2010
var str2='10'+10+10;//101010
var str3=(10+'10')+10;//101010
陣列
var numbers = [-10,'san'
//遍歷陣列
for (var i=0; i<numbers.length;i++){
console.log(numbers[i]);
}
//5.2 JS中常用的屬性
//刪除陣列中最後一個內容
numbers.pop();
//增加陣列中最後一個內容
numbers.push('小碼哥')；
for (var i in numbers){
console.log(i,numbers[i]);
}
JS常用的類庫 Math
var numsArr=[10,212,3223,32];
var
var NewMaxNum=Math.max.apply(this,numsArr);
JS中常見函式
//1.1 加法運算(兩個數)
function sum(num1,num2) {
return num1+num2;
}
//如何呼叫
var result= sum(12,323);
console.log(result);
//1.2 萬能的加法函式
function sum2(numbers) {
//變數
var
for (var i in numbers){
result +=numbers[i];
}
//返回
return result;
}
var result1= sum2([1,2,3,4]);
console.log(result1);
//1.3 匿名函式
var res= function () {
console.log('我是匿名函式')
}
//呼叫匿名函式
res();
建立物件
//this this所有的函式屬於哪個物件，this就代表這個物件
var dog={
name:'阿花',
age:18,
height:1.55,
dogFriends:['lili','wangcai'],
eat:function (something) {
console.log(this.name+'吃'+something);
},
run:function (somewhere) {
console.log(this.name+'跑'+somewhere);
}
};
//2.輸出狗物件的屬性和行為
console.log(dog.name,dog.age);
dog.eat('狗屎');
dog.run('花園’);
批量產生物件
//建立建構函式 -->抽象
var Dog = function () {
this.name = null;
this.age = null;
this.dogFriends =[];
this.height = null;
this.eat =function (something) {
console.log(this.name + '吃' +something);
}
this.run =function (somewhere) {
console.log(this.name + '跑' +somewhere);
}
}
//批量產生物件
var dog1=new Dog();
dog1.name='阿花';
dog1.age=15;
dog1.dogFriends=['1','2'];
var dog2=new Dog();
dog2.name='阿才';
dog2.age=1;
dog2.eat('狗屎');
//建立建構函式 -->抽象
var Dog1 = function (name,age,dogFriends,height) {
this.name = name;
this.age = age;
this.dogFriends =dogFriends;
this.height = height;
this.eat =function (something) {
console.log(this.name + '吃' +something);
}
this.run =function (somewhere) {
console.log(this.name + '跑' +somewhere);
}
}
var dog3=new Dog1('阿黃',10,['fafa'],15);
內建物件-window
//第一大作用；
//1.1所有全域性的變數都是window的屬性
//1.2所有的全域性函式都是window的方法
//全域性的變數
var age=17;
console.log(window.age);
//全域性的函式
function Dog() {
var name='阿花';
console.log(name);
}
window.Dog();
window.alert('哈哈');
window.console.log('全域性的');
function Person() {
console.log(this);
}
Person();//window
new Person();//Person
//第二大作用
// 1.動態的跳轉
alert(0);
內建物件-document
//document內建物件的作用：
//1.可以動態獲取網頁中所有的標籤（節點）
//2.可以對獲取到的標籤進行CRUD
document.write('helloworld');
document.write('<input type="file">');
document.write('<img src="https:/');
-------------------------------------------------------
<script>
function changeImg() {
// alert(0);
//1.獲取網頁中的標籤
var img=document.getElementsByClassName('icon')[0];
// console.log(img);
//2.改變src屬性
img.src='..//..//';
}
</script>
</head>
<body>
<img class="icon" src="../../image/WechatIMG79.png">
<p></p>
<button onclick="changeImg();">更改圖片</button>
</body>
<img class="icon" src="../../image/WechatIMG79.png">
<p id="word">這裡風景很美</p>
<p></p>
<button>隱藏</button>
<script>
//1.1 拿到所有要操作的標籤
var icon=document.getElementsByClassName('icon')[0];
var p=document.getElementById('word');
var btn=document.getElementsByTagName('button')[0];
//1.2監聽按鈕的點選
btn.onclick=function () {
//隱藏 css屬性 display
if(btn.innerText=='隱藏'){
p.style.display='none';
icon.style.display='none';
btn.innerText='顯示';
}else{
p.style.display='block';
icon.style.display='inline-block';
btn.innerText='隱藏';
}
}
</script>
注：寫在body裡的
相關推薦
javascript簡單介紹
ack back ole nbsp sub cati script int get ECMAScript 1.語法 2.變量：只能使用var定義，如果在函數的內容使用var定義，那麽它是一個局部變量，如果沒有使用var它是一個全局的。弱類型！ 3.數據類型：原始數
JavaScript 簡單嗎
表達式 不優雅 數字 第一個 som 學習 script let web 英文：Aurélien Hervé 譯文：眾成翻譯/msmailcode 這裏有一些 Javascript初學者應該知道的技巧和陷阱。如果你已經是專家了，順便溫習一下。 Javascrip
JavaScript簡單日期代碼
htm h+ lock fun 星期四 next() get 簡單 func <script> var dt=new Date(); var year=dt.getFullYear(); var month=dt.getMonth()+1; var date=
Javascript簡單特效及摘要
-c htm 電腦 set cti ech else if nod XA 1.js中的Element對象 ** var input1=docuemnt.getElementById("input1"); //alert(input1.value); //alert(
JavaScript簡單的隨機點名系統
.class length parse -h align height radi his itl <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
誰說 JavaScript 簡單的
英文：Aurélien Hervé 譯文：眾成翻譯/msmailcode 連結：zcfy.cc/article/who-said-javascript-was-easy-hacker-noon-3026.html（點選尾部閱讀原文前往） 這裡有一些
JavaScript 簡單使用的8個小案例
目錄： 1.抽獎系統 2.簡單驗證碼的使用 3.省市聯動 4.簡單輪播圖 5.表格資料增加和刪除 6.導航欄懸浮 、回到頂部 7.側邊欄iframe 的切換 8.摺疊選單 1.抽獎系統 <!DOCTYPE html> <html>
android和JavaScript簡單傳值互動
activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schem
javascript簡單練習 - 模仿圖片視覺差展示效果
兩張圖片展示視覺差效果，效果如下，通過滑鼠在圖片上滑動，形成兩張圖切換展示 全部程式碼如下~樣式簡單，可能問題還很多，僅供簡單練手~ <!DOCTYPE html> <html lang="en"> <head> <meta chars
JavaScript專題學習一 之JavaScript簡單介紹
JavaScript介紹 行業內簡稱為js，後面還有一個jquery是javaScript的封裝框架非常重要，所以這兩個請一定要掌握！！！在實際專案工作中，必須會用到這兩個，所以覺得這兩個比較弱的，還是有必要再好好練習下！！！ 如果對您有幫助 ，請
JavaScript 簡單計算器的實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
JavaScript 簡單的判斷語句
程式碼片段： <html> <body> <form name="form1"> 輸入年齡：<input type="text" name="age" /><b
JavaScript 簡單使用的8個小案例
目錄： 1.抽獎系統 2.簡單驗證碼的使用 3.省市聯動 4.簡單輪播圖 5.表格資料增加和刪除 6.導航欄懸浮 、回到頂部 7.側邊欄iframe 的切換 8.摺疊選單 1.抽獎系統 <!DOCTYPE html> <html>
javascript 簡單工廠
簡單工廠 簡單工廠模式(Simple Factory Pattern)：又稱為靜態工廠方法(Static Factory Method)模式，它屬於類建立型模式。在簡單工廠模式中，可以根據引數的不同返回不同類的例項。簡單工廠模式專門定義一個類來負責建立其他類的
javascript簡單練習案例
function quanaddright() { var s1 = document.getElementById("s1"); var s2 = document.getElementById("s2");
JavaScript簡單實現表示式查詢陣列
你還在用for迴圈嗎？ 由於每次在查詢陣列的時候都是用的for迴圈遍歷查詢，很煩 , 要是能像C#那樣用一個表示式查詢就好了， 就在這個特別糾結的時候， 頭腦中突然靈光一閃，是不是該去上個WC了，果然回來之後我想到的eval這個函式，對，一定行的，思路很特別, 平時我們一般用eval
手把手教你JavaScript-簡單的頁面輸入控制
1.姓名只能是漢字 var nameCheck =/^[\u4e00-\u9fa5]{2,21}$/; if(!nameCheck .test(name)){ alert("輸入的'姓名'中含有非漢字字元!"); return false;
JavaScript簡單使用
輸出 //彈框輸出 alert('hello world'); //除錯輸出 console.log('hello world') 基本資料型別的運算 //遵循的規律：運算從左往右；任何型別的變數與string型別變數拼接就會被強轉為string //4
javascript簡單實現資料雙向繫結
可以直接點選檢視例子。 程式碼實現如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars
javascript簡單的正則表示式入門
內容來自百度前端學院javascript入門課程 基本的HTML： <textarea placeholder="請輸入字元並用不同符號分隔" rows="5" cols="20">