不再犹豫
分享是一种美德
        找回密码

首页 第9页

去分类设置中添加分类描述吧

JavaScript基础到入门练习011-JS变量小结

wangtong阅读(1185)

1、为什么需要变量？

因为我的一些数据需要保存，所以我们需要变量。

2、变量是什么？

变量其实就是一个容器，用来存储数据的，我们可以使用里边的数据进行处理。

3、变量的本质是什么？

变量是内存里的一块空间，用来存储数据。

4、变量怎么使用？

a、使用变量的时候一定要声明变量，然后赋值。

b、声明变量本质是去内存申请空间。

5、变量的初始化？

即声明变量并赋值。

6、变量命名规范有哪些？

命名尽量规范，见名知意，采用驼峰，区分大小写。

7、交换变量的思路？

采用中间临时变量。

JavaScript基础到入门练习010-JS变量练习

wangtong阅读(1246)

交换两个变量的值，使用临时变量用来做中间存储。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js变量练习</title>
<script>
	//1、创建一个临时变量 temp
	//2、把 a1 的值传给 temp
	//3、把 a2 的值传给 a1
	//4、把 temp 的值传给 a2
	var temp;
	var a1 = '原始a1';
	var a2 = '原始a2';
	temp = a1;
	a1 = a2;
	a2 = temp;
	console.log(
		'新的a1:'+a1,
		'新的a2:'+a2
	);
</script>
</head>
<body>
</body>
</html>

JavaScript基础到入门练习009-JS变量的命名规范

wangtong阅读(7037)

在javaScript中，变量名需要遵循以下规则：

1.首字母必须是字母、下划线（-）或者美元符号（$）。

2.其他字母可以是下划线（_）、美元符号（$）、字母或者数字。

3.一般采用驼峰法：第一个字母小写，其余有意义的单词首字母大写。

4.变量名是区分大小写的，不能是关键字或保留字。比如：var for if

5.变量名必须有意义，尽量不要采用简写。

//正确的命名

var  width =100；

var  _height=200；

var  $2=15;

var myName=“kim”;

//错误的命名

var  2th=2；//不能以数字开头

var typeOf=15；//不能是关键字或保留字

变量的命名区分大小写

var a=1；

var A=1；

这里a与A不是同一个变量。

此外javaScript的标识符是指变量、函数、属性的名字，或者函数参数的名字。标识符的命名规则和变量的命名规则是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js变量命名规范</title>
<script>
	var app = '10';
	var App = '100';
	console.log(app);//输出 10
	console.log(App);//输出 100
</script>
</head>
<body>
</body>
</html>

JavaScript基础到入门练习008-JS变量的语法扩展

wangtong阅读(1266)

1、更新变量

一个变量被重新复赋值后，其原来的值就会被覆盖掉，其值将以最后一次赋值为准。

	var myname = 'Mr.Naas';
	console.log(
		'myname is:'+myname,
		);
//输出 Mr.Naas
	myname = 'new name';
	console.log(
		'mynewname is:'+myname,
		);
//输出  new name

2、声明多个变量

同时声明多个变量，只需要一个var，多个变量名之间用英文逗号分割，最后一个用分号。

	var address = 'XXXXXXX',
		age = 18,
		email = 'mrnaas@mrnaas.com',
		gz = 2000;

3、声明变量的特殊情况

//3、声明变量的特殊情况
	//3.1只声明不赋值  结果？
	var sex;
	console.log(sex);
	//输出  undefined
	//3.2 不声明 不赋值 直接使用 结果直接报错
	// console.log(tel); //报错  tel is not defined
	//3.3 不声明 直接赋值
	qq = 111;
	console.log(qq);
	// 输出结果 111

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js变量语法扩展</title>
<script>
	//1、更新变量
	var myname = 'Mr.Naas';
	console.log(
		'myname is:'+myname,
		);
	myname = 'new name';
	console.log(
		'mynewname is:'+myname,
		);
	//2、声明多个变量

	// var address = 'XXXXXXX';
	// var age = 18;
	// var email = 'mrnaas@mrnaas.com';
	// var gz = 2000;

	var address = 'XXXXXXX',
		age = 18,
		email = 'mrnaas@mrnaas.com',
		gz = 2000;
	//3、声明变量的特殊情况
	//3.1只声明不赋值  结果？
	var sex;
	console.log(sex);
	//输出  undefined
	//3.2 不声明 不赋值 直接使用 结果直接报错
	// console.log(tel); //报错  tel is not defined
	//3.3 不声明 直接赋值
	qq = 111;
	console.log(qq);
	// 输出结果 111
