js基础

js的基本作用和使用方法

1.js是javas的缩写,是脚本语言。专门用来负责网页上的行为(可以直接写到网页当中)

2.在哪里去写JS代码
a.可以卸载script标签中(理论上script标签可以放到HTML文件中的任何位置,实际开发的时候一般放在head或者body里面)
b.写到标签的事件属性中(例如:onclick)
c.写到外部的JS文件中(.js)

3.JS在网页中能做什么事情
a.在网页的不同的位置插入HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>JS基础</title>
        
         <!--导入外部的JS文件 -->
        <!-- <script src="index.js"></script> -->
        <script src="js/07-数据类型.js" type="text/javascript" charset="utf-8"></script>
        
         <!--一个HTML中可以在多个位置中插入script标签 -->
        <script type="text/javascript">
            //在这里写JS代码
             function inser(){
                document.window.alert('<p>你好JS</p>');
             }
            
        </script>
    </head>
    <body>
        <h1 id="hh">千锋所有学科</h1>
        
         <!--修改标签的样式 -->
        <button onclick="document.getElementById('hh').style.color='red'">修改样式</button>
        
         <!--修改某个标签的内容 -->
        <button onclick="document.getElementById('hh').innerHTML='name'">1999</button>
         
        <script type="text/javascript">
            for (var i=0;i <100;i++) {
                document.write('<p>12324</p>');
            }
        </script>
        
    </body>
</html>

1.js基础语法

1.JS中的注释
//这是单行注释
/*
这是多行注释
*/

2.语句
一条语句结束要加分号
一行写多行语句必须用分号隔开

3.js中没有缩进问题 用{}表示一个块

4.基本的数据类型
Number(数字),String(字符串),Boolean(布尔类型),Array(数组)--列表,Object(对象)--字典 ,Function(函数),null

在控制台中打印括号里面的内容功能和python中的print一样

 console.log("hello world");
 console.log("hello js");

5.字面量
数字字面量

89;
100;
10.34;
3e8;

字符串字面量

'abc';
"abc";

布尔字面量

 true;
 false;

数组字面量

  [1,2,'ban','abc'];
  [];

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

 var dic = {q:'weuiq' ,b:'hh'}
 console.log(dic.q, dic['b'])

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

  var huu9_$;

b.不能是关键字
var for

c.大小写敏感,大写和小写不一样
d.规范:1.见名知意

2.变量的声明

在js中可以通过声明对象来保存数据

1.语法
var 变量名;
var 变量名 = 初值;
说明:var是关键字:
变量名:标识符,不能随意使用_或者$开头;驼峰式命名规则(第一个单词首字母小写,后面每一个单词的首字母大写)

声明变量

var userName;

给变量赋值

userName = 'wang';
consolse.log(userName)

var score = 100
console.log(score)

同时声明多个值

 var name, age,sex;
 var name1='abc',age1=23,sex

一个变量可以存储任意类型的值,声明变量的时候,变量没有赋值,默认是undefined

var a = 'abc'
a =100
a = score

3.运算符

1.数学运算符: +,-,*,/,%,++,--
a.加减乘和取余 和数学中的一样

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

b./和数学中的一样

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

c. ++ --
语法:变量++/变量-- ;++变量/--变量
++ 自加1
-- 自减1

 var a1 = 10
 var b1 = 10
 a1++
 ++b1
 console.log(a1,b1) //11,11
 a1--
 --b1
 console.log(a1,b1) //10,10
 
 var c1 = a1++   //++/--写到后面的时候,先赋值,再自加/自减
 var c2 = ++b1   //++/--写到前面的时候,先自加/自减,再赋值
 console.log(c1,c2)   //10 11

比较运算符: >,<,==(相等),!=,<=,>=,===(完全等于),!==,>==,<==
结果都是布尔值

 console.log(10 > 20)  //false

==:判断内容是否相等

 console.log(5==5)
 console.log(5=='5')

===:判断值和类型是否相等

 console.log(5===5)  //ture
 console.log(5==='5')  //false
 
 console.log(5!==5)  //false
 console.log(5!=='5')  //ture

3.逻辑运算符:&&(与),||(或),!(非)

  console.log(true&&false,true&&false)
  console.log(true||false,true||false)
  console.log(!true)

4.赋值运算符: =,+=,-=,/=,+=,%=
赋值运算符的左边必须是变量和python一样

  var a =100
  a += 10
  a -= 10
  a %= 10
  a /= 10
  console.log(a)

5.三目运算符 ?:
语法:
条件语句 ? 值1:值2
结果:判断条件语句的结果是否为true,如果是true,那么表达式的结果是值1,否则是值2

  var b = 10 > 20 ? 10:20 

求两个值的最大值

  var a1 = 80
  var a2 = 100
  console.log(a1 > a2 ? a1:a2)

6.运算符的优先级和python基本一样,可以通过括号来改变运算顺序

4.分支结构

js中的分支结构有两种:if语句和switch语句
1.js中的if语句
a.if(条件语句){满足条件要执行的代码块}

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

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

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

c.if else if else(相当于else elif else)

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

switvh语句
语法:

switvh(变量){
    case 值1:
        语句1:
        break;
    
    case 值2:
        语句2:
        break;
    
    ....
    default:
        语句3:
        break;
    
}

