分享
是一种美德

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

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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

分享按钮
赞(3)
转载请注明来源地址:MN乐享 » JavaScript基础到入门练习001-js基础

评论 1

评论前必须登录!

 

  1. #-49

    支持一下

    wangtong4个月前 (03-25)