JS语言简介 代码示例 类型转换 遍历数组

2017-06-11 22:41:00
admin
原创 1707
摘要:JS语言简介 代码示例 类型转换 遍历数组

一、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

发表评论
评论通过审核之后才会显示。