1.認識js
<!--
1.什么是js
js是javascript的縮寫，是web標準中的行為標準，主要負責網頁中內容的變化
js是python類似的一門腳本語言；專門用來為web開發做服務的
2.js代碼寫在哪兒
1)內聯js(行內js)： 寫在標簽的事件屬性中，例如onclick屬性
2)內部js： 寫在script標簽中(script標簽理論可以寫html的任何位置，但是一般寫在head或者body中)
3)外部js: 將js代碼寫在一個js文件中， 然后在html文件中通過script標簽導入
注意: 用來導入外部js文件的script標簽中不能再寫其他的js代碼
3.js能做什么
1)修改標簽內容
2)修改標簽屬性
3)修改標簽樣式
4)獲取標簽屬性和內容
5)在網頁中添加新的內容
4.怎么寫js代碼
js語法
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--=====================1.寫在哪兒示例=================-->
<!--2.內部js-->
<!--<script type="text/javascript">
//在這兒就可以寫js代碼
alert('內部js1')
</script>-->
<!--3.外部js-->
<!--<script type="text/javascript" src="js/26-認識js.js">
</script>-->
<!--1.內聯js-->
<!--<button onclick="alert('內聯的js')">按鈕1</button>
<script type="text/javascript">
alert('內部js2')
</script>-->
<!--==================2.js能做什么===================-->
<!--1)修改標簽內容-->
<p id="p1">我是段落1</p>
<button onclick="document.getElementById('p1').innerText='我是python'">改變內容</button>
<br /><br />
<!--2)修改標簽屬性-->
<img id="img1" src="img/bear.png"/>
<button onclick="document.getElementById('img1').src='img/ghost.png'">修改圖片</button>
<!--3)修改標簽樣式-->
<p id="p2">我是段落2</p>
<button onclick="document.getElementById('p2').style.color='red'">改變字體顏色</button>
<br /><br />
<!--4)獲取標簽內容/屬性-->
<input type="" name="" id="input1" value="" />
<button onclick="alert(document.getElementById('input1').value)">獲取內容</button>
<!--5)在網頁中添加內容-->
<script type="text/javascript">
names = ['百度', '新浪', '愛奇藝', '千鋒']
for(name of names){
document.write('<font> </font>')
document.write('<a )
}
// for(x=0;x<10;x++){
// document.write('<a )
// }
</script>
</body>
</html>
<!--<script type="text/javascript">
alert('內部js3')
</script>-->
2.js基礎語法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.輸出
// console.log() 相當于python中的print()
console.log('輸出內容')
//2.注釋
//js的注釋方式和c一樣
//單行注釋
/*
多行注釋1
多行注釋2
*/
//3.語句: 一條語句占一行，一行結束后可以寫分號也可以不寫
//語句對縮進沒有要求
console.log('不寫分號')
console.log('寫分號');
//如果一行要寫多條語句，語句之間必須用分號隔開
console.log('語句1'); console.log('語句2')
console.log('語句3')
console.log('語句4')
//4.標識符
//由字母、數字、下劃線和$組成，并且數字不能開頭
abc = 100
at23 = 200
ah_ = 300
abc$ = 400
$ssd = 5000
console.log(abc, at23, ah_, $ssd)
//23hj = 100 //Uncaught SyntaxError: Invalid or unexpected token
//5.關鍵字: 在js中有特殊功能和特殊意義的標識符
//for, while, var, let, const, true, false等
//6.常用數據
// typeof - 獲取數據類型
//1)數字(Number): 89, 12.9, 3e4
//2)字符串(String): 使用單引號或者雙引號引起來， 'abc', "abc", 'abc\n123', '\u4e00'
//3)布爾(Boolean): 只有true和false兩個值
//4)數組(Array): 相當于python中的列表: [123, 'abc', true]
//5)對象(Object): 長得像python中的字典,其實也是對象
console.log(typeof(34))
console.log(typeof 3e4)
console.log('abc', "abc", '\tabc\n123', '\u4e00')
obj1 = {
name:'小明',
'age': 18
}
console.log(obj1['name'], obj1['age'])
console.log(obj1.name, obj1.age)
</script>
3.變量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.變量的聲明
/*
1)語法一:
變量名 = 值
a.不管在哪兒聲明都是全局變量
b.可以修改變量的值
2)語法二:
var 變量名 = 值
a.如果在{}或者函數外聲明，從聲明開始任何位置都可以用
b.如果在函數中聲明，就只能在函數用
c.可以修改變量的值
d.聲明前可以先使用，默認值是undefined
3)語法三:
let 變量名 = 值
a.沒有聲明在{}中，從聲明開始任何位置都可以用
b.如果在{}中聲明，就只能在{}中使用
c.可以修改變量的值
4)語法四:
const 變量名 = 值
a.變量的值不能修改
*/
console.log('===============1.四種聲明變量的方式==================')
name = '小明'
console.log(name)
name = '小花'
console.log(name)
var age = 18
console.log(age)
age = 20
console.log(age)
let gender = '男'
console.log(gender)
gender = '女'
console.log(gender)
const height = 180
console.log(height)
//height = 200 // 報錯!
//console.log(height)
console.log('==================2.不同的聲明方式的特點================')
//1)語法一的特點
num1 = 100
console.log('在外面聲明外面用:',num1)
{
console.log('在外面聲明代碼塊中用:',num1)
num2 = 200
console.log('在塊中聲明塊中用:', num2)
}
console.log('在塊中聲明塊外面用:', num2)
function func1(){
console.log('在外面聲明函數中使用:', num1)
console.log('在塊中聲明函數中用:', num2)
num3 = 300
}
func1()
console.log('在函數中聲明函數外部用:', num3)
//2)var變量
function func2(){
num11 = 111
var num12 = 222
}
func2()
console.log('num11:', num11)
//console.log('num12:', num12 ) //報錯!!
//3)let變量
{
num21 = 111
var num22 = 222
let num23 = 333
console.log('num23:', num23)
}
console.log('num21:', num21)
console.log('num22:', num22)
//console.log('num23:', num23) //報錯!!
console.log('==================變量提前==================')
console.log(score)
var score = 100
//console.log(study_id)
let study_id = '001'
</script>
4.運算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js支持的運算符: 數學運算符、比較運算符、邏輯運算符、賦值運算符
//1.數學運算符: +,-,*,/,%,**, ++, --
//+,-,*,/和數學的功能一樣； 沒有整除對應的運算符，會通過Math模塊提供的方法來支持取整的操作
console.log(10/2) // 5
console.log(5/2) //2.5
//%和**和python一樣
//++ -> 自加1, -- -> 自減1
num = 10
num++ //num = num+1
console.log(num) //11
++num //num = num+1
console.log(num) //12
num--
console.log(num) // 11
--num
console.log(num) //10
num1 = 10
num2 = num1++ //num2 = num1; num1+=1
console.log('num2:', num2, num1) //10
num11 = 10
num22 = ++num11 //num11+=1; num22=num11
console.log('num22:', num22, num11) //11
a = 10
sum = ++a + a++ + --a + a-- + ++a
console.log(sum, a)
/*
*a: 11 12 11 10 11
sum = 11 + 11 + 11 + 11 + 11
sum = 55
a = 11
*/
//2.比較運算符:>, <, ==, !=, ===, !==
//結果都是布爾值
//判斷大小和python一樣
//==判斷相等的時候，如果數據類型不同會先轉換成相同的數據類型，然后再判斷是否相等
//===判斷相等的時候，如果數據類型不同結果直接是false
console.log('5' == 5) //true
console.log('5' === 5) //false
console.log(5 === 5) // true
//3.邏輯運算符: &&(邏輯與), ||(邏輯或), !(邏輯非)
age = 18
score = 90
console.log(age > 18 && score > 80) // false
console.log(age > 18 || score > 80) // true
console.log(!(age > 18)) // true
//4.賦值運算符: =, +=, -=, *=, /=, %=, **=
//和python一樣
</script>
5.分支結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js中分之結構有兩種: if、switch
//1.if語法
/*
if(條件語句){
滿足條件需要執行的代碼
}
if(條件語句){
滿足條件要執行的代碼
}else{
不滿足條件要執行的代碼
}
if(條件語句1){
代碼段1
}else if(條件語句2){
代碼段2
}else if(條件語句3){
代碼段3
}
...
else{
代碼段N
}
*/
//2.switch語法
/*
1)語法:
swicth(表達式){
case 值1:{
表達式1
}
case 值2:{
表達式2
}
...
default:{
表達式N
}
}
2)執行過程:
先計算表達式的值，然后讓這個值依次和case后面的每個值進行比較，哪個case后面的值和表達式的值相等，就將這個case
作為入口，依次執行后面的表達式，直接執行完或者執行過程中break為止。如果沒有哪個case的值和表達式的值相等，
那么就會將default作為入口
*/
a = 2
switch(a){
case 10:
case 11:
case 12:{
console.log('表達式0')
break
}
case 1:{
console.log('表達式1')
break
}
case 2:{
console.log('表達式2')
break
}
case 3:{
console.log('表達式3')
break
}
default:{
console.log('表達式N')
}
}
</script>
6.循環結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js中有for循環和while循環
//1.for循環
/*
1)C語言的for循環
語法:
for(表達式1;表達式2;表達式3){
循環體
}
表達式1
for(;表達式2;){
循環體
表達式3
}
相當于:
表達式1
while 表達式2:
循環體
表達式3
for(給變量賦初值;循環條件;修改變量的值){
循環體
}
2) for-in循環
for(變量 in 序列){
循環體
}
讓變量去序列中取值一個一個的取(取的是下標/屬性名)，取完為止，每取一個值執行一次循環體
3) for-of循環
for(變量 of 序列){
循環體
}
讓變量去序列中取值一個一個的取(取的值)，取完為止，每取一個值執行一次循環體
*/
//2.while循環
/*
1)while循環
while(條件語句){
循環體
}
2)do-while循環
do{
循環體
}while(條件語句)
*/
//計算1+2+...+100
sum = 0
for(let num=1;num<=100;num++){
sum += num
}
console.log(sum)
//產生數字100~199
for(let num=100;num<=199;num++){
console.log(num)
}
console.log('===================================')
//產生數字100~1
for(let num=100; num>=1;num--){
console.log(num)
}
console.log('===================================')
//產生數字2，4，6，8，... 100
for (let num=2;num<=100;num+=2) {
console.log(num)
}
console.log('==================for-in循環=================')
for(let x in 'abc'){
console.log('x:', x, 'abc'[x])
}
obj1 = {a:100, b:200, c:300}
for(let x in obj1){
console.log('x:', x, obj1[x])
}
console.log('==================for-of循環=================')
for(let item of 'abc'){
console.log('item:', item)
}
for(let item of [100, '小明', true]){
console.log(item)
}
//注意: for-of不能遍歷對象
// for(let item of obj1){
// console.log(item)
// }
</script>
7.函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
</script>
<script type="text/javascript">
//1.普通函數
/*
function 函數名(參數列表){
函數體
}
注意: 1)js中函數的調用可以放在聲明之前(提升的時候不可以越過script標簽)
2)調用的函數的時候，任何函數都可以傳任意個參數，跟形參沒有關系;
形參可以直接獲取部分實參的值；函數中arguments對象可以獲取函數調用時所有的實參
3)關鍵字參數無效
*/
//===============1.函數的提升================
func1()
function func1(){
console.log('函數1被調用')
console.log('this:',this)
}
func1()
//===============2.函數的參數=====================
function func2(){
console.log('函數2被調用')
}
func2()
func2(10)
func2(10, 20)
func2(10, 20, 30)
console.log('==========')
function func3(x, y=10){
console.log('函數3被調用', x, y)
console.log(arguments)
for(let x of arguments){
console.log('x:', x)
}
}
func3()
func3(1)
func3(1,2)
func3(1,2,3,4)
func3(y=200,x=100)
//2.匿名函數
/*
變量 = function (參數列表){
函數體
}
*/
function func4(fn){
console.log('=====函數4======')
fn()
console.log('===============')
}
function func5(){
console.log('函數5')
}
func4(func5)
func4(function(){
console.log('匿名函數')
})
//3.箭頭函數
/*
(參數列表)=>{
函數體
}
*/
func4(()=>{
console.log('箭頭函數')
})
a = (x,y)=>{return x+y}
console.log(a(10, 20));
//4.自調用函數
/*
(function(形參列表){
函數體
})(實參列表)
注意: 自調用函數的上一條語句必須在結束的時候加分號
*/
(function(x, y){
console.log('x+y=', x+y)
})(100, 200)
</script>
<script type="text/javascript">
func1()
</script>
<script type="text/javascript">
a = 10 //相當于: window.a = 10
console.log(a)
console.log(window.a)
func1()
window.func1()
</script>
8.字符串和數組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.字符串
/*
1)獲取字符
字符串[下標]
注意:js中的下標范圍是0~長度-1
2)字符串加法運算(不支持乘法運算)
數據+字符串/ 字符串+數據/ 字符串+字符串 - 字符串拼接
3)字符串長度
字符串.length
4)字符串相關方法
*/
str1 = 'hello js'
console.log(str1[1])
str2 = 'abc'+'hello'
console.log(str2)
str3 = false+12.5+'abc'+100+true
console.log(str3)
console.log('abc'*3) //NaN
console.log('abc'.length)
str3 = 'abc'
str4 = new String('abc')
console.log(str4+100)
console.log(str4)
console.log('===============字符串相關方法==============')
str5 = 'hellol jslll'
//1.切片
console.log(str5.slice(1, 4)) //str5[1:4] -> ell
//2.替換
//注意: js中的正則表達式寫在兩個/之間
console.log(str5.replace(/l+/g, 'A'))
//3.切割
console.log('abc 123 true'.split(' '))
//補充: 正則匹配
//正則對象.test(字符串) - 判斷字符串和正則表達式是否匹配，結果是布爾
re = /^1[3-9]\d{9}$/
console.log(re.test('11273828333'))
//2.數組
/*
1)查
數組[下標] - 獲取指定下標對應的元素，如果下標不存在返回undefined
遍歷： for-in for-of
2)增
數組[下標] = 值 - 下標不存在的時候會添加元素
數組.push(元素) - 在數組的最后添加一個元素
數組.unshift(元素) - 在數組的最前面添加一個元素
數組.splice(下標,0,元素1,元素2,元素3,...) - 在指定下標前插入指定一個或者多個元素
3)刪
數組.splice(下標, N) - 從數組指定下標開始，刪除N個元素
數組.pop() - 取出數組中最后一個元素
數組.shift() - 取出數組中第一個元素
4)改
數組[下標] = 值
*/
console.log('============1.查=============')
nums = [23, 9, 78, 67]
console.log(nums[3]) // 67
console.log(nums[100]) // undefined
console.log('===========2.增===============')
scores = []
scores[2] = 19
console.log(scores)
nums = [23, 9, 78, 67]
nums.push(100)
console.log(nums)
nums.unshift(45)
console.log(nums)
nums = [23, 9, 78, 67]
nums.splice(1,0,1000,100)
console.log(nums)
console.log('===========3.刪===============')
nums = [23, 9, 78, 67]
nums.splice(1,1)
console.log(nums)
nums = [23, 9, 78, 67]
result = nums.pop()
console.log(result, nums)
nums = [23, 9, 78, 67]
result = nums.shift()
console.log(result, nums)
console.log('===========3.改===============')
nums = [23, 9, 78, 67]
nums[0] = 100
console.log(nums)
console.log('=============4.其他常用方法==============')
//1.排序
/*
數組.sort(fn)
*/
//按元素的大小從大到小排序
nums = [23, 9, 78, 67]
function func1(item1, item2){
return item2 - item1
}
nums.sort(func1)
console.log(nums)
//按元素個位數從小到大排序
nums = [23, 9, 78, 67]
function func2(item1, item2){
return item1%10 - item2%10
}
nums.sort(func2)
console.log(nums)
//按元素各位數的和從小到到排序: [123, 91, 65, 78]
nums = [123, 78, 65, 91]
nums.sort(function(item1, item2){
sum1 = 0
for(let x of String(item1)){
sum1 += Number(x)
}
sum2 = 0
for(let x of String(item2)){
sum2 += Number(x)
}
return sum1 - sum2
})
console.log(nums)
//2.數組.join(字符串=',') - 用字符串將數組中元素拼接在一個產生一個新的字符串
array1 = [123, '小明', true]
result = array1.join('+')
console.log(result)
//3.數組.forEach(函數)
array1 = [123, '小明', true]
array1.forEach(function(item, index){
console.log(item, index)
})
</script>
8.對象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.對象的直接量
/*
{
屬性1:屬性值1,
屬性2:屬性值2,
....
}
*/
p1 = {
name:'小明',
age: 18,
gender:'男'
}
p2 = {
name:'張三',
age: 20,
gender:'女'
}
//2.構造方法(相當于類)
/*
構造方法本質就是函數。
語法:
function 函數名/類名(參數列表){
this.屬性1 = 值1
this.屬性2 = 值2
...
return this
}
構造方法的調用(創建對象): new 函數名()
*/
function Person(name, age, gender='男'){
//===對象屬性====
this.name = name
this.age = age
this.gender = gender
//===對象方法====
this.eat = function(food){
console.log(this.name+'在吃'+food)
}
this.study = function(){
console.log(this.name+'在學習')
}
return this
}
p3 = new Person('小紅', 20)
p4 = new Person('Tom', 30, '女')
console.log(p1)
console.log(p3)
console.log(p4)
//3.使用對象屬性 - 查
//對象.屬性
//對象[屬性名]
console.log(p1.name, p1['age'])
console.log(p3.name, p3['age'])
p3.eat('面條')
p4.eat('面包')
p4.study()
//4.修改對象屬性/添加對象屬性
//對象.屬性 = 值 - 屬性如果存在就是修改，屬性不存在就是添加
//對象[屬性名] = 值 - 屬性如果存在就是修改，屬性不存在就是添加
p3.id = '0001'
console.log(p3)
console.log(p3.id, p3['id'])
p3['weight'] = 100
console.log(p3)
p3.name = '余婷'
p3['age'] = 18
console.log(p3)
console.log(p4)
//5.添加屬性和方法
/*
類名.prototype.屬性名 = 值 - 給指定的類添加屬性和方法
*/
Person.prototype.abc = 100
console.log(p4.abc, p4['abc'])
p5 = new Person('大黃', 3)
console.log(p5.abc)
String.prototype.ytToUpper = function(){
//'a' <= char <= 'z'(python) -> char >= 'a' && char <= 'z'
tChar = this[0]
if(tChar>='a' && tChar <= 'z'){
return tChar.toUpperCase()+this.slice(1)
}
return this
}
str1 = 'abc'
console.log(str1.ytToUpper())
</script>
