JavaScript
JS的两种引入方式:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js的两种引入方式</title> <script> alert('hello world') </script> <!--<script src="yinruwenjian.js"></script>--> </head> <body> </body> </html>
定义变量:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定义变量</title> <script> var x; x=10; var y=5; var name='yuan',age=18,job='teacher'; alert(name) alert(x); alert(y); </script> </head> <body> </body> </html> 变量命名:与python相同 python是强解释性语言,规定以 换行 为两条语句的分隔,两条语句必须分行写 python强制缩进,其他语言没有 JS不加;号,默认以换行为分隔符 加;号,则以;为分隔符(规范“每写完一行代码,加一个;”) // 单行注释 /* 多行注释 */
基础数据类型:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础数据类型</title> <script> var i=10; var f=3.14; var name='yuan'; var b=true; console.log(typeof i,typeof f); console.log(typeof name); console.log(typeof b); var a; console.log(a,typeof a) // 类型为underfined,而underfined类型只有一个值:undefined // 整形,字符串有无数个值 // 布尔有两个值:true,false </script> </head> <body> </body> </html> shell没有数据类型 shell为什么不能称为一个语言 基础数据类型: 整形(Number):所有数字均为整形 字符串 布尔值 undefined:当一个变量只声明未赋值时,变量类型为undefined 当函数没有返回值时,默认返回undefined a={"b":"c"} python中这种数据结构为字典 JS中这种数据结构为对象,基础使用方法与python相同(a[b]=c) 每一种语言中都有这种数据结构(映射关系),但功能,用法可能不同 所有语言中用的最多的数据类型为字符串 python中最重要的数据类型是字典(功能多)
运算符:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>运算符</title> <script> // 计算运算符 ++ -- var x=10,y=10; x+=1; // y++,++y 相当于 y+=1,但只适用用于1, var ret=y++; // 先赋值后计算 // var ret=++y; // 先计算后赋值 console.log(x,y,ret); // 比较运算符 ===全等于 !==不全等于 // 相当于python中==(比较数值,类型) // JS属于弱类型语言,==会对类型进行转换 // 逻辑运算符 && || ! // 相当于python的and or not // 字符串运算符 + console.log('hello'+'world'); </script> </head> <body> </body> </html> print("1"==1) python中False console.log("1"==1) JS中true python是强类型语言,"1"为字符串,1为数字 JS为true,说明JS对类型进行了转换,将1转换为字符串(弱类型语言会对类型进行转换)
流程控制:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
流程控制: 顺序:一行一行执行 分支: if分支: python: if 表达式: 语句体1 else : 语句体2 JS: if(表达式1){ 语句体1 }else if(表达式2){ 语句体2 }else{ 语句体3 } switch分支:(python中没有,因为字典可以替代"{case:alert}") var week=2; switch(week){ case 1:alert(1); case 2:alert(2); case 3:alert(3);break; case 4:alert(4);break; default:alert('未找到匹配内容'); } 当时别到相匹配的case时,开始逐行执行代码,直到执行结束 当未找到匹配内容时,执行default 循环:(条件循环,遍历循环) python中,for为遍历循环;while为条件循环 JS中,while为条件循环;for有两种表达形式,可分为条件循环和便利循环 for循环1:(条件for循环)(三要素:初始变量,条件,自增/自减)(推荐使用) for(var i=0;i<10;i++){ console.log('OK') } for循环2:(遍历for循环)(在处理DOM时,会有问题) var arr=[1,2,3]; //数组,功能与python列表类似 // console.log(arr.length) for(var i in arr){ console.log(i,arr[i]) } while循环:(条件循环) while(表达式){ 循环体 }
字符串对象:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符串对象</title> <script> var s="hello world"; // 有两种实例化字符串对象的方式 console.log(s.length); // 打印字符串长度 console.log(s.toUpperCase()); // 字符串大写 console.log(s.charAt(3)); // 通过索引找字符 console.log(s.indexOf(3)); // 通过字符找索引(从左到又) console.log(s.substr(2,2)); // 按长度截断 console.log(s.substring(2,4)); // 按位置截断 console.log(s.replace("world","egon")); // 替换 console.log(s.split(" ")) ; // ["hello", "world"] // 切成 数组 形式 </script> </head> <body> </body> </html>
数组对象:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组对象</title> <script> // 数组的两种定义方式: var arr=[111,'hello',true]; // python与js可以存放任意数据类型;C语言只能固定放某一种数据类型 // var arr=new Array(11,'hello',true) 实例化Array类,产生arr对象 console.log(arr,typeof arr); // join方法(字符串拼接) // python中字符串拼接 // s1='hello' s2='world' ret='-'.join([s1,s2]) print(ret) var s1=['hello','world'] var ret=s1.join('-') console.log(ret) // concat方法(数组拼接) var s2=['hello','world'] console.log(s2.toString()) // 转化为字符串 hello,world console.log(typeof s2.toString()) // reverse sort方法 // var arr=[12,100,89,34]; // console.log(arr.reverse()); // 反转 [34, 89, 100, 12] // console.log(arr.sort()); // 按首字母ASCII进行比较 // function Mysort(x,y) { return x-y } var a=[12,100,89,34]; console.log(a.sort(Mysort)); // [12, 34, 89, 100] 按数字大小排列 // 切片 slice // var arr1=['a','b','c','d','e','f','g','h']; // console.log(arr1.slice(2,4) ) ; // ["c", "d"] // console.log(arr1.slice(4) ) ; // ["e", "f", "g", "h"] // console.log(arr1.slice(4,-1) ) ; // ["e", "f", "g"] // push pop方法(对原数据进行修改)(在最后修改) // var arr5=[11,22,33]; // arr5.push(44); // console.log(arr5); // [11, 22, 33, 44] // // arr5.push(55,66,77); // console.log(arr5); // [11, 22, 33, 44, 55, 66, 77]; // // var ret=arr5.pop(); // 有返回值,返回与删除最后一个元素 // console.log(arr5); // [11, 22, 33, 44, 55, 66] // unshift shift 添加,删除(有返回值)(在最前面修改) // var arr5=[11,22,33]; // // arr5.unshift("hello"); // // console.log(arr5); // ["hello", 11, 22, 33] // // arr5.unshift(44,55); // [44,55,"hello", 11, 22, 33] // console.log(arr5); // // var b=arr5.shift(); // console.log(b); // console.log(arr5); // [55, "hello", 11, 22, 33] </script> </head> <body> </body> </html>
日期对象:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日期对象</title> <script> // var date=new Date(); // console.log(typeof date,date) ; // 日期对象,获取当前时间 // console.log(typeof date.toLocaleString(),date.toLocaleString()) // 日期字符串, // console.log(date.toLocaleString().substr(0,10)) // 对时间字符串进行截取 // 创建具体时间 var data=new Date('2012/12/12'); // 分隔符不同,指定的时间有差异 // 获取时间片信息 console.log(data.getFullYear()) // 获取完整年份 console.log(data.getYear()) console.log(data.getDate()) console.log(data.getMonth()) // 月份对应 0--11 </script> </head> <body> </body> </html>
math对象:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>math对象</title> <script> console.log(Math.max(11,22,33,443)) // 取最大值 // JS封装好的Math对象,直接调用下面的max方法, console.log(Math.floor(3.74)) // 向下整数 console.log(Math.ceil(3.14)) // 向上取整 </script> </head> <body> </body> </html>