JavaScript的用法01
来源：互联网 发布：对网络流行语的看法 编辑：程序博客网 时间：2024/05/17 23:53
什么是JavaScript
它是嵌入在html中的浏览器的脚本语言，具有和java，c语言类似的语法
编程语言：需要进行编译的语言
脚本语言：不需要编译，直接执行的语言
一种网页编程技术用来向html页面添加交互行为
js特点
可以使用任何文本编辑工具的编写
由浏览器中的JavaScript引擎执行代码：不需要编译，逐行执行
-基于对象，内置大量现成的对象
适宜：表单的合法性，浏览器触发事件，页面的特殊效果，服务器对异步数据提交
不适宜：软件的核心逻辑，跟业务有关的
js定义方式
-事件定义式：直接写在声明事件时
-嵌入式使用<script>标签
-文件调用式：单独写一个js文件以.js结尾，通过<script>调用
js的规范和语法
单行注释：//
多行注释：/* */
标识符(变量):同java变量命名规则
关键字：同java关键字相同，undefined
保留字：class int……
变量声明：使用关键字var 声明变量
var a = 10;
没有初始化的变量则自动取值undefined
1.数据类型
String类型 ‘a’,’\n’,’\’
number类型不区分正数和浮点数，但是所有的数字都是用64位浮点格式储存
boolean类型：true和false：可以自动转为数值参与运算，运算时true=1 false=0
数字 + 字符串 = 数字字符串
数字 + 布尔值 =数字+1/+0
字符串 + 布尔值 = 字符串true或false
2.数据类型转函数
toString：所有数据转成String类型
parseInt：转成正数类型，如果不能转，则返回NaN
parseFloat：强转成浮点类型
typeof：查询当前的类型
isNaN
直接讲代码
直接分析代码，比打那些笔记更加的直观
现在来看第一个例子：
JavaScript和CSS使用方式类似在html的<head>里写 <script>标签
<head> <meta charset="UTF-8"> <title>JS的用法</title> <script type="text/javascript"> </script></head>当然和CSS一样也可以写一个单独的.js文件
然后在html中引用它：
<head> <meta charset="UTF-8"> <title>JS的用法</title> <script type="text/javascript src="my.js"> </script></head>当然标签中不能既引用js文件又有js函数.必须写成双标签。如果既要用function方法，又要用js的文件
那就必须要写2个script标签了
js触发
js代码必须通过事件触发，比如单机事件，双击事件，光标切入事件。
新建一个my.js里面写上
function f1(){ alert(6666);}接下来我们开始测试
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JS的用法</title> <script type="text/javascript"> function f(){ alert("试试就试试"); } </script> <script type="text/javascript" src="my.js"></script> </head> <body><input type="button" value="按钮1" onclick="alert('点我')"/> <input type="button" value="按钮2" onclick="f();"/> <input type="button" value="按钮3" onclick="f1();"/> </body></html>运行上面的代码会得到3个按钮
点击3个按钮分别有3个对话框
这就是js的基本用法。
接下来试着写一个简单计算数字平方功能的东西
达成下面的效果
为了能获取到输入的东西，我们肯定需要一个方法获取框中数据。翻翻笔记你就会知道有一个对象document
中有一个getElementById方法，这个方法可以获取文本框之后就用.value。获取文本框内的值
可以这么写
function cal(){ var input = document.getElementById("num"); var n = input.value; console.log(n);}*最好每次你需要获取什么值的时候，都写上 console.log(参数);来判断你需要获取的值是否获取到了。
之后考虑到需要返回一个结果值，所以还需要一个
变量来存放结果并返回到html上
可以这么写
function cal(){ var input = document.getElementById("num"); var span = document.getElementById("result"); var n = input.value; //console.log(n);}那既然是要计算数据，肯定要判断是否输入的是数字
function cal(){ var input = document.getElementById("num"); var span = document.getElementById("result"); var n = input.value;if(n=="" || isNaN(n)){ //输入有误 span.innerHTML = "请输入数字"; }else { span.innerHTML = n * n; } }结合完整的html可以得到要求的结果了
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>计算平方</title> <script type="text/javascript"> //计算输入数字的平方 function cal(){ //1.获取文本框和显示框的元素 var input = document.getElementById("num"); var span = document.getElementById("result"); console.log(input); console.log(span); //2.获取文本框内的值 var n = input.value; console.log(n); //3.判断用户输入是否为数字 //如果文本框内没有内容，获取到的值可以看为是"" if(n=="" || isNaN(n)){ //输入有误 span.innerHTML = "请输入数字"; }else { span.innerHTML = n * n; } } </script> </head> <body> <!-- 输入 --> <input type="text" id="num" /> <input type="button" value="计算平方" onclick="cal();"/> =<span id="result"></span> </body></html>- 开始学习的时候更多的是记忆的东西，先牢记
- document.getElementById(“你需要获取到id的名字”);
.value：可以获取到文本框的值
.innerHTML:看英文的意思就知道这是个插入到html中的语句
如果你想把什么东西显示到html就这么用变量.innerHTML
几个简单的案例
1.猜数字
要求:系统随机一个1到100的数字，然后猜这个数字，并能给出提示大了还是小了，还是猜对了。
先写个html
<!Doctype html><html> <head> <title>猜数字</title> <meta charset="utf-8" /> </head> <body> <input type="text" id="num"> <button onclick="guess();">猜</button> <p id="result"></p> </body></html>可以得到：
那么先定义系统随机数
var num = parseInt(Math.random()*100+1);console.log(num);接下来写guess方法：
首先要先获取到文本框和段落元素
function guess(){ var input = document.getElementById("num").value; var p = document.getElementById("result"); p.innerHTML = input>num?"大了":(input<num?"小了":"猜对了");}写好了之后我们试下效果发现 
只要输入数字以外的东西都显示猜对了
原来是三目这里出了问题
因为除了大了和小了，还有一种就是输错了的结果，也就是说只要不是大了和小了，就输出猜对了。这肯定是有问题的，那么我们现在给执行三目之前加一个判断语句，判断在输入时就必须输入数字，加上if..else如下
if(input=="" || isNaN(input) || input<1 || input>100){ p.innerHTML = "请输入1~100的数字"; }else { p.innerHTML = input>num?"大了":(input<num?"小了":"猜对了"); } }
到这来就完成了
2.阶乘
要求：输入一个数字，然后显示其结果，结果为其阶乘
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>阶乘</title> <script type="text/javascript"> function cal(){ var input = document.getElementById("num").value; var p = document.getElementById("result"); //判断用户输入的值 if(input == "" || isNaN(input)){ p.innerHTML = "请输入数字"; }else { input = parseInt(input); var sum = 1; for(var i = input;i;i--){ sum *= i; } p.innerHTML = sum; } } </script> </head> <body> <input type="text" id="num"> <button onclick="cal();">阶乘</button> <p id="result"></p> </body></html>这里唯一需要注意的就是用户输入到文本框中的值是字符串类型如果要对其操作，必须强转为int类型。
js字符串操作
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //1.String //1.1.直接式 var str = "Hello World"; //1.2.创建对象式 var str1 = new String("Hello World"); //字符长度 console.log(str.length); //大小写转换 console.log(str.toLowerCase()); console.log(str.toUpperCase()); //获取指定字符 console.log(str.charAt(4));//返回指定位置的字符 console.log(str.charCodeAt(4));//返回指定字符Unicode编码 //查找指定字符 console.log(str.indexOf("o")); console.log(str.lastIndexOf("o")); console.log(str.substring(3,6)); //替换指定字符 console.log(str.replace("llo","***")); console.log(str.replace("o","*")); //拆分字符串 var str2 = "1,2,3,4,5"; var strAry = str2.split(","); console.log(strAry[1]); //2.Number //将数字转为字符串，并保留小数点后指定位数，并四舍五入 //如果后面没有数字，将用0补足 var n = 3.1415926; console.log(n.toFixed(3)); var n1 = 5.2; console.log(n1.toFixed(2)); //3.Array var a1 = ["a",1,true,3.14] for(var i=0;i<a1.length;i++){ console.log(a1[i]); } //获取长度 length //二维数组 var a2 = [ [1,2,3], ["a",1,"22"], [true,false,"111",3], ]; console.log(a2[2][0]); //位置数据 var a3 = new Array(); a3.push(111); a3.push("222"); a3.push(false); console.log(a3[1]); //数组倒转 var a4 = [5,14,4,35,88,65,44]; a4.reverse(); console.log(a4); //数组排序 //默认按照字符有小到大排序 var a5 = [5,14,4,35,88,65,44]; a5.sort(); console.log(a5); //按照我们自己理解的方式排 a5.sort(function(x,y){ return x-y; }); console.log(a5); //4.Math //用于执行数学任务 //Math.PI,Math.E,Math.round,Math.random //5.Date //用于处理时间和日期 var d1 = new Date(); console.log(d1); var d2 = new Date("2017/06/30 16:00:02") console.log(d2); //读取时间毫秒值 console.log(d2.getTime()); //转换成本地时间的字符串 //年月日 console.log(d1.toLocaleDateString()); //时分秒 console.log(d1.toLocaleTimeString()); //读取时间分量 var year = d2.getFullYear(); //月份从0开始 var month = d2.getMonth() + 1; var day = d2.getDate(); var date = year + "年" + month + "月" + day + "日"; console.log(date); //6.正则表达式 var reg1 = "you can you up,no can no BB"; var reg2 = /no/; //reg.test:(str):检测str中是否包含与reg匹配的字符串 console.log(reg2.test(reg1)); //检测reg1中与reg2匹配的第一个子串 console.log(reg2.exec(reg1)); //全局模式 //第n次检测reg1中与reg2匹配的第n个字符串 //g:设定当前匹配为全局匹配 //i:忽略匹配中的大小写检测 var reg3 = /no/g; console.log(reg3.exec(reg1)); console.log(reg3.exec(reg1)); console.log(reg3.exec(reg1)); console.log(reg3.exec(reg1)); //String和正则表达式 /* 方法x.replace():返回替换后的结果 x.match(regxp)返回匹配字符串的数组 x.search(regxp)返回匹配字符串的首字母位置索引 regxp：代表正则表达式或者字符串 */ var v1 = "abc123abc"; var v2 = v1.search(/\d/); console.log(v2); </script> </head> <body> </body></html>脚注
对我而言，生活就是你所知和所能发现的一切
生活不易1.
- 我会一步一步往上爬. ↩
- JavaScript的用法01
- javascript的冒号用法
- javascript的createElement用法
- javascript typeof的用法
- javascript的用法
- FusionChart 的javascript 用法
- javascript typeof的用法
- javascript typeof的用法
- javascript typeof的用法
- javascript split的用法
- javascript typeof的用法
- Javascript的this用法
- javascript with 的用法
- javascript随机数的用法
- Javascript的一些用法
- Javascript的this用法
- JavaScript 的 delete 用法
- Javascript的this用法
- C语言程序从高级语言到二进制的程序经过了哪些过程
- Java（3-4）
- 木棒上的蚂蚁
- Cookie 与 Session
- Ural 1277 Cops and Thieves(最小点割集/最小割)
- JavaScript的用法01
- 成长是什么？
- leetcode---path-sum---树
- brew install curl- (4) 错误
- (M)Dynamic Programming:64. Minimum Path Sum
- Spring--方法注入
- [JZOJ5394]【NOIP2017提高A组模拟10.5】Ping
- [Gym-101174K] [Problem K] 判环+ 码力+ 题意
- 2017年10月05日普及组 约数