</script>
</head>
<body>
</body>
</html>

JavaScript基础到入门练习006-JS输入输出语句

wangtong阅读(1314)

为了方便信息的输入输出，js提供了输入输出语句，常用的如下：

1、alert(msg)【浏览器弹出警示框】

2、console.log(msg) 【浏览器控制台输出内容】

3、prompt(msg) 【浏览器弹出输入框，提供用户进行输入】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js注释</title>
<script>
	//这是一个输入框
	prompt('请输入您的姓名！');
	//弹出警示框  输出展示给用户的
	alert('1、我是alert！');
	//控制台输出  程序员测试使用
	console.log('我是测试日志！');
</script>
</head>
<body>
</body>
</html>

下一篇开始学习JS变量

JavaScript基础到入门练习005-JS注释

wangtong阅读(1040)

js注释分为单行注释和多行注释：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js注释</title>
<script>
	//1、单行注释
	/*
	2、多行注释
	*/
</script>
</head>
<body>
</body>
</html>

下一篇学习js输入输出语句

JavaScript基础到入门练习004-JS初体验

wangtong阅读(1724)

JS代码书写位置有三种：行内、内嵌、外部。

1、行内js

<!-- 1、行内js代码 直接写在元素内部-->
<input type="button" value="问候" onclick="alert('hello world!')">

（1）适用于单行或者少量的js代码写在HTML标签的事件属性中（on开头）：例如：onclick

（2）注意单双引号使用，HTML推荐使用双引号，JS中推荐使用单引号

（3）写在行内可读性差，引号易错，引号多层嵌套易混乱，仅推荐在特殊情况下使用。

2、内嵌js

<!-- 2、内嵌的js代码 -->
<script>
	alert('内嵌js！！');
</script>

（1）可以将多行的js代码写在javascript标签中，是我们常用的

3、外部js

<!-- 3、外部js javascript 栓标签 -->
<script src="./js/test001js初体验.js"></script>

（1）有利于HTML页面代码结构化，可以将大量的jd代码独立于HTML页面之外，既美观又可以实现文件的复用性。

（2）引用的外部js文件的javascript标签中不可以写代码的。

（3）适用于代码量比较大的情况下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js初体验</title>
<!-- 2、内嵌的js代码 -->
<!-- <script>
	alert('内嵌js！！');
</script> -->
<!-- 3、外部js javascript 栓标签 -->
<!-- <script src="./js/test001js初体验.js"></script> -->
</head>
<body>
	<!-- 1、行内js代码 直接写在元素内部-->
	<!-- <input type="button" value="问候" onclick="alert('hello world!')"> -->
</body>
</html>

下一篇学习js注释！

JavaScript基础到入门练习003-js组成

wangtong阅读(1443)

JS由三部分组成：

ECMAScript（JavaScript语法）基础主要学习此点 学习基本语法

（1）JavaScript（网景）或Jscript（微软）

（2）ECMAScript规定了js的编程语法和基础核心，是所有浏览器厂商共同遵守的一套js语法工业标准。

DOM（页面文档对象模型） jsapi

W3C组织推荐的处理可扩展标记语言的标准接口编程，通过DOM提供的接口操作页面元素。

BOM（浏览器对象模型）jsapi

提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器的窗口，弹框、控制浏览器跳转等。

下一篇学习js初体验！

JavaScript基础到入门练习002-浏览器执行js

wangtong阅读(1459)

1、浏览器组成：渲染引擎和JS引擎

（1）渲染引擎（内核）：用来解析HTML+CSS（chrome的blink、老版的webkit）

（2）JS引擎（JS解释器）：读取网页中的JavaScript代码并对其进行处理后运行（chrome V8）

浏览器本身不运行JS，是通过JS解释器执行JS代码，对其逐行解释转为计算机语言后由计算机执行，因此JS为脚本语言，逐行解释执行。

<script>
	alert('我是JS01，开始弹框！！');
	alert('我是JS02，开始弹框！！');
</script>

下一篇学习js组成

