javascript最基础、最直观入门姿势

最新推荐文章于 2024-09-02 22:30:13 发布

糖送圆茗亲

最新推荐文章于 2024-09-02 22:30:13 发布

阅读量153

点赞数

分类专栏：学习文章标签： javascript 入门 js 脚本语言

本文链接：https://blog.csdn.net/wangyc1234/article/details/99674980

版权

学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Javascript初学基础(一)

最近我也在学js，所有将这些基础内容稍微整理了一下，确保每一个部分都有示例
但是由于我之前接触过一点js相关的内容，不是每一个点都那么详细，所有这篇文章适合有一点计算机语言基础的同学阅读，但是能保证内容能被人看懂
有些地方我按照的是自己的理解方式来写的，有什么不对的地方还望各位大神指出，谢谢~

javascript用法

页面内部的javascript

HTMl中的脚本须放在< script> < /script>标签中，而标签可放在< head>和< body>部分

<script>
    alert("警告窗内容...")
</script>

< body>中的javascript

<html>
    <head>
        <title>...</title>
    </head>
    <body>
        .
        .
        <script>
        	document.write("<h2>标题2</h2>");
            document.write("<p>Hello World!");
        </script>
        .
        .
    </body>
</html>

以上javascript会在页面加载时执行，若我们需要在某个事件发生时执行javascript代码，则可把javascript放入函数中

简单函数例子

<!DOCTYPE html>
<html>
    <head>
        <title>...</title>
        <script>
            function mfunc(){
                document.getElementById("mp").innerHTML="<b>加粗文本</b>";
            }
        </script>
    </head>
    <body>
        <p id="mp">正常段落文本</p>
        <button onclick="mfunc()">加粗</button>
    </body>
</html>

上面的< script>可放在< head>中，也可放在< body>中

引用外部javascript

可把一段脚本代码放在外部文件中，文件扩展名为 .js

以下是引用稳步脚本文件的示例

<!DOCTYPE html>
<html>
    <head>
        <title>...</title>
        <script src="./sample.js"></script>
        <script>
            function mfunc(){
                document.getElementById("mp").innerHTML="<b>加粗文本</b>";
            }
        </script>
    </head>
    <body>
        <p id="mp">正常段落文本</p>
        <button onclick="mfunc()">加粗</button>
        <button onclick="yfunc()">正常</button>
    </body>
</html>

sample.js

function yfunc(){
    document.getElementById("mp").innerHTML="正常文本";
}

javascript输出

javascript没有任何打印或者输出的函数，它通过不同的方式来输出数据

使用window.alert()弹出警告框
使用document.write()将内容写到html文档
使用innerHTML将内容写到html的元素中
使用console.log将内容写到浏览器的控制台

window.alert() 可将window省略，只保留alert()

<html>
    <body>
        <script>
            window.alert(1+1);
        </script>
        
        <script>
        	alert(2+2);
        </script>
    </body>
</html>

innerHTML操作html元素

document.getElementById()、document.getElementByClassName()先获取元素，再获取innerHTML或改变innerHTML

<html> 
<body> 
<p id="demo">我的第一个段落</p> 
<script> 
document.getElementById("demo").innerHTML = "段落已修改。"; 
</script> 
</body> 
</html>

document.wirte()写到html文档

<html>
    <body>
        <script>
        	document.write("<h2>标题2</h2>");
            document.write("<p>Hello World!");
        </script>
    </body>
</html>

document.write()仅向文档输出写内容，若在整个html文档已经加载完成后执行document.write()，则整个文档会被重写覆盖

<html>
    <body>
        <h2>哈哈</h2>
        <h3>哈哈哈</h3>
        <button onclick="document.write(Date());">显示时间</button>
    </body>
</html>

写到控制台

<html> 
	<body> 
        <h3>写到控制台</h3>
		<script> 
			a = 5; 
			b = 6; 
			c = a + b; 
			console.log(c); 
		</script>
	</body> 
</html>

javascript代码是由上而下顺序执行的

javascript变量、数据类型

javascript中的变量可按java中的变量来理解，不过稍有不同，声明变量使用关键字var

变量的命名应遵循驼峰法规则

数据类型

var A;	//未确定类型Undefined

