java前端技术---javaScript使用详解(基础篇)

一前言

   JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。这篇文章有点长,但是有需要的可以耐心看完

web前端的必须学会的三技术:

• HTML 定义了网页的内容
• CSS 描述了网页的布局
• JavaScript 网页的行为

二javaScript的功能

1.直接写入 HTML 输出流

例:

2.对事件的反应

例:

点我!

注:alert在script中不常用,但是在代码测试中挺有用处

3.改变网页的内容

例:

JavaScript 能改变 HTML 元素的内容。

点击这里

4.改变html图像

例:

点击灯泡就可以打开或关闭这盏灯

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 样式

例:

JavaScript 能改变 HTML 元素的样式。


点击这里

6.验证输入

例:

输入如果不是数字,则弹出提示

点击这里

三.javaScript的输出

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台。

//使用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);

我们来看个例子:

<%='A'+'B'%>
点击这里

点击之前在页面显示的是131 即字母A与字母B的ascall值相加

点击之后会跳出AB 窗口,并且页面显示会AB,document.write会把之前的内容给覆盖掉

我们再来看一个例子:

当用==时候浏览器会对A及B进行值的判断，因为两者都没有具体的值，认为他们都是false。

当用===全等号的时候要求他们的数据类型跟值都要相同才可以

四.最常用的对象创建方式

五.javaScript函数

(1)带参数的函数的调用

例子:

点击这里

(2)有返回值的函数

本例调用的函数会执行一个计算，然后返回结果：

(3)函数return的作用

六.javaScript的作用域

局部变量:只能在函数内部访问

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。 

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。 以下实例中 carName 在函数内，但是为全局变量。

全局变量在页面关闭后销毁

七.javaScript事件

• HTML 页面完成加载
• HTML input 字段改变时
• HTML 按钮被点击

现在的时间是?
现在的时间是?//直接在按钮上显示
现在的时间是?

常见的JavaScript事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

七JavaScript 字符串

字符串是用来存储和处理文本的

1.创建字符串并访问里面的字符

下标从0开始,空格占一个字符

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)
{
    被执行的代码块
}

for/in循环 就是java里的foreach,写法有点区别

点击这里

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 + "
"; 结果是1.2.3
}

for (i=0;i<=10;i++)
{
    if (i==3) continue;
    x=x + "The number is " + i + "
";结果是除了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中字符串你直接回车分行是错误的

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.程序块作用域

新手看到这个可能会觉得纳闷,为啥能输出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(字符串)

json---->字符串

JSON.stringify(json对象)

var str = {"name":"中国", "englis":"china"}
str_pretty1 = JSON.stringify(str)

十二.javaScript void

点我没有反应的!
点我定位到指定位置!


...


尾部定位点