Javascript(一)
2017-12-07 16:54
148 查看
一、JavaScript 简介
JavaScript 是脚本语言
JavaScript 主要内容：
二、JavaScript 用法
三、弹出信息框
(1)警告框:alert()
(2)确认框：confirm()
(3)输入框：prompt(提示信息，默认值)
四、JavaScript 输出
JavaScript 可以通过不同的方式来输出数据：
(1)使用 window.alert() 弹出警告框。
(2)使用 document.write() 方法将内容写到 HTML 文档中。
(3)使用 innerHTML 写入到 HTML 元素。
获取节点：
document.getElementById(id)：访问某个HTML中”id” 属性来标识的元素，并用 innerHTML 来获取或插入元素内容
document.getElementsByClassName(“”)[]通过class名来获取内容
document.getElementsByTagName(“”)[]通过HTML中的标签名获取内容
innerHTML获取document所获取对象中的所有元素
innerText获取document所获取对象中的纯文本
value获取表单内容
(4)使用 console.log() 写入到浏览器的控制台。
在谷歌浏览器页面中按下F12键，点击Console
五、JavaScript 数据类型
字符串（String） 数字(Number) 布尔(Boolean) 数组(Array) 对象(Object) 空（Null ) 未定义（Undefined）
typeof() 检测数据类型
(1)JavaScript 字符串
(2)JavaScript 数字
(3)JavaScript 布尔
(4)JavaScript 数组
普通数组调用方式：数组名[索引值] //car[0]
var obj={a:1,b:2,c:3}
(5)JavaScript 对象
普通对象调用方式：对象名.键值名 //obj.a
var obj=[{a:1,b:2},{a:3,b:4},{a:3,b:1}]
复杂对象调用方式：对象名[索引值].键值名 //obj[0].a
(6)Undefined 和 Null
六、JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数的定义：function 函数名() {执行语句}
函数的调用：触发的事件=“函数名()”
带参函数：function 函数名(a,b){执行语句}
七、JavaScript 作用域
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
八、运算符
(1)算术运算符
x=7,y=5,z=7
a++和++a区别：区别在赋值时，a++ 先赋值后自加，++a 先自加，后赋值
(2)赋值运算符
+号: 功能1，连接功能
功能2，数据相加
(3)比较运算符
比较运算符结果一般都为布尔值（true/false）
(4)逻辑运算符
(5)条件运算符（三目运算符）
语法： （条件）?”条件成立时输出的值”:”条件不成立时输出的值”
九、if语句
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
十、switch语句
首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
十一、for循环
十二、while循环
do/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。
语法
十三、JavaScript 类型转换
parseInt()强制转换为整型
parseFloat()强制转换为浮点型
Number()转换为数字型
String()转换为字符串
Boolean()转换为布尔型
tostring()进制转换
obj.getAttribute(“属性名”) 获取属性内容
obj.setAttribute(“属性名”，“新的属性值”) 设置属性值
obj.toFixed(n) 保留小数位数 n是大于0的整数 n表示小数位数个数
十四、Math对象
1、Math.round() 四舍五入返回整数
2、Math.PI 表示π
3、Math.random() 随机数： 表示0到1之间的随机数
4、Math.ceil() 向上舍入
5、Math.floor() 向下舍入
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。
JavaScript 主要内容：
直接写入HTML输出流 对事件的反应 改变HTML内容 改变HTML图像 改变HTML样式 验证输入
二、JavaScript 用法
(1)HTML 中的脚本必须位于<script>与</script>标签之间。 (2)脚本可被放置在HTML页面的<body>和<head>部分中。 (3)也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件。
三、弹出信息框
(1)警告框:alert()
<body>
<script>
alert("这是一个测试")
</script>
</body>(2)确认框：confirm()
<script>
confirm("确认提交吗？")
</script>(3)输入框：prompt(提示信息，默认值)
<script>
prompt("请输入年龄",18)
</script>四、JavaScript 输出
JavaScript 可以通过不同的方式来输出数据：
(1)使用 window.alert() 弹出警告框。
(2)使用 document.write() 方法将内容写到 HTML 文档中。
<script>
document.write("Hello,world");
</script>(3)使用 innerHTML 写入到 HTML 元素。
获取节点：
document.getElementById(id)：访问某个HTML中”id” 属性来标识的元素，并用 innerHTML 来获取或插入元素内容
document.getElementsByClassName(“”)[]通过class名来获取内容
document.getElementsByTagName(“”)[]通过HTML中的标签名获取内容
innerHTML获取document所获取对象中的所有元素
innerText获取document所获取对象中的纯文本
value获取表单内容
<body>
<ul>
<li id="one" onclick="show()">aaaaa <a href="">百度</a></li>
</ul>
<script>
function show(){
alert(document.getElementById("one").innerText)
}
</script>
</body><body>
<ul>
<li id="one" onclick="show()">aaaaa <a href="">百度</a></li>
</ul>
<script>
function show(){
alert(document.getElementById("one").innerHTML)
}
</script>
</body>(4)使用 console.log() 写入到浏览器的控制台。
<script>
console.log("zhangsan")
</script>在谷歌浏览器页面中按下F12键，点击Console
五、JavaScript 数据类型
字符串（String） 数字(Number) 布尔(Boolean) 数组(Array) 对象(Object) 空（Null ) 未定义（Undefined）
typeof() 检测数据类型
(1)JavaScript 字符串
字符串是存储字符（比如 "Bill Gates"）的变量 字符串可以是引号中的任意文本,可以使用单引号或双引号
(2)JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带 极大或极小的数字可以通过科学（指数）计数法来书写：var y=123e5;// 12300000
(3)JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。布尔常用在条件测试中 var x=true;var y=false;
(4)JavaScript 数组
var z=[1,3,5,7,0]; 数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。
普通数组调用方式：数组名[索引值] //car[0]
var obj={a:1,b:2,c:3}
(5)JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
var info={
name:"zhangsan", sex:"男",age:15
}普通对象调用方式：对象名.键值名 //obj.a
var obj=[{a:1,b:2},{a:3,b:4},{a:3,b:1}]
复杂对象调用方式：对象名[索引值].键值名 //obj[0].a
<script>
var info=[
{
name:"zhangsan", sex:"男",age:15
},
{
name:"lisi", sex:"女",age:20
},
{
name:"王五", sex:"男",age:18
}
]
alert(info[1].age+" "+info[0].name)(6)Undefined 和 Null
Undefined 这个值表示变量不含有值。 可以通过将变量的值设置为 null 来清空变量。
六、JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数的定义：function 函数名() {执行语句}
函数的调用：触发的事件=“函数名()”
触发事件：onclick 鼠标点击时触发 onmouseover 鼠标悬停时触发 onmouseout 鼠标离开时触发 onmousemove 鼠标移动时触发 onkeydown 键盘按下时触发 onchange HTML 元素改变 onload 浏览器已完成页面的加载
带参函数：function 函数名(a,b){执行语句}
<body>
<button onclick="sum(3,4)">计算</button><!--带参函数的调用，3、4为实参-->
<script>
function sum(x,y){
var z;
z=x+y;
alert(z)
}/*定义带参函数，x、y为形参*/
</script>
</body>七、JavaScript 作用域
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
局部变量：只能在函数内部访问，在函数执行结束后，自行销毁 全局变量：网页中所有脚本和函数均可使用，在页面关闭后销毁
八、运算符
(1)算术运算符
+ 加法 - 减法 * 乘法 / 除法 % 取模（余数） ++ 自增 x=++y x=y++ -- 自减 x=--y x=y--
<script> var x= 5, y=x++, z=++x; alert(x); alert(y); alert(z); </script>
x=7,y=5,z=7
a++和++a区别：区别在赋值时，a++ 先赋值后自加，++a 先自加，后赋值
(2)赋值运算符
= x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y
+号: 功能1，连接功能
功能2，数据相加
(3)比较运算符
== 等于 === 绝对等于 ！= 不等于 ！== 绝对不等于 > 大于 < 小于 >= 大于等于 <= 小于等于
比较运算符结果一般都为布尔值（true/false）
(4)逻辑运算符
&& 与 (x < 10 && y > 1) 为 true || 或 (x==5 || y==5) 为 false ! 非 !(x==y) 为 true
(5)条件运算符（三目运算符）
语法： （条件）?”条件成立时输出的值”:”条件不成立时输出的值”
九、if语句
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
<script>
var money=prompt("请输入您的年收入",10);
if(money>=10){
document.write("您可以买汽车")
}else{
if(money>=6){
document.write("您可以买电动车")
}else{
if(money>=3){
document.write("您可以买自行车")
}else{
document.write("您只能坐11路了")
}
}
}
</script>十、switch语句
首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
<script>
var n=parseInt(prompt("请输入一个星期",0));
switch(n){
case 0:document.write("今天是星期天");
break;/*break为直接跳出循环，continue为从当前值跳出*/
case 1:document.write("今天是星期一");
break;
case 2:document.write("今天是星期二");
break;
case 3:document.write("今天是星期三");
break;
case 4:document.write("今天是星期四");
break;
case 5:document.write("今天是星期五");
break;
case 6:document.write("今天是星期六");
break;
default :document.write("请输入正确的星期")
}
</script>十一、for循环
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}语句 1 （代码块）开始前执行 starts. 语句 2 定义运行循环（代码块）的条件 语句 3 在循环（代码块）已被执行之后执行
<script>
var car=["奥迪","长安福特","大众","丰田","路虎"];
for(var i=0;i<5;i++){
document.write(car[i]+"</br>")
}
</script>十二、while循环
while (条件)
{
需要执行的代码
}do/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。
语法
do
{
需要执行的代码
}
while (条件);十三、JavaScript 类型转换
parseInt()强制转换为整型
parseFloat()强制转换为浮点型
Number()转换为数字型
String()转换为字符串
Boolean()转换为布尔型
tostring()进制转换
.toString() 转换进制// obj.toString(16) /.toString(8) /.toString(2)
obj.getAttribute(“属性名”) 获取属性内容
obj.setAttribute(“属性名”，“新的属性值”) 设置属性值
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<script>
document.getElementsByTagName("a")[0].setAttribute("href","http://www.hao123.com");
alert(document.getElementsByTagName("a")[0].getAttribute("href"));
</script>
</body>obj.toFixed(n) 保留小数位数 n是大于0的整数 n表示小数位数个数
十四、Math对象
1、Math.round() 四舍五入返回整数
2、Math.PI 表示π
3、Math.random() 随机数： 表示0到1之间的随机数
4、Math.ceil() 向上舍入
5、Math.floor() 向下舍入
<script> var x=34.63456; /*alert(Math.round(x))*/ console.log(Math.ceil(x)) console.log(Math.floor(x)) </script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 深入学习JavaScript: apply 方法 详解(转)
- JavaScript 的性能优化：加载和执行
- JavaScript完整性检查
- JavaScript之实现一个简单的Vue
- JavaScript 图表库 xCharts
- Javascript 三级联动
- b/s开发常用javaScript技术
- 暂寄一个Javascript去除左右空格的例子,不用浪费时间每次都写.
- 浅谈JavaScript、ES5、ES6
- 这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已
- Javascript倒计时 支持自定义样式
- 【javascript中的window.onload() 和 jquery中的 $(document).ready()】
- 访问本页面,您的浏览器需要支持JavaScript
- javascript时钟程序
- javascript基础：内置函数、自定义函数
- 【高性能JavaScript】读书笔记 - 算法和流程控制（一） - 08
- Javascript教程，javascript入门,javascript学习笔记(经典实例)
- 递归算法在javascript中使用的小技巧 (javascript的对象封装方法介绍)
- javascript--苹果系统底部菜单--详细分析（转）
- 深入探密Javascript数组方法