您的位置：首页 > Web前端 > JavaScript

JavaScript基础（一）

2018-06-11 21:25 197 查看
一：JavaScript简介与数据类型        JavaScript 是一种弱类型的脚本编程语言。
        JavaScript数据类型：string 字符串、boonlean布尔、number数字，undefineda、null、object
        判断数据的类型使用：typeof（数据）
二：JavaScript的组成结构        JavaScript由三部分组成：ECMAscript、DOM、BOM。
        ECMAScript是一种标准，规定了JavaScript的语法、数据类型、保留关键字等
        DOM：document object model，文档对象模型
        BOM：Browser Object Model  ， 浏览器对象模型
三：DOM模型中常用操作：        document对象常用方法：
         1.  getElementByID(“元素id”)   //  通过元素获取某个
         2.  getElementsByName("元素的name") // 通过元素的标签名获取一组元素
        3.   getElementsByTagName（“元素标签名” ） //通过元素的标签名获取一组元素，
获取到的元素也就是DOM对象，根据DOM对象关联的html元素，DOM对象也有相关的属性。当DOM对象关联的html元素之间可以添加其他内容时候，可以使用DOM对象的innerHTML属性设置之间的内容

dom对象的方法：dom对象.setAttribute("属性名",“属性值”)  //设置dom对象的属性dom对象.getAttribute("属性名") // 通过属性名获取属性值
四：BOM模型         BOM模型中，window对象是顶级对象，代表浏览器。window对象有三个常用的三个附属对象：location（代表地址栏）、document（代表内容文档）、history（代表前进后退）         1.    location
                    属性： location的href属性用来设置地址栏的网址
                    方法： location的reload()方法用来刷新网页
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM中的location对象</title>
<script type="text/javascript">
function changeURL(){
// location对象的href属性决定了跳转路径
window.location.href="http://www.baidu.com"
​
}
function refresh(){
// location的reload()方法重新载入本网页
window.location.reload();
}
</script>
</head>
<body>
<input type="button" value="跳转" onclick="changeURL()"> <br>
<input type="button" value="刷新" onclick="refresh()"> <br>
</body>
</html>
          2.    history
                    方法：back（）后退至上一个页面
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history</title>
<script type="text/javascript">
function backTo(){
window.history.back()
​
}
</script>
</head>
<body>
<input type="button" value="后退" onclick="backTo()">
</body>
</html>
                                go（n） 前进n个页面，如果n为正，则前进，如果n为负 ，则后退
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript">
function goTo(){
window.history.go(1);
}
</script>
</head>
<body>
<a href="history.html">点击跳转至histor.html页面</a>
<input type="button" value="前进" onclick="goTo()">
</body>
</html>
        3.window对象代表浏览器，是BOM的顶级对象，系统函数就属于window对象。
    常用的系统函数：
    alert（"警告信息"） //弹出警告框
    confirm（“确认信息”）// 弹出确认框，返回一个boolean值
 
#确认信息
<title>confirm确认函数</title>
<script type="text/javascript">
function deleteContent(){
var isdelete = confirm("您真的要删除吗？！");
if (isdelete) {
document.getElementById("msg").innerHTML="";
}
}
</script>
</head>
<body>
<input type="button" value="点击删除" onclick="deleteContent()">
<div id="msg">好好学习，天天向上！</div>
</body>
</html>
prompt("提示信息","提示框中的默认内容") //返回用户的输入的内容parseInt（“要转换的字符串”） // 将指定字符串转换为整数parseFloat（“要转换的字符串“） // 将制定的字符串转换为小数 
#prompt,parseInt,parseFloat
<script type="text/javascript">
var s1 = prompt("请输入第一个数字：","");
var s2 = prompt("请输入第二个数字：","");
var num1 = parseInt(s1);   //这是转换成整数
var num2 = parseFloat(s2); //这是转换成小数
alert(num2+num1)
</script>    
​
setInterval("调用函数"，“间隔时间（以毫秒计算）”)：五：自定义函数注意：在JavaScript中函数也是对象 
function 函数名(参数列表) {
   函数体代码[可以通过return返回值]    
}
六、JavaScript操作CSS样式
         通过dom对象操作CSS样式：                dom对象.style.CSS属性名=属性值；

        常用CSS属性：
   backgroundColor  背景色
   visibility  可见性（隐藏后继续占用空间），有两个属性值：visible(显示)，hidden(隐藏)
   display （隐藏后不占用空间），有两个属性值：block（显示）、none（隐藏，不占用空间）
 
#函数文件 》》》》 myjs.js
function changeBackground(obj){
obj.style.backgroundColor="yellow";
}
​
function shouDiv(_id){
var div = document.getElementById(_id);
div.style.visibility="visible";
}
​
function hiddenDiv(_id){
var div = document.getElementById(_id);
div.style.visibility="hidden";
​
}
​
​
#网页部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="myjs.js"></script>
<style type="text/css">
#mydiv{
width: 100px;
height: 100px;
background-color: #aabbcc;
​
}
</style>
</head>
<body>
<div id="mydiv" onclick="changeBackground(this)"></div>
<input type="button" value="显示" onclick="shouDiv('mydiv')">
<input type="button" value="隐藏" onclick="hiddenDiv('mydiv')">
​
​
</body>
</html>
   七：对象的实例化与初始化            方式一：“空手套白狼”：                        通过Object“从无到有”地实例化一个对象。                          例如： var per=new Object();  // 实例化                                    per.name="tom";
                                    per.age="20";
                                    delete per.age; // 删除对象的某个属性
 
<script type="text/javascript">
var per=new Object();
per.name = "tom";
per.age=20;
per.getName=function (){
return this.name
};
per.getAge=function(){
return this.age;
};
alert("姓名："+per.name);
alert("年龄："+per.age);
alert(per.getName());
alert(per.getAge());
delete per.age; //删除对象的age属性
alert(per.age)
                方式二：通过函数模板来创建对象
 
#例如：创建person模板
function Person(name,age){
this.name = name || "令狐冲" ;
this.age = age || 20;
this.setName = function(new_name){
this.name  = new_name;
}
this.setAge = function(new_age){
this.age = new_age;
}
​
this.getName=function(){
return this.name;
}
this.getAge=function(){
return this.age;
}
}
var per = new Person();
per.setName("tom")
per.setAge(25)
alert(per.name)
alert(per.age)
                方式三：通过“字面量”方式
 
<script type="text/javascript">
var stu={"name":"alice","age":20,"sex":"girl","score":83.5}
for(var  key in stu){
alert(key+">>>>>>>>"+stu[key])
}
</script>
​





阅读更多
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航