JS语言简介 代码示例 类型转换 遍历数组
- 2017-06-11 22:41:00
- admin
- 原创 1707
一、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