//只有一种数字类型，可带小数段，也可不带
var a = 10;	//数字类型Number
var b = 28.99;	//数字类型Number

var c = "javasctipt VBscript";	//字符串类型String

//布尔类型Boolean，只有两个值，true & false
var d = true;
var f = false;

//数组Array，三种声明方式
var list = new Array();
list[0] = "small";
list[1] = "medium";
list[2] = "big";

var list = new Array("small", "medium", "big");

var list = ["small", "medium", "big"];		//最简单、最常用方式

//对象Object，由花括号分隔，对象的属性以键值对的形式(key:value)来定义，属性以逗号分隔
var student = {id:101, name:"tsymq", age:18};

var student = {
    id:101,
    name:"tsymq",
    age:18
};
//对象的属性有两种检索方式
name = student.name;
name = student["name"];

//Undefined和Null类型，Undefined不含有任何值，可以通过null来清空变量
list = null;
student = null;

声明变量的同时声明其类型

var num = new Number;
var str = new String;
var arr = new Array;
var bol = new Boolean;
var obj = new Object;

javascript变量均为对象，当声明一个变量时，就创建了一个新的对象

javascript未使用var声明的变量将成为全局变量，具体内容见下一部分

javascript函数

函数是由事件驱动的或当它被调用时执行的可重复使用的代码块

定义函数使用function关键字

function functionname([参数列表]){
    //执行代码;
}

函数定义的三种方式

//静态方法
function functionName([argsList]){
    //function body;
    //可返回值，也可不返回值，类似java，只是javascript在声明函数时无返回类型的声明
    //[return [returnValue];]  
}
//示例：
function valueTest(x, y){
    var z = x + y;
    alert(z);
}

//直接量方法
functionName = function([argsList]){
    //function body;
    //[return [returnValue];]
}
//示例：
funcTest = function(){
    console.log("xxx");
}

//动态匿名方法
var functionName = new Function("[argsList]", "function body;");
//示例：
var thirdMethod = new Function("", "console.log('zzxxcc')");	//没有参数

无论以任何形式定义的函数，在调用时都以functionName([argsList])调用

例如：οnclick=“functionName(1, 2)” 即可调用functionName函数

调用带参数的函数

javascript传参规则与java类似，实参和形参数量一致，按顺序传递

//定义函数
function functionName(形参1, 形参2, ...){
    //函数体;
}
//调用
functionName(实参1, 实参2, ...);

函数返回值

有返回值的函数将值返回到调用它的地方

使用return关键字来返回值，也可使用return来退出函数

//定义
function func(a, b){
    return a*b;
}
//调用
var c = func(3, 5);		//c = 15;

//退出函数
function myfunc(a, b){
    if(a > b){
        return;		//若a > b，则函数结束执行，反之则继续
    }
    console.log(b - a);
}

javascript局部变量、全局变量、未声明变量、变量生存期

在函数内部使用var声明的是局部变量，仅在函数内部能访问
在函数外声明的都是全局变量，网页上所以脚本和函数都能访问
未声明变量，即未使用var声明就直接使用的变量赋值后将被自动作为全局变量如：pageName = “myPage”;
js的变量生命期从被声明开始就存在，局部变量会在函数执行以后被删除，全局变量会在页面关闭以后被删除

javascript作用域

作用域是可访问变量的集合，有全局作用域和局部作用域，对应的全局变量和局部变量

局部作用域

//此处不可访问name

function mfunc(){
    var name = "zhangsan";
    
    //此处可访问name 
}

name在函数中定义，是局部变量，作用域只在局部，在函数外部无法访问

全局作用域

var name = "zhangsan";

//此处可访问name

function mfunc(){
    //此处可访问name
    console.log(name);
    
    //未使用var关键字定义的变量，作用域也为全局
    id = 123456;
    
    //此处可访问id
}

//在此处可访问id

name在函数外定义，作用域为全局，可在任何地方访问

HTML中的全局变量

html中全局变量都是window对象，所有数据变量都属于window对象

function mfunc(){
    adminName = "TSYMQ";
}

//此处可访问window.adminName

我会抽时间接着整理后续的内容，同时也多学习，希望大家能共同努力，共同进步！

糖送圆茗亲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录