JS基础
JavaScript
JavaScript 主要用于页面与用户之间的交互，常见应用：用户输入合法检测、提交提示等。
完整的JavaScript由语言、BOM和DOM组成。
javascript代码可以放在<script> </script> 标签中，script标签一般放在<head> </head>中。只要加载就会执行。多段script代码会按照从上到下的顺序依次执行
如何引用外部js文件：
<html> <script src="study/hello.js"></script> </html>
JS注释： 和C语言相同，// 和 /* */
变量
var a = 10；
或者直接 a = 10； var可有可无
调试
1）使用 alert() 进行调试，类似于printf
2）在火狐中使用 firebug.log( )进行调试
基本数据类型
underfined类型： 声明了但未赋值，如 var a；
Boolean类型，值为 true 和 false
Number类型，可以表示10进制、8进制、16进制、科学记数法等数据 a = 10; b = 012; c = 0xA; d = 1.23e10
字符串类型， js中没有字符只有字符串，单引号和双引号都是字符串
类型可以动态改变，如： x = 10； x = “jashdkjasdh”；x可以先是number，后是字符串
可以使用 typeof 进行类型判断
数据类型转换
伪对象：js的基本数据类型也是一个对象，算作伪对象，所以基本数据类型也具有属性和方法
length属性：求字符串长度。var a = "ajkhadjhd"; document.write(a.lenght)
a.toString()：数字、布尔、字符串都可以转换为string；
数字转字符串时，a.toString(16)可以将数字转换为16进制字符串；
String(null)返回字符串“null”； a = null；a.toString()无法执行；
字符串转数字：parseInt(“100”) 和 parseFloat(“3.1415”)方法；
parseInt("100ajhac")返回100；parseInt("kjasd")返回NaN；
Number("100")返回100；Number("100abc")返回NaN；
转Boolean：Boolean(0); Boolean(3.14) Boolean("kjasdh");
空字符串、数字0、null转换为false； 其它都转换为 true；
函数
<script>
function calc(x,y){
return x+y;
}
var sum = calc(500, 20);
</script>
例子1
利用 js 制作简易计算器
<html>
<head>
<style>
input{
width: 100px;
}
</style>
<script>
function cacl(){
var a = document.getElementById("num1").value;
var b = document.getElementById("num2").value;
var c = parseInt(a) + parseInt(b);
document.getElementById("res").value = c;
}
</script>
</head>
<body>
<input type="text" id="num1">+
<input type="text" id="num2">=
<input type="text" id="res">
<button onclick="cacl()">运算</button>
</body>
</html>
View Code
1）使用 document.getElementById 获取html元素；再通过.value属性获取值；获取到的值是string类型
2）在button 上设置 onclick = " js函数 "，可以在按钮按下时执行该函数
例子2
销售皮包的宣传语生成器
<html>
<head>
<style>
table{
}
input{
background-color: white;
border: solid 1px #cccccc;
width: 150px;
height: 23px;
color: black;
}
textarea{
width:600px;
height: 150px;
}
button{
width: 70px;
}
</style>
<script>
function textGen(){
var addr = document.getElementById("addr").value;
var comKD = document.getElementById("comKD").value;
var comName = document.getElementById("comName").value;
var boss = document.getElementById("boss").value;
var money = document.getElementById("money").value;
var product = document.getElementById("product").value;
var price = document.getElementById("price").value;
document.getElementById("ans").value = addr + "最大的" + comKD + comName +"倒闭了，王八蛋老板" + boss + "吃喝嫖赌，欠下" + money + "个亿，带着他的小姨子跑路了！我们没有办法，拿着" + product + "抵工资，原价都是一" + price + "多、两" + price + "多的" + product + "，现在全部只卖二十块，统统只要二十块！" + boss + "王八蛋，你不是人！我们辛辛苦苦给你干了大半年，你不发工资，还我血汗钱，还我血汗钱！";
}
</script>
</head>
<body>
<table>
<tr>
<td><input value="地名:" disabled="disabled"></td>
<td><input id="addr"></td>
<td><input value="公司类型:" disabled="disabled"></td>
<td><input id="comKD"></td>
</tr>
<tr>
<td><input value="公司名称:" disabled="disabled"></td>
<td><input id="comName"></td>
<td><input value="老板姓名:" disabled="disabled"></td>
<td><input id="boss"></td>
</tr>
<tr>
<td><input value="欠债:" disabled="disabled"></td>
<td><input id="money"></td>
<td><input value="产品:" disabled="disabled"></td>
<td><input id="product"></td>
</tr>
<tr>
<td><input value="价格计量单位:" disabled="disabled"></td>
<td><input id="price"></td>
</tr>
<tr>
<td colspan="4" align="center"><button onclick="textGen()">生成</button></td>
</tr>
</table>
<textarea id="ans">
</textarea>
</body>
</html>
View Code
1）input 仅仅作为一个消息展示框而禁止输入：<input disabled="disabled">
作用域
函数参数的作用域在该函数内部；
全局变量（函数外的变量）的作用域在全局；
事件
事件时js允许html和用户交互的行为。用户对页面的任何操作都会产生事件，如：鼠标移动、鼠标点击、键盘点击等；
鼠标点击事件：1）定义一个js函数 2）在button元素上增加属性 onclick = "js函数名" 3）即可实现在鼠标点击时运行该函数
运算符
js支持的运算符：
1）++ -- += -= ;
2）字符串拼接的" + "( 字符串 + 非字符串类型， 非字符串会被转为string再做拼接)
3）绝对等于和绝对不等于： === !== ，与==和!=相同之处都是返回booleam类型；不同之处在于 123 == “123” 返回 true，而 123 === “123” 返回false， 即===还要检查数据类型是否一致
4）js支持三目运算符 a = b > 3? 1 : 2;
循环语句
js支持 for循环、while循环、do while 循环，continue 和 break；
错误处理
js支持 try catch语句
例子3
利用js制作复利计算器
<head>
<style>
table{
width:250px;
height: 250px;
border-collapse: collapse;
border:solid 1px #cccccc;
font-size: 12px;
}
td{
border: solid 1px #cccccc;
height: 12.5%;
padding-left: 3px;
}
input{
width: 75%;
height: 70%;
margin: auto 3px auto 10px;
}
</style>
<script>
function pow(base, p){
if(p == 1)
return base;
else if(p == 0)
return 1;
else{
var res = base;
for(var i = 0; i < p - 1; i++)
res = res * base;
return res;
}
}
function fuli(year, rate){
var res = 0;
for(var i = 1; i <= year; i++){
res = res + pow(rate, i);
}
return res;
}
function setValue(id, value){
document.getElementById(id).value = value;
}
function getValue(id){
return document.getElementById(id).value;
}
function process(){
var init = parseInt(getValue("info1"));
var rt = parseInt(getValue("info2"));
var year = parseInt(getValue("info3"));
var addition = parseInt(getValue("info4"));
var baseSum = init + (year - 1 )* addition;
var Sum = fuli(year - 1, rt / 100.0 + 1.0) * addition + init * pow(1.0 + rt / 100.0, year);
var interests = Sum - baseSum;
setValue("info5", baseSum);
setValue("info6", interests);
setValue("info7", Sum);
}
</script>
</head>
<body>
<table>
<tr>
<td width="35%">
起始资金
</td>
<td width="65%">
<input id="info1">￥
</td>
</tr>
<tr>
<td>
每年收益
</td>
<td>
<input id="info2">%
</td>
</tr>
<tr>
<td>
复利年数
</td>
<td>
<input id="info3">年
</td>
</tr>
<tr>
<td>
每年追加资金
</td>
<td>
<input id="info4">￥
</td>
</tr>
<tr>
<td colspan="2" align="center"> <button onclick="process()">计算</button></td>
</tr>
<tr>
<td>
本金和
</td>
<td>
<input id="info5" disabled="disabled">￥
</td>
</tr>
<tr>
<td>
利息和
</td>
<td>
<input id="info6" disabled="disabled">￥
</td>
</tr>
<tr>
<td>
本息和
</td>
<td>
<input id="info7" disabled="disabled">￥
</td>
</tr>
</table>
</body>
View Code
1）利用 document.getElementById 设置html元素的值时，可以将其封装为函数 getValue 和 setValue
转载于:https://www.cnblogs.com/zhuqiwei-blog/p/10314569.html
- 点赞
- 收藏
- 分享
- 文章举报
W87234331
发布了0 篇原创文章 · 获赞 0 · 访问量 359
私信
关注
- JS-DOM操作基础
- 【JS学习】——基础知识
- 【WEB】JS面试题涉及基础知识总结(一)
- 2019-9-24：渗透测试，css样式，js基础学习笔记
- javascript-智能社-JS基础A笔记
- JS一起学01：css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序
- js基础功能
- JS基础3_DOM文档
- JS基础——伸缩菜单
- js核心基础之构造函数constructor
- Three.js源码阅读笔记(基础的核心Core对象)
- JS基础语法
- jquery和Js的区别和基础操作
- js基础 1.简单js 语法 关键字 保留字 变量
- Day03 JS 基础语法
- js基础进阶之apply和call方法的使用以及区别
- 【慕课网】NODE.JS基础（一）学习笔记
- 二、JavaScript语言--JS基础--JavaScript进阶篇--函数
- jS事件基础应用
- js基础--数组