一前言
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。这篇文章有点长,但是有需要的可以耐心看完
web前端的必须学会的三技术:
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
二javaScript的功能
1.直接写入 HTML 输出流
例:
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>例:<button type="button" οnclick="alert('欢迎!')">点我!</button>
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" οnclick="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" οnclick="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" οnclick="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" οnclick="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调试的时候会在控制台看到结果
<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" οnclick="myFunction()">点击这里</button>点击之前在页面显示的是131 即字母A与字母B的ascall值相加
点击之后会跳出AB 窗口,并且页面显示会AB,document.write会把之前的内容给覆盖掉
我们再来看一个例子:
<script type="text/javascript">
function myFunction(){
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());//输出的是jack alert(one.firstF);//输出的是括号里的内容 alert(one.name);
</script>五.javaScript函数
(1)带参数的函数的调用
例子:
<button οnclick="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 οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<button οnclick="this.innerHTML=Date()">现在的时间是?</button>//直接在按钮上显示
<button οnclick="display()">现在的时间是?</button>
</body>| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
七JavaScript 字符串
字符串是用来存储和处理文本的
1.创建字符串并访问里面的字符
<script type="text/javascript">
var a="我 爱你中国123";
alert(a[0]);
</script>2.如何在里面使用转义字符
| 代码 | 输出 |
|---|---|
| \' | 单引号 |
| \" | 双引号 |
| \\ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
3.字符串常用的方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| 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" 数值与字符串先相加直接变字符串
数字和布尔值相加，布尔值 false 转成 0，true 转成 1
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)
{
被执行的代码块
}<button οnclick="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 (条件);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进行换行
for和function不同，for中变量的作用域是上一级function或者全局，而function中变量的作用域是function内部。所以for循环后，i是继续存在的。
4.程序块作用域
for和function不同，for中变量的作用域是上一级function或者全局，而function中变量的作用域是function内部。所以for循环后，i是继续存在的。
<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
因为再执行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.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>
3587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
