java前端技术---javaScript使用详解(基础篇)
2017-08-29 10:42
501 查看
一前言
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。这篇文章有点长,但是有需要的可以耐心看完web前端的必须学会的三技术:
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
二javaScript的功能
1.直接写入 HTML 输出流例:
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>2.对事件的反应
例:
<button type="button" onclick="alert('欢迎!')">点我!</button>注:alert在script中不常用,但是在代码测试中挺有用处3.改变网页的内容
例:
<script type="text/javascript">
function myFunction(){
var x=document.getElementById("demo");
x.innerHTML="测试成功";
}
</script>
<body>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>4.改变html图像
例:
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))第一次点击不匹配,为false,图片变bulbon,第二次点击匹配图片变bulboff,如此循环
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()"
src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>Src路径里有bulbon这个单词匹配则为true.如果一开始的图片是/i/eg_bulbon.gif，那么就会匹配到bulbon，if语句为ture，执行if语句，图片转换为/i/eg_bulboff.gif；如果没匹配到bulbon，执行else语句，图片转换为/i/eg_bulbon.gif。这样就实现了用js对html图片的改变
5.改变 HTML 样式
例:
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>6.验证输入
例:
<script type="text/javascript">
function myFunction(){
var x=document.getElementById("demo").value;
if (x==""||isNaN(x)) {//如果为非数字则为true
alert("输入错误")
}
}
</script>
<body>
<p>输入如果不是数字,则弹出提示</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">点击这里</button>三.javaScript的输出
JavaScript 可以通过不同的方式来输出数据：使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
<script> a = 5; b = 6; c = a + b; console.log(c); </script>//使用f12调试的时候会在控制台看到结果
alert与console.log(c)的作用一般是用在调试javascript,区别:console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
四.javaScript的语法
javaScript的四种数据类型:var length = 16; // Number 通过数字字面量赋值
当数据太长可以用科学计数法:比如 var a=123e5代表的是 123*10的五次方
var a=123e-5代表的是123*10的负5次方即0.00123
var points = x * 10;// Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];// Array 通过数组字面量赋值//获取方法 例:alert(cars[0]);
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值//获取方法
例:alert(person.firstName);
我们来看个例子:
<script type="text/javascript">
function myFunction(){
document.write('A'+'B');
alert('A'+'B');
}
</script>
<body>
<%='A'+'B'%>
<button type="button" onclick="myFunction()">点击这里</button>点击之前在页面显示的是131 即字母A与字母B的ascall值相加
点击之后会跳出AB 窗口,并且页面显示会AB,document.write会把之前的内容给覆盖掉
我们再来看一个例子:
<script type="text/javascript">
function myFunction(){
4000
var A=null;
var B;alert(A)//弹出null
alert(B)//undefined alert(A==B);//true alert(A===B);//false } </script>
当用==时候浏览器会对A及B进行值的判断，因为两者都没有具体的值，认为他们都是false。
当用===全等号的时候要求他们的数据类型跟值都要相同才可以
四.最常用的对象创建方式
<script type="text/javascript">
function Demo() {
var obj = new Object();
obj.name = "张思";
obj.age = 12;
obj.firstF = function() {
var firstName="jack";
return firstName;
}
obj.secondF = function() {
}
return obj;
}
var one = Demo();
alert(one.firstF());//输出的是jackalert(one.firstF);//输出的是括号里的内容
alert(one.name); </script>
五.javaScript函数
(1)带参数的函数的调用例子:
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>(2)有返回值的函数<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>(3)函数return的作用
<script type="text/javascript">
function myFunction(a,b){
return a*b;
}
return;//下面就不会再执行了
document.getElementById("demo").innerHTML=myFunction(4,8);
</script>六.javaScript的作用域
局部变量:只能在函数内部访问<script type="text/javascript">
myFunction();
document.getElementById("demo").innerHTML = "carName 的类型是：" + typeof carName;
function myFunction()
{
var carName = "Volvo";
}
</script>因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction()
{
document.getElementById("demo").innerHTML =
"我可以显示 " + carName;
}
</script>如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。 以下实例中 carName 在函数内，但是为全局变量。
<script type="text/javascript">
myFunction();
document.getElementById("demo").innerHTML =
"我可以显示 " + carName;
function myFunction()
{
carName = "Volvo";
}
</script>全局变量在页面关闭后销毁七.javaScript事件
HTML 页面完成加载HTML input 字段改变时
HTML 按钮被点击
<p id="demo"></p>
<script type="text/javascript">
function display(){
document.getElementById('demo').innerHTML=Date();
}
</script>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>//直接在按钮上显示
<button onclick="display()">现在的时间是?</button>
</body>常见的JavaScript事件| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
七JavaScript 字符串
字符串是用来存储和处理文本的1.创建字符串并访问里面的字符
<script type="text/javascript"> var a="我 爱你中国123"; alert(a[0]); </script>下标从0开始,空格占一个字符
2.如何在里面使用转义字符
| 代码 | 输出 |
|---|---|
| \' | 单引号 |
| \" | 双引号 |
| \\ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置< 10d91 /td> |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
八javaScript运算符
字符串与布尔值相加，布尔值转化成字符串。var result1=5+5+"abc"; //结果将是"10abc" 左边数值型先相加得到10然后与字符串相加变字符串型
var result2= ""+5+5+"abc"; //结果将是"55abc" 数值与字符串先相加直接变字符串
var one=13; var two=true; var three=one+two; // 结果 three:14
字符串与布尔值相加，布尔值转化成字符串。
九.javaScript常用函数
跟java程序的函数是一样的,就不细细说了1.javaScript条件语句
在 JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
2.switch 语句
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}3.for循环
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}for/in循环 就是java里的foreach,写法有点区别
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){ //对比:for(对象类型 a:要遍历的数组或者集合){}
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>4.while语句
while:
while (条件) { 需要执行的代码 }do/while:do
{
需要执行的代码
}
while (条件);5.Break与continue
for (i=0;i<10;i++)
{
if (i==3) break;
x=x + "The number is " + i + "<br>"; 结果是1.2.3
}for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";结果是除了3
}所以区别就是,一个停止循环,一个在某个节骨眼停止后还会继续后面的十.javaScript常见使用误区
1.浮点数运算所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：
var x = 0.1;
var y = 0.2;
var z = x + y
// z 的结果为 0.3 if (z == 0.3) // 返回 false
要想解决这个问题,可以这样
(x*10+y*10)/10
2.字符串分行
在javaScript中字符串你直接回车分行是错误的
<script>
alert("你好
哦");\\错误
alert("你好 \
哦");\\正确
</script>3.Return 语句使用注意事项
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var
power = 10;
return a * power;//550
}与
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var
power = 10;
return
a * power;//undefined
}由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。所以不用对return进行换行
for和function不同，for中变量的作用域是上一级function或者全局，而function中变量的作用域是function内部。所以for循环后，i是继续存在的。
4.程序块作用域
<script>
for (var i = 0; i < 10; i++) {
// some code
alert(i);
}
document.getElementById("demo").innerHTML = i;//输出的是10
</script>新手看到这个可能会觉得纳闷,为啥能输出10,那么我来分析下吧
1.在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。
不像function函数一样,作用在内部
2.为什么不是9而是10呢?
因为再执行9之后,还要进行一次i++,所以结果是10
十一.javaScript的json对象
JSON 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据
JSON 语法规则:
数据为 键/值 对。
数据由逗号分隔。
大括号保存对象
方括号保存数组
json对象:{"name":"Runoob", "url":"www.runoob.com"}
json数组:"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]
sites对象时一个数组,包含了三个对象.
json与字符串的互相转换
字符串---->json
JSON.parse(字符串)
<script>
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
//注意:引号一定要打对地方,格式必须要正确
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>json---->字符串
JSON.stringify(json对象)
var str = {"name":"中国", "englis":"china"}
str_pretty1 = JSON.stringify(str)十二.javaScript void
<a href="javascript:void(0);">点我没有反应的!</a> <a href="#pos">点我定位到指定位置!</a> <br> ... <br> <p id="pos">尾部定位点</p>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java前端技术---javaScript使用详解(应用篇)
- 程序员进阶路上不能错过的史上最全技术知识图谱秘籍 #精选大数据前端开发JAVA 今天在技术大海中游啊游游啊游，哇啊哈哈 ^_^发现了一份非常有用的超级技术图谱诶！
- java学习基础篇之WEB开发中常用Jsp/Bean相关技术总结(转)
- java基础篇---I/O技术(二)
- 前端技术基础篇
- java基础篇---I/O技术(三)
- Java - 你用过的网站前端优化的技术有哪些？
- java基础篇---新I/O技术(NIO)
- java笔记：熟练掌握线程技术---基础篇之解决资源共享的问题（中）--下篇
- Java核心技术基础篇 第四章 类与对象 阅读笔记
- Java前端技术学习
- 京东商城技术架构：前端.NET后端Java
- 京东商城技术架构：前端.NET后端Java
- JAVA 开发平台的技术和框架（二）前端控制器：Struts2 ,Spring MVC
- 京东商城技术架构：前端.NET后端Java
- java笔记：熟练掌握线程技术---基础篇之线程的协作和死锁的问题（下）
- java后台返回前端数据的方式json,html 组装json的技术struts2-json-plugin,fast-json,Gson,手动拼接
- 从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析
- JAVA 开发平台的技术和框架（一）Web前端