JavaScript 简述-入门

最新推荐文章于 2024-07-04 19:54:18 发布

郭大帅

最新推荐文章于 2024-07-04 19:54:18 发布

阅读量154

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_42225318/article/details/80750799

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript介绍

JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解释执行的。

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

JavaScript嵌入页面的方式

1. 行间事件(主要用于事件)

<input type="button" name="" οnclick="alert('ok！');">

2.页面script 标签嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

3.外部引入, 创建.js 文件通过link 标签引入;

<script type="text/javascript" src="js/index.js"></script>

JavaScript中变量、数据类型及基本语法规范

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

 var iNum = 123;
 var sTr = 'asd';

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

 var iNum = 45,sTr='qwe',sCount='68';

变量数据类型分为基本数据类型和复合数据类型;其中有5中基本数据类型如下:

1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined

5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

和1中复合数据类型 :object

JavaScript 的基本语法可缩进也可不缩进,缩进是为了方便代码阅读,结尾处必须以";"结尾;

JavaScript 的注释: // 表示单行注释 /* */ 表示多行注释

JavaScript中变量,函数,属性,参数等命名规格:

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

3、其他字符可以是字母、下划线、美元符或数字

其中可以参考匈牙利命名风格：

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

JavaScript中的函数

函数就是重复执行的代码片。函数的定义与执行: function 关键字

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

变量与函数预解析

JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

<script type="text/javascript">    
    fnAlert();       // 弹出 hello！
    alert(iNum);  // 弹出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
</script>

函数'return'关键字
函数中'return'关键字的作用：
1、返回函数中的值或者对象
2、结束函数的运行

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert('here!');
}

var iCount = fnAdd(3,4);
alert(iCount);  //弹出7
</script>

JavaScript中的条件语句

通过条件来控制程序的走向，就需要用到条件语句。

条件运算符
==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

if ... else... 格式

if ... else if ....else .... 格式

JavaScript中获取元素方法

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量 ; 如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

方案一: 将script 写在div 下面就可以解决问题;

....
<div id="div1">这是一个div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

方案二: 将script 语句放在window.onload =function(){} 触发的匿名函数中执行,获取元素语句会在页面加载完成之后在执行, 就不会报错了;

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">这是一个div元素</div>

JavaScript中操作元素属性

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

操作元素属性格式:
var 变量 = 元素.属性名读取属性

元素.属性名 = 新属性值改写属性

属性名在js中的写法

1、html的属性和js里面属性写法一样

2、“class” 属性写成 “className”

3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize"

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

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.baidu.cn" id="link1">百度首页</a>

JavaScript中事件属性及匿名函数

事件属性
元素上除了有样式，id等属性外，还有事件属性，常用的事件属性有鼠标点击事件属性(onclick)，鼠标移入事件属性(mouseover),鼠标移出事件属性(mouseout),将函数名称赋值给元素事件属性，可以将事件和函数关联起来。

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');

    oBtn.onclick = myalert;

    function myalert(){
        alert('ok!');
    }
}

</script>

匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式。

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    // 直接将匿名函数赋值给绑定的事件

    oBtn.onclick = function (){
        alert('ok!');
    }
}

</script>