JavaScript介绍--变量、操作元素属性、函数

JavaScript介绍

JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。

前端三大块
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

JavaScript嵌入页面的方式

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>js嵌入页面的方式</title>
 9 
10     <!-- 第三种嵌入js的方式：外链式   -->
11     <script type="text/javascript" src="hello.js"></script>
12 
13     <!-- 第二种嵌入js的方式：嵌入式   -->
14     <script type="text/javascript">
15         alert('hello again!')
16     </script>
17 
18 </head>
19 <body>
20 
21 <!-- 第一种嵌入js的方式：行间事件，不推荐使用   -->
22 <input type="button" name="" value="弹框" onclick="alert('hello!')">
23 
24 </body>
25 </html>

变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字 'var'

 var a = 123;
 var b = 'asd';

 //同时定义多个变量可以用","隔开，公用一个‘var’关键字

 var c = 45,d='qwe',f='68';

变量类型

5种基本数据类型：
number、string、boolean、undefined、null

1种复合类型：
object

变量、函数、属性、函数参数命名规范

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>js 基本语法/获取元素的方法</title>
 9 
10     <script type="text/javascript">
11         // var a=123;  单行注释
12         /* var b='hhhhhh'
13         var c=true;
14         var d;
15 
16         alert(a);*/
17 
18         // 第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
19         window.onload = function(){
20         document.getElementById('div1').title='看到了';
21         }
22 
23 
24     </script>
25 
26 
27 </head>
28 <body>
29 
30 <div id="div1" class="div1" title="这是div元素，看到了吗？">这是一个div元素</div>
31 
32 <!-- 第一种方法：将javascript放到页面最下边
33 <script type="text/javascript">
34     document.getElementById('div1').title='看到了';
35 </script>
36 -->
37 
38 </body>
39 </html>

操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

操作属性的方法
1、“.” 操作
2、“[ ]”操作

属性写法

1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

innerHTML
innerHTML可以读取或者写入标签包裹的内容

 1 <!doctype html>
 2 <html lang="`">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>js操作属性</title>
 9 
10     <script type="text/javascript">
11 
12         window.onload=function(){
13             var oDiv1=document.getElementById('div1');
14             oDiv1.title='看到啦'  //重新定义title
15 
16             var oLink1=document.getElementById('link1');
17             oLink1.href='https://www.baidu.com'   //重新定义href
18             oLink1.title='去到百度网'    //重新定义title
19             alert('oLink1')
20         }
21     </script>
22 </head>
23 <body>
24 
25     <div id="div1" class="div1" title="这是div元素，看到了吗？">这是一个div元素</div>
26     <a href="#" id="link1">百度网</a>
27 
28 </body>
29 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>换肤</title>
 9 
10     <link rel="stylesheet" href="1.css" type="text/css" id="link1">
11 
12     <script type="text/javascript">
13         window.onload=function(){
14             var oLink1=document.getElementById('link1');
15             oLink1.href='2.css';
16 
17             alert('oLink1')
18         }
19 
20     </script>
21 </head>
22 <body>
23 
24 <div class="div1"></div>
25 <div class="div2"></div>
26 </body>
27 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>js操作style属性</title>
 9 
10     <style type="text/css">
11          .box1{
12             width:200px;
13             height:200px;
14             background-color:green;
15          }
16 
17         .box2{
18             width:300px;
19             height:300px;
20             background-color:pink;
21         }
22     </style>
23 
24     <script type="text/javascript">
25 
26         // 当整个文档下载完后，再执行大括号内的语句
27         window.onload=function(){
28             var oDiv1=document.getElementById('div1');
29 
30             // style属性中的样式属性，没有“-”的，写法相同
31             //oDiv1.style.background='gold';
32             oDiv1.style.color='red';
33 
34             // style属性中的样式属性，带有“-”的，写成驼峰式
35             oDiv1.style.fontSize='30px';
36 
37             //“class” 属性写成 “className”
38             oDiv1.className='box2';
39         }
40 
41     </script>
42 </head>
43 <body>
44 
45 <div id="div1" class="box1">这是一个div元素</div>
46 
47 </body>
48 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>js中[]操作属性</title>
 9 
10     <script type="text/javascript">
11         window.onload=function(){
12             var oDiv1=document.getElementById('div1');
13             var attr='color';
14 
15             /* 通过 [] 操作属性可以写变量    */
16             // oDiv1.style[attr]='red';
17             oDiv1['style'][attr]='red';
18 
19             /* 通过 innerHTML可以读写元素包括的内容    */
20             alert(oDiv1.innerHTML)
21 
22             var oDiv2=document.getElementById('div2');
23             //oDiv2.innerHTML='这是第二个div元素';
24             oDiv2.innerHTML="<a href='http://www.baidu.com'>href<a>";
25         }
26 
27     </script>
28 </head>
29 <body>
30 
31 <div id="div1">这是一个div元素</div>
32 <div id="div2"></div>
33 </body>
34 </html>

函数

函数就是重复执行的代码片。

函数定义与执行

<script type="text/javascript">
    // 函数定义
    function aa(){
        alert('hello!');
    }
    // 函数执行
    aa();
</script>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>js函数-js控制换肤</title>
 9 
10     <link rel="stylesheet" type="text/css"  href="1.css" id="link1">
11 
12     <script type="text/javascript">
13 
14         window.onload=function(){
15             var obnt01=document.getElementById('bnt01');
16             var obnt02=document.getElementById('bnt02');
17 
18             obnt01.onclick=skin1;
19             obnt02.onclick=skin2;
20         }
21 
22         function skin1(){
23             var oLink1=document.getElementById('link1');
24             oLink1.href='1.css';
25         }
26 
27         function skin2(){
28             var oLink2=document.getElementById('link1');
29             oLink2.href='2.css';
30         }
31     </script>
32 </head>
33 <body>
34 
35 <!-- 行间调用函数
36 <input type="button" name="" value="皮肤1" onclick="skin1()" id="bnt01">
37 <input type="button" name="" value="皮肤2" onclick="skin2()" id="bnt02">
38 -->
39 
40 <input type="button" name="" value="皮肤1" id="bnt01">
41 <input type="button" name="" value="皮肤2" id="bnt02">
42 
43 <div class="div1"></div>
44 <div class="div2"></div>
45 
46 </body>
47 </html>

posted on 2019-12-10 22:25 cherry_ning 阅读(119) 评论(0) 收藏举报

刷新页面返回顶部

cherry_ning