JavaScript基础到入门练习001-js基础

mrnaas阅读(1355)

js 是 JavaScript 的缩写
1、脚本语言、专门用来负责网页上的行为（可以直接写到网页中）

2、在哪儿写js代码
a.可以写在script标签中（理论上script标签可以放到HTML文件中的任何位置，
实际开发中一般放在head或者body中）
b.写到标签的事件属性中（列如：onclick）
c.写到外部的js文件中

3、js在网页中能做什么事情
a.在网页的不同的位置插入html代码
b.修改某个标签的内容
c.修改某个标签的样式

4、怎么写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        <!--导入外部的js文件-->
        <!--<script src="js/index.js">
            
        </script>-->
        <script src="js/数据类型.js" ></script>
        
        <!--一个html可以在多个位置插入script标签-->
        <script type="text/javascript">
            function insertP(){
                document.write('<p>Python</p>')
            }
        </script>
    </head>
    <body>
        
        <h1 id="h">各类学科</h1>
        
        <button onclick="window.alert('按钮被点击')"></button>
        
        <button onclick="document.getElementById('h').style.color='red'">修改样式</button>
        
        <button onclick="document.getElementById('h').innerHTML='name'">修改内容</button>
        
        <!--往html中插入内容-->
        <script type="text/javascript">
            for (var i = 0; i < 7; i++) {
                document.write("<p>殺</p>")
            }
        </script>
    </body>
</html>

js.gif

基础语法

1、js中的注释
//这是单行注释
/*
这是多行注释
*/

2、语句
一条语句结束需要加分号（现在的js版本也可以不写）
一行写多条语句必须使用分号隔开

在控制台打印括号中的内容，功能和Python中的print差不多

console.log('hello word')

3、js没有缩进问题，用花括号表示一个代码块

function print(){
    console.log('hello JS')
}

4、基本数据类型
Number（数字）、String（字符串）、Boolean(布尔)、Array（数组）、Object（对象）、Function（函数）、null、undefined

5、字面量
数字字面量

89(整数)
66
12.34（小数）
3e8（科学计数）

字符串字面量

'asd'
"asd"

布尔字面量

true
false

数字字面量

[1,2,'asd',true]

对象的字面量(对象的key值又是属性，不能加引号)

var dict = {a:'asd'}

6、标识符
使用标识符来命名
a.字母数字下划线$组成，不能以数字开头

var huanhansan;

b.不能是关键字
c.大小写敏感
d.规范：见名知义、

声明变量

在js中可以通过声明变量来保存数据
语法
var 变量名；
var 变量名 = 初值；
说明：var是关键字
变量名：标识符，不能随意使用_或$开头（具有特殊含义）；驼峰式命名(命名规则:第一个单词首字母小写，后面每个单词的首字母大写)。

//声明变量
var userName;
//给变量赋值
userName = 'GHope'
console.log(userName)

var score = 100
console.log(score)

//同时声明多个变量
var name, age, sex;

//一个变量可以存储任意类型的值，变量的默认值是undefined
var a = 'abc'
a = 100

介于C与Python之间，类似于C的地方在于关键字的必须使用，类似于Python的地方在于同为动态语言（声明变量的时候不需要指定变量的数据类型）。

运算符

1、数学运算符：+，-，*，/，%，++，–

a.-,+,*,%和数学中的求和、求差以及求乘积、取余是一样的

var a = 10+20
var b = 20-10
var c = 10*20
var d = 7%2

b./和数学中的除一样

var e = 5/2
console.log(e)

c.++,–(单目运算符)

语法：变量++，变量–/++变量，–变量
区别：在后面先赋值，再运算；在前面先运算，再赋值
++:自加一
–：自减一

var a1 = 10
a1++
console.log(a1)
a1--
console.log(a1)

2、比较运算符：>,<,==(相等),!=,>=,<=,===（完全相等）,!==,>==,<==

结果都是布尔值

console.log(10>20)
console.log(10<20)

//==:判断值是否相等
console.log(5==5)
console.log(5=='5')

//===:判断值和类型是否相等
console.log(5===5)
console.log(5==='5')

3.逻辑运算符（&&：与，||：或，！非）

 

console.log('与:',true&&true,true&&false)

4、赋值运算：=，+=，-=，*=，/=,%=

赋值运算符的左边必须是变量

