JavaScript
1. JavaScript特性与简单使用
1. 特性
编程语言：可以编写有处理逻辑的程序的语言
脚本语言：可以编写具有简单功能处理的、运行与特定环境的小程序操作
弱类型语言：对于数据类型的存储操作可以自动适应
跨浏览器：目前主流的任意浏览器都可以操作
运行环境：浏览器引擎[JS解释器]、NodeJS平台
解释环境：解释一行，执行一行
2. 简单的操作
JS代码，在前端开发中，需要写到<script></script>标签中
在编写JS代码中，尽量在每一行代码的末尾添加分号
| 用法 | 描述 |
|---|---|
| alert(“信息”); | 控制浏览器弹出一个警告对话框 |
| document.write(“信息”) | 在浏览器的网页中，输出write()定义的信息 |
| console.log(“信息”); | 在浏览器的控制太窗口中，输出一段信息 |
| // | JS中的单行注释 |
| /* | JS的多行注释开头 |
| */ | JS的多行注释结尾 |
2. JavaScript基本数据类型
布尔类型Boolean|数字Number
字符串 String|null(空值)|undefined(未定义)
数据类型转换:
Number()将一个数据转换成数字-NaN:not a number
parseInt()将一个数据转换成整数
parseFloat()将一个数据转换成浮点数
String()将一个数据转换成字符串，和直接调用.toString()一个效果
3. JavaScript中的运算符
赋值运算符 = += -=..
算数运算符 + - * / % ..
比较运算符 > >= < <= ==(值相等) ===(值、类型 全等)
l 逻辑运算符 &&(并且 and) | |或者(or) !(取反not)
4. JavaScript中的变量
JS是弱类型的语言，在定义变量时，先通过var关键字声明，然后赋值使用
5. JavaScript的基本语法
JS是在HTML网页中，编写的脚本程序
代码位置：
l 参考样式：标签内嵌style属性、网页内嵌<style>标签中，外部css文件
标签内嵌：事件属性，直接将事件添加在标签中
<div onclick=’alert(‘****信息****’)’></div>
<div id="neiqian" onclick="alert('用户点击了')"></div>
网页内嵌：JS代码写在一对<script></script>标签中
<!--网页内嵌-->
<button onclick="show()">按钮</button>
<script>
function show() {
alert("用户点击了网页内嵌的方式")
}
</script>
外部脚本：JS代码写在一个js文件中，通过script标签引入到HTML网页
<script src=’文件位置’></script>
<script src="demo02.js"></script>
<!--导入外部文件的方式-->
<button onclick="show_info()">引入外部脚本程序的按钮</button>
function show_info(){
alert("这是js文件里的函数执行了")
}
5.1 JS对话框
5.1.1 警告消息对话框alert()
<button onclick="show1()">警告对话框</button>
function show1() {
alert("这是一个警告框");
}
5.1.2 确认对话框 confirm()
<button onclick="show2()">确认对话框对话</button>
function show2(){
res = confirm("确认消息框");
console.log(res)
}
5.1.3 交互对话框 prompt()
<button onclick="show3()">交互对话框</button>
function show3(){
res = prompt("交互框");
console.log(res)
}
5.1.4 获取标签 document.getElementById(“标签id”)
// 获取标签id
var _box_id = document.getElementById("box");
5.2 选择结构
5.2.1 成绩判断实例
<body>
请输入成绩：
<input type="text" id="score" placeholder="输入成绩"><br />
<div id="show">结果</div>
<script>
var _score = document.getElementById("score");
var _show = document.getElementById("show");
_score.onkeyup = function () {
var _score_value = _score.value;
if (_score_value>60){
_show.innerText="及格了";
}
else{
_show.innerText="不及格";
}
}
</script>
</body>
5.2.2 简单的计算实例(if|else)
<body>
<div id="price_box">商品单价：<span id="price">60</span></div>
请输入购买数量：<input type="text" id="count" placeholder="购买数量"><br />
结算：<div id="total"></div>
<script>
//获取价格和数量标签对象
var _price = document.getElementById('price');
// console.log(typeof(_price));
var _count = document.getElementById('count');
var _total = document.getElementById('total');
//设置一个按键抬起的事件
_count.onkeyup = function(){
//获取到商品的数量
_count_value = _count.value;
if (_count_value>0){
//获取到静态文本中的单价值，计算总价
var _sum = _count_value*_price.innerText;
_total.innerText = _sum
}
else{
_total.innerText = "不合法"
}
}
</script>
</body>
5.2.3 简单的选择语句实例（switch|case）
<body>
请输入尺寸: <input type="text" id="size" placeholder="尺寸:170/175/180"> <br />
<div id="result"></div>
<script>
var _size = document.getElementById('size');
var _result = document.getElementById('result');
_size.onkeyup = function(){
_size_value = _size.value;
switch(_size_value){
case "170":
_result.innerText = "L";
break;
case "175":
_result.innerText = "XL";
break;
case "180":
_result.innerText = "XXL";
break;
default:
_result.innerText = "没有该尺寸";
}
}
</script>
</body>
5.3 循环结构
5.3.1 for循环(9x9乘法表)
<script>
for(var i=1; i<10; i++){
for(var j=1; j<=i; j++){
document.write("<span>" +i +"x"+ j + "=" + (i*j) +"</span>")
}
document.write("<br/>")
}
</script>
5.3.1 while循环(9x9乘法表)
<script>
// while循环结构9x9
var i = 1;
while(i<=9){
var j = 1;
while(j<=i){
document.write("<span>" + i + " x " + j + " = " + (i*j) + "</span>");
j++;
}
i++;
document.write("<br/>")
}
</script>
5.3.2 do-while循环（9x9乘法表）
<script>
// do_while循环
var i = 1;
do{
var j=1;
do{
document.write("<span>" + i + " x " + j + " = " + (i*j) + "</span>");
j++;
}while(j<=i);
i++;
document.write("<br/>");
} while(i<10);
</script>
5.4 数组操作
5.4.1 声明数组
var _name = Array(); 通过Array类型创建一个空数组
var _users = [ ]; 通过快捷形式声明了一个空数组【推荐使用】
5.4.2 数组中的操作
开头增加数据：unshift(args)
开头删除数据：shift()
末尾增加数据：push(args)
末尾删除数据：pop()
数组一旦创建，就是固定的长度~如果要实现真是删除一个数据；创建一个新数据
网友评论