JS语言简介 代码示例 类型转换 遍历数组
- 2017-06-11 22:41:00
- admin
- 原创 1841
一、JS语言简介
1、JS语言由三部分组成：ECMAScript、DOM文档对象模型、BOM浏览器对象模型；
2、JS语言标准是ECMAScript，目前主要是5版本和6版本，5版本浏览器兼容性更好；
3、Babel是一个JS编译器，转换高版本JS到低版本JS，polyfill转换高版本API到低版本API；
4、<script></script>标记代码块，老式浏览器要求type="text/javascript"，现在已经不必；
5、代码可以位于head、可以位于body、可以位于外部，最好放在head或外部便于维护；
6、申明文档类型：<!DOCTYPE html>，告诉浏览器文档满足HTML5规范；
基本语法：
1、语法文档：https://www.runoob.com/js/js-tutorial.html
2、对象文档：https://www.runoob.com/jsref/jsref-tutorial.html
3、运行时确定变量类型，不同类型之间隐式转换；
4、数字类型只有一种，可以带小数，可以不带；
5、字符串连接：str+str，str+num，num+str
6、undefined变量未定义，null变量未赋值；
7、单行注释//，多行注释/**/
常用函数：
1、消息弹窗，window.alert(message)
2、内容输出，document.write(exp1,exp2,exp3,...)
3、内容修改，document.getElementById('id').innerHTML = 'content'
项目结构：
1、lib，js
2、static，html、css、jpg
3、WEB-INF，动态内容
4、index.html，主页
二、代码示例：
任意文件读取检查：
let regex = /^\/|\.\.|:/ig;
regex.test(filename);
弹框代码：
<button type="button" onclick="alert('欢迎!')">点我!</button>
改变样式：
x=document.getElementById('demo')
x.style.color='#ff0000';
显示时间：
function displayDate() {
document.getElementById('demo').innerHTML = Date();
}
<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
三、类型转换
字符串转int：
var str = '1250';
console.log(Number(str));
console.log(parseInt(str));
var str1 = '00100';
console.log(Number(str1));
console.log(parseInt(str1));
var str2 = 'abc';
console.log(Number(str2));
console.log(parseInt(str2));
var str3 = '12abc';
console.log(Number(str3));
console.log(parseInt(str3));
输出：
1250
1250
100
100
NaN
NaN
NaN
12
int转字符串：
var num = 99;
console.log(typeof num.toString());
console.log(typeof (num + ''));
输出：
string
string
四、遍历数组
var cars=new Array();
cars[0]='Audi';
cars[1]='BMW';
cars[2]='Volvo';
function foriter() {
for (idx in cars) {
console.log(cars[idx]);
}
for (idx = 0; idx < cars.length; ++idx) {
console.log(cars[idx]);
}
}
foriter();
console.log(idx);
输出：
Audi
BMW
Volvo
Audi
BMW
Volvo
3