var a = 100
a += 10
console.log(a)

5、三目运算符（？ ：）

基本格式：
条件语句 ？ 值1：值2
结果：
判断条件语句的结果是否是true，如果是true，那么表达式的结果是值1，否则为值2

var b = 10 > 20 ? 10 : 20
console.log(b)

//求两个数的最大值
var ca = 80
var cb = 100
console.log(ca>cb?ca:cb)

6、运算符的优先级

赋值运算符<逻辑运算符<比较运算符<算术运算符
可以通过添加（）改变

控制台输出结果

貌似是控制台输出结果不完全，只能输出第一个对象，所以之后的实例代码通过网页的查看中截图显示。例如：39行中输出超过一个，就只显示第一个，没有逻辑运算符的值。

网页—查看—console

分支结构

js中的分支结构有两种：if语句，switch语句

1.if语句

a.if(条件语句){满足条件要执行的代码块}

var age = 18
if(age>=18){
    console.log('成年')
}

b.if(条件语句){代码块1}else{代码块2}

if(age>=18){
    console.log('成年')
}else{
    console.log('未成年')
}

c.if – else if – else（相当于python中elif）

if(age<18){
    console.log('未成年')
}else if(age<33){
    console.log('青年')
}else{
    console.log('老年')
}

2、switch语句

 

 switch(变量){
    case 值：
        语句1；
        break；
    case 值：
        语句2；
        break；
     ...
    default:
        语句n;
        break;  
 }

执行过程：使用变量的值依次和后边每个case后边的值进行判断，看是否相等（完全相等）。如果相等就执行那个case后面对应的语句。如果前面每个case后面的值都和变量的值不相等，就执行default后边的语句。

var score = 5;
switch (score){
    case 0:
        console.log('留级，扣1分')
        break;
    case 1:
        console.log('留级')
        break;
    case 2:
        console.log('升级')
        break;
    case 3:
        console.log('升级，加1分')
        break;
    case 4:
        console.log('升级，加2分')
        break;
    default:
        console.log('你可以提前毕业了！')
        break;
}

10分制：0-5：不及格，6-7：及格，8-9：良好，10：优秀

score = 9
switch(score){
    case 0:
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        console.log('不及格');
        break;
    case 6:
    case 7:
        console.log('及格');
        break;
    case 8:
    case 9:
        console.log('良好');
        break;
    case 10:
        console.log('优秀');
        break;
}

switch出现的目的是在某些情况下简化if循环

//0-6表示星期1到星期日
var week = 0;
switch (week){
    case 0:
        console.log('周一');
        break;
    case 1:
        console.log('周二');
        break;
    case 2:
        console.log('周三');
        break;
    case 3:
        console.log('周四');
        break;
    case 4:
        console.log('周五');
        break;
    case 5:
        console.log('周六');
        break;
    case 6:
        console.log('周日');
        break;
    default:
        console.log('非法值');
        break;
}

无错漏的控制台截图

循环结构

js的循环分为for循环和while循环

1、for循环：

a.for – in (和python中的for循环一样)
for(变量 in 数组/对象){函数体}

var arr = [1,2,3,'abc']
//x取的是下标
for(var x in arr){
    console.log(arr[x])
}

var obj = {name:'GHope',age:18}
//key取的相当于python中字典的键or属性名
for(var key in obj){
    console.log(key,obj[key])
}

b.for(变量；判断；操作（多为自加或自减）){循环体}
执行顺序：先声明变量，然后进行判断，如果结果为真，则执行循环体，后进行操作，操作结束后继续判断，直到判断结果为假，结束循环.上述fori为我自己了解的，只适用于大多数情况，以下为通用版—-
for(表达式1;表达式2；表达式3){循环体}
执行过程:先执行表达式1，然后再判断表达式2的结果是否是true,如果是true就执行循环体；执行完循环体，再执行表达式3；执行完表达式3，再判断表达式2的结果是否是true，如果是true又执行循环体；执行完循环体，再执行表达式3；依次类推，直到表达式2的结果是false,循环就结束

var sum = 0
for (var i = 1; i < 101; i++) {
    sum += i
}
console.log(sum)

2.while循环

a.while(条件语句){循环体}

var sum1 = 0,i = 1
while(i<=100){
    sum1 += i;
    i++;
}
console.log(sum1)