执行过程:使用变量的值依次和每一个case后面的值进行判断,看是否相等。
如果相等就执行那个case后面对应的语句,如果前面每一个case后面的值都和变量的值不相等,就执行default后面的语句

var score = 10
switch(score){
    case 1:
        console.log('F');
        break;   //如果没有break判断相等后的语句就会全部执行
    case 4:
        console.log('D');
        break;
    case 10:
        console.log('A');
        break;
    default:
    console.log('other');
    break;
}
console.log('====')

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;

0-6表示星期一到星期日

    var week = 0
    switch(week){
        case 0:
            console.log('week1');
            break;
        case 1:
            console.log('week2');
            break;
        case 2:
            console.log('week3');
            break;
        case 3:
            console.log('week4');
            break;
        case 4:
            console.log('week5');
            break;
        case 5:
            console.log('week6');
            break;
        case 6:
            console.log('week7');
            break;
        default:
            console.log('other');
            break;
    }

5.循环结构

js中的循环结构分为for循环和while循环

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

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

var obj1 = {name:'张三',age:30}
//key拿到的是属性名
for(var key in obj1){
    console.log(key,obj1[key])
}

var str1 = 'uwioe'
for(var x in str1){
    console.log(x,str1[1])
}

b. for(表达式1;表达式2;表达式3){循环体}
执行过程:先执行表达式1,然后再判断表达式2的结果是否为true,如果是true就执行循环体;执行完循环体,再执行表达式3;
执行完表达式3,在判断表达式2的结果是否是true,如果是true又执行循环体;执行完循环体,再执行表达式3,以此类推,直到
表达式2的判断结果为false,循环结束。

计算1+2+..+100

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

while循环
a.while(条件语句){循环体}
计算1-100的值

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

do-while循环:do{循环体}while(条件语句);
先执行循环体,然后判断条件语句是否成立.如果成立再执行循环体,以此类推,直到条件不成立,循环结束。
比while先执行一次

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

3.break和continue
和python一模一样.

6.函数

  1. 函数的声明
    function 函数名(参数列表){函数体}
    a.function 关键字
    b.函数名 驼峰式命名:见名知意
    c.参数:参数可以有默认值,有默认值的参数要写在后面。调用函数传参的时候,是按位置参数来传参。保证每一个参数都有值。
    d.函数体:实现函数的功能。只有在调用的时候才会执行
function sum1(num1,num2=1){
    console.log('两个数的和')
    return num1+num2
}

console.log(sum1(10,20))

函数没有返回值的时候,函数的返回值就是underfined

function fun1(){
    console.log('123')
}
console.log(fun1())

2.函数的调用
函数名(实参列表)
调用过程和python一样

3.作用域
全局变量:声明在函数外面的变量(从函数声明到文件结束)
局部变量:声明在函数里面的变量(从函数声明到函数结束,函数的参数也是局部变量)

aaa 全局变量

var aaa = 10

function fun2(){
    //bbb 局部变量
    var bbb = 10 
    
    //函数中可以修改全局变量的值
    aaa = 200
    
    //函数中可以声明函数
    function fun222(){
        bbb = 20
        console.log(bbb)
    }
}
fun2()
console.log(aaa)

可以将函数作为变量

var a = fun2()
a

个数不定参数,js不支持

7.数据类型

数字,字符串,布尔,列表,对象
1.数字:包括整数和小数(支持科学计数法)

var num1 = 10
var num2 = new Number()

console.log(num2+10)

2.字符串
a.''和"" 括起来的字符集
b.转义字符(和python一样)
c.字符编码是Unicode编码

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

e.获取字符串长度 字符串.length

a = str1.length
console.log(a)

f.获取单个字符
下标 1.范围是0-长度-1 2.如果越界,不报错,结果是undefined
js中的字符串不能切片

console.log(str1[1])

g.+运算符
js中只支持+,不支持*
字符串1+字符串2 --拼接两个字符串
js字符串可以和其他任何数据进行加操作,其效果是字符串连接(把其他的转换成字符串)

console.log('123'+'abc'+'123'*2+100)

h.字符串方法(查)(这里有点问题,用的时候先查查资料)

 var re = 'abc23'.search(/\d+/)
 console.log(re)

3.对象 构造方法(类)

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

声明构造方法

function person(name='',age=0,sex=''){
     this.name = name
     this.age = age
     this.sex = sex
 }
 var p11 = new person()
 p11.name = 'mmm'
 p11.age = 20
 p11.sex ='女'
 
 console.log(p11.name,p11.age,p11.sex)
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,138评论 0 13
  • 一、 入门 1、 JS代码书写的位置 写在行内 写在script标签中 写在外部js文件中,在页面引入 注意点: ...
    宠辱不惊丶岁月静好阅读 848评论 0 0
  • 毕业多年后,一天表弟在背《赤壁赋》时犯牢骚,我抓过来花了五分钟,就一字不差背下来了。看来“苏子与客泛舟于赤壁之下,...
    楠楠细时语阅读 542评论 0 1
  • 从今天开始,做一个优雅的女人,做一些有 趣的事,试着做个计划: 1.晚上喝一碗菜汁,做一个小时艾灸,...
    木易68阅读 193评论 0 0
  • 使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的open...
    值得一看的喵阅读 2,819评论 0 0