JavaScript基础

JavaScript的位置

  • 内部脚本

javascript语句可以再head中也可以在body中,javascript可以写成函数的形式,在触发事件的时候调用函数就行

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>
<p id="demo">一个段落</p>        #id等于demo是为了精准的定位
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>

把脚本置于 <body> 元素的底部,可改善显示速度,因为脚本编译会拖慢显示

  • 外部脚本-外部文件的形式:
myScript.js:

function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}

外部脚本很实用,如果相同的脚本被用于许多不同的网页。
调用:

<!DOCTYPE html>
<html>
<body>  
<p id="demo">一个段落。</p>

<button type="button" onclick="myFunction()">试一试</button>
<p>(myFunction 存储在名为 "myScript.js" 的外部文件中。)</p>
<script src="/demo/myScript.js"></script>

#如果要使用外部脚本,要在<script>标签的src属性中设置脚本的路径和名称
#src中可以是url、可以是本机指定路径、可以是相同文件夹下的脚本
</body>
</html>

推荐使用外部脚本,外部脚本的优势:
1.分离了HTML和代码,使HTML和Javascript代码各自更容易阅读和维护
2.已缓存的JavaScript文件可加速页面加载

javascript语句(语句的;不是必要的)

javascript输出

JavaScript 不提供任何内建的打印或显示函数,但是可以使用其他方式显示数据:

  • window.alert()写入警告框
  • docunment.write()写入HTML输出

    在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
    document.write() 方法仅用于测试
    
  • innerHTML写入HTML元素

    document.getElementById(id).innerHTML
    #document.getElementById()用于访问HTML元素,innerHTML属性定义HTML内容
    
  • console.log()写入显示器控制台

关键字

break    终止 switch 或循环。
continue    跳出循环并在顶端开始。
debugger    停止执行 JavaScript,并调用调试函数(如果可用)。
do ... while    执行语句块,并在条件为真时重复代码块。
for    标记需被执行的语句块,只要条件为真。
function    声明函数。
if ... else    标记需被执行的语句块,根据某个条件。
return    退出函数。
switch    标记需被执行的语句块,根据不同的情况。
try ... catch    对语句块实现错误处理。
var    声明变量。

值,数据类型

字面量-数值、字符串(引号包裹)
变量(用var声明)

变量中能够保存的数据类型:数值、字符串值、数组、对象等等
var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组-类似python中的list
索引的时候使用cars[0]、cars[1]、cars[2]
var x = {firstName:"Bill", lastName:"Gates"};    // 对象-类似python中的dict
索引的时候使用x.firstname

#Undefined 与 null 的值相等,但类型不相等:
typeof undefined              // undefined
typeof null                   // object
typeof确定javascript变量的类型
null === undefined            // false
null == undefined             // true

对象、属性、方法

比如人是一个对象,人的体重、身高是属性,人的吃饭、走路是方法
所有人都有身高、体重,但是因人而异
所有人都可以吃饭、走路,但是在不同时间调用
people.tall = 180
people.eat()
字符串的属性和方法:
1.length 属性返回字符串的长度
2.indexOf()方法返回指定字符串中文本首次出现的索引(位置)
如var pos = str.indexOf("China")#pos返回"China"首次在字符串str中出现的位置
对应的还有lastindexOf()。相似的还有search(),无法设置索引位置
如果未找到文本均返回-1,接受第二个参数:索引位置
3.slice()、substr()、substring()用于截取字符串,参数有两个(start,end)
区别在于:slice可以接受参数负数,substring不能接受,substr第二个参数为长度
4.replace("被替代内容","替代内容")#//i不区分大小写,//g全局
5.toUpperCase()、toLowerCase()转换大小写
6.trim() 方法删除字符串两端的空白符
7.split() 将字符串转换为数组
var txt = "a,b,c,d,e";   // 字符串
var list = txt.split(",");  // 以,为分割符分割每个数组元素。可以以list[0]...索引
数字的属性和方法
1.toString() 以字符串返回数值
2.toFixed()返回字符串值,它包含了指定位数小数的数字#/toFixed(2)非常适合处理金钱
...
其他的属性和方法好像意义不大
数组的属性和方法
1.length属性返回数组长度#/可以使用arr[arr.lenth-1]访问arr数组中最后一个元素
2.push()方法添加新元素#/也可以对length下标赋值
3.tostring()方法将数组转换成字符串#/还可以使用jion(),在join中参数可以自己设置分隔符

4.pop() 方法从数组中删除最后一个元素,返回被删除的值
5.push() 方法(在数组结尾处)向数组添加一个新的元素,返回新数组的长度
6.shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引,返回被删除的值
7.unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素,返回新数组的长度

8.slice() 方法用于截取数组返回一个新数组
9.sort() 方法以字母顺序对数组进行排序

数组迭代方法:
1.forEach() 方法为每个数组元素调用一次函数(回调函数)#/forEach(function)

更多参考

事件(引入this的作用)

HTML事件可以是浏览器或者用户做的某些事情,且js允许事件被侦测到时执行某些代码

常见的事件:
onchange    HTML 元素已被改变
onclick    用户点击了 HTML 元素
onmouseover    用户把鼠标移动到 HTML 元素上
onmouseout    用户把鼠标移开 HTML 元素
onkeydown    用户按下键盘按键
onload    浏览器已经完成页面加载

eg:
<button id="demo" onclick="document.getElementById('demo').innerHTML=Date()">时间</button>
#onclick是一个事件,点击后执行document.getElementById('demo').innerHTML=Date()
<button onclick="this.innerHTML=Date()">时间</button>
#this关键词指的是它所属的对象

日期和数学

日期:
var d = new Date()    #Date对象由新的Date()构造函数创建,参数中可以自己设置格式
document.getElementById("demo").innerHTML = d.getTime()   #日期的获取方法

数学:
JavaScript Math 对象允许您对数字执行数学任务

秋名山车神
40 声望2 粉丝

« 上一篇
linux
下一篇 »
HTTP