b.do – while循环：do{循环体}while（条件语句）；
执行过程，先执行循环体，然后判断条件是否成立。如果成立再执行循环体。。
。依次类推，直到条件不成立，循环结束

var sum2 = 0
var i = 1
do{
    sum2 += i;
    i++;
}while(i<=100)
console.log(sum2)

3、break和continue
break结束当前循环
continue结束当次循环

函数

1、函数的声明

function 函数名(参数列表){函数体}
a.function – 关键字
b.函数名 – 驼峰式命名；见名知义
c.参数：参数可以有默认值，但有默认值的参数要写在后边。因为js中的函数只能根据位置传参。要保证每个参数都有值才能有效调用该函数。
d.函数体：实现函数的功能。只有在调用的时候才执行

function func1(num1,num2){
    console.log('求两个数的和')
    return num1+num2
}
console.log(func1(10,20))

函数没有return的时候，函数的返回值是undefined

function func2(){
    console.log('iamfunnction')
}
console.log(func2())

2.函数的调用
函数名（实参列表）

3、作用域
全局变量：声明在函数外面的变量（从变量声明到文件结束）
局部变量：声明在函数里面的变量（从函数声明到函数结束;函数参数)

//全局变量
var aa = 10

function func3(){
    //局部变量
    var bb = 100
    console.log(bb)
    
    //函数中可以修改全局变量的值
    aa = 200
    
    //函数中可以声明函数
    function func31(){
        bb = 1
        console.log(bb)
    }
    func31()
}

func3()
//func31()   Uncaught ReferenceError: func31 is not defined 函数中的函数只能在函数中调用
console.log(aa)
//console.log(bb)  Uncaught ReferenceError: bb is not defined

//可以将函数作为变量
var a = func2
a()

//不支持不定参数

数据类型

基本分类：数字、字符串、布尔、列表、对象

1、数字：整数 or 小数

 

var num1 = 10
var num2 = new Number()
console.log(num2)

2、字符串

a.”或””括起来的字符集
b.转义字符
c.字符编码是unicode编码

var str1 = 'abc'
var str2 = "abc"
var str3 = '\n'

d.获取字符串长度：字符串.length

console.log(str1.length)

e.获取单个字符：字符串[下标]
下标：1、范围是0~长度-1;2、如果越界，不报错，但返回的结果是未定义
js中的字符串不能切片

console.log(str1[10])

f、运算符
js中字符串只支持+，不支持*
字符串1+字符串2 — 拼接两个字符串
js中字符串可以和其它任何数据进行加操作，其效果都是字符串连接（会将其它数据转换成字符串）

console.log('123'+'abc')
//字符串相关方法（查）
var str = 'abc123'
var re = str.search(/\d{3}/i)
console.log(re)

3、对象，构造方法（类）

 

var obj1 = {name:'GHope',age:18}
console.log(obj1.name,obj1['name'])

//声明构造方法
function Person(){
    this.name = 'Luners'
    this.age = 18
    this.sex = '男'
}
var p1 = new Person()
console.log(p1,typeof(p1))

作者：GHope
链接：https://www.jianshu.com/p/db01d059f25b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

置顶推荐

吐血推荐

51LA网站统计V6

【51LA网站统计V6】新人注册立得5元现金收益～现在加入“优站计划”，还有额外收益赚取，点击此处了解详情

腾讯云-专属

精选爆款云产品

大额代金券等你领

热门文章

热门标签

WEB (72)js (67)前端 (64)CSS (55)javascript (32)HTML (31)jQuery (17)英语学习 (15)nodejs (12)deepin (8)React (8)插件 (7)Vue (6)linux (5)npm (4)MN乐享 (4)React全家桶 (4)英语语法 (4)Java (3)Python (3)购物推荐 (3)MN购物 (3)uos (3)微信小程序 (3)URL Scheme (3)前端面试题 (3)测试 (2)自适应 (2)后端 (2)美文欣赏 (2)
2023年 9月
一 二 三 四 五 六 日
 123
45678910
11121314151617
18192021222324
252627282930  

网站统计

  • 日志总数：152
  • 评论总数：41
  • 标签总数：195
  • 页面总数：8
  • 分类总数：19
  • 链接总数：1
  • 用户总数：87
  • 最后更新：2023-09-11