SlideShare a Scribd company logo
Programming Languages
Building a Web Brower
Instructor : Westley Weimer
1
2
3
Syntactical Analysis
(identifier, number, …)
Syntactical
Analysis
Parse TreeList of Tokens
∙∙∙
the process of turning a sequence of tokens into a parse tree
4
Parse Tree
represent the syntactic structure of a string according to some grammar
"1+2+3"
exp → exp + exp
exp → exp – exp
exp → number
exp
exp exp+
exp exp+
num num
num
1 2 3
⇒
5
Why Parse Tree?
although this tree structure is cumbersome for us, it's very convenient for computers
"<b>wecome to web page</b>"
html → elt html
html → E
elt → word
elt → to word tc
to → <word>
tc → </word>
html
elt html
to tchtml
word
E
b
< > < /elt
word
welcome
html …
elt html
……
6
How Parse Tree?
Top-down VS Bottom-up
exp
exp exp+
exp exp+
num num
num
1 2 3
①
②
③
④
⑤
exp
exp exp+
exp exp+
num num
num
1 2 3
⑤
④
③
②
①
7
How Parse Tree?
S
ACTION GOTO
, a $ LIST ELE
0 s3 1 2
1 s4 acc
2 r2
3 r3 r3
4 s3 5
5 r1
STEP STACK
IN
PUT
ACTION TREE
1 0 a, a$ shift 3 Node(a)
2 0 a 3 , a$ reduce 3 Tree(3)
3 0 ELE , a$ GOTO 2
4 0 ELE 2 , a$ reduce 2 Tree(2)
5 0 LIST , a$ GOTO 1
6 0 LIST 1 , a$ shift 4 Node(,)
7 0 LIST 1 , 4 a$ shift 3 Node(a)
8 0 LIST 1 , 4 a 3 $ reduce 3 Tree(3)
9 0 LIST 1 , 4 ELE $ reduce 1 Tree(1)
10 0 LIST $ GOTO 1
11 0 LIST 1 $ accept Return
LIST
LIST
ELEMENT
a , a
ELEMENT
①
②
④
⑨
⑧
⑦⑥
G = ({LIST, ELEMENT}, {, , a}, P, LIST)
P : LIST → LIST , ELEMENT
P : LIST → ELEMENT
P : ELEMENT → a
8
exp
exp exp+
exp exp+
num num
num
1 2 3
+
+ 3
1 2
Abstact Syntax Tree
not representing every detail appearing in the real syntax
⇒
9
Python Lex-Yacc
A computer program that generates parser
ParserToken Parse Tree
YaccInput
Definition section
%%
Rules section
%%
C code section
10
tokens = (
‘LANGLE’, # <
‘LANGLESLASH’, # </
‘RANGLE’, # >
‘RANGLESLASH’, # />
‘EQUAL’, # =
‘STRING’, # “love”
‘WORD’, # like
)
1. Define Name of Token
11
G : exp → number
→ def p_exp_number(p):
’exp : NUMBER’
p[0] = (“number”, p[1])
G : exp → not exp
→ def p_exp_not(p):
’exp : NOT exp’
p[0] = (“not”, p[2])
2. Define Grammar
12
→ jslexer = lex.lex()
jsparser = yacc.yacc()
jsast = jsparser.parse(jscode, lexer=jslexer)
print jsast
3. Building and Using the Parser
13
Python Code
14
Input(Jscode) = myfun()
→ (‘call’, ‘myfun’, [])
Input(Jscode) = myfun(11,12,13)
→ (‘call’, ‘myfun’, [(‘number’, 11.0), (‘number’, 12.0)])
Output
15
- Changing the starting symbol
- Precedence
- Tracking Line Number
Notice
16
start = ‘arg’
→ def p_exp(p):
‘exp : NUMBER’
def p_arg(p):
’arg : exp’
Changing the starting symbol
the first rule defines the starting grammar rule
17
→ 1 - 2 - 3
Precedence
precedence = ((‘left’, ‘PLUS’, ‘MINUS’), #↑lower
(‘left’, ‘TIMES’, ‘DIVIDE’)) #↓higher
–
3–
21
–
–1
32?
“-4” “2”
18
→ def p_exp(p)
’exp : exp PLUS exp’
line = p.lineno(2) # line number of the PLUS token
index = p.lexpos(2) # Position of the PLUS token
Tracking Line Number
tracks the line number and position of all tokens
19

More Related Content

PPT
Unit vii wp ppt
PDF
Advanced perl finer points ,pack&amp;unpack,eval,files
PDF
Word games in c
PPTX
Powershell enum
PDF
Python and sysadmin I
PPT
Unix And C
PPTX
C Homework Help
PPT
01c shell
Unit vii wp ppt
Advanced perl finer points ,pack&amp;unpack,eval,files
Word games in c
Powershell enum
Python and sysadmin I
Unix And C
C Homework Help
01c shell

What's hot (20)

ODP
Programming Under Linux In Python
PDF
Bash Script Disk Space Utilization Report and EMail
PDF
File Space Usage Information and EMail Report - Shell Script
PDF
Basic NLP with Python and NLTK
ODP
Python quickstart for programmers: Python Kung Fu
PDF
Creating a Name seperator Custom Control using C#
PPTX
Introduction to Python and TensorFlow
PPTX
Unix Basic Commands
PPTX
Commit2015 kharchenko - python generators - ext
PDF
Shell Script to Extract IP Address, MAC Address Information
PPTX
File handling in c language
PPTX
Lecture 6: linked list
PPT
Introduction to Perl
PPTX
2015 555 kharchenko_ppt
PDF
Impala: A Modern, Open-Source SQL Engine for Hadoop
PPT
Unix command-line tools
PPT
Manipulating strings
PPTX
Python 101++: Let's Get Down to Business!
PPTX
Linked list
Programming Under Linux In Python
Bash Script Disk Space Utilization Report and EMail
File Space Usage Information and EMail Report - Shell Script
Basic NLP with Python and NLTK
Python quickstart for programmers: Python Kung Fu
Creating a Name seperator Custom Control using C#
Introduction to Python and TensorFlow
Unix Basic Commands
Commit2015 kharchenko - python generators - ext
Shell Script to Extract IP Address, MAC Address Information
File handling in c language
Lecture 6: linked list
Introduction to Perl
2015 555 kharchenko_ppt
Impala: A Modern, Open-Source SQL Engine for Hadoop
Unix command-line tools
Manipulating strings
Python 101++: Let's Get Down to Business!
Linked list
Ad

Similar to codin9cafe[2015.02.25]Open course(programming languages) - 장철호(Ch Jang) (20)

PDF
Ch04
ZIP
Round PEG, Round Hole - Parsing Functionally
PDF
Perl6 Regexen: Reduce the line noise in your code.
PDF
Syntaxdirected (1)
PDF
PDF
PPT
Antlr V3
PDF
Python Cheatsheet_A Quick Reference Guide for Data Science.pdf
PPT
Ch2 (1).ppt
PDF
Python_Cheat_Sheet_Keywords_1664634397.pdf
PDF
Python_Cheat_Sheet_Keywords_1664634397.pdf
PDF
14-Strings-In-Python strings with oops .pdf
PPT
Compiler design lessons notes from Semester
PDF
Writing a compiler in go
PDF
仕事で使うF#
PPT
Introduction to Python
PPT
Scala presentation by Aleksandar Prokopec
PPT
An Annotation Framework for Statically-Typed Syntax Trees
Ch04
Round PEG, Round Hole - Parsing Functionally
Perl6 Regexen: Reduce the line noise in your code.
Syntaxdirected (1)
Antlr V3
Python Cheatsheet_A Quick Reference Guide for Data Science.pdf
Ch2 (1).ppt
Python_Cheat_Sheet_Keywords_1664634397.pdf
Python_Cheat_Sheet_Keywords_1664634397.pdf
14-Strings-In-Python strings with oops .pdf
Compiler design lessons notes from Semester
Writing a compiler in go
仕事で使うF#
Introduction to Python
Scala presentation by Aleksandar Prokopec
An Annotation Framework for Statically-Typed Syntax Trees
Ad

More from codin9cafe (9)

PPTX
codin9cafe[2015.05.20]Dom - 안민영
PPTX
codin9cafe[2015.03. 18]Git 브랜치 - 김병수
PPT
codin9cafe[2015.03. 18]Python learning for natural language processing - 홍은기(...
PPTX
codin9cafe[2015.03.04]Open course(programming languages) - 장철호(Ch Jang)
PPTX
Open course(programming languages) 20150211
PPTX
codin9cafe[2015.02.04]Git의 기초(2) - 김병수
PPTX
codin9cafe[2015.01.28]Open course(programming languages) - 장철호(Ch Jang)
PPTX
codin9cafe[2015.01.22]Intro to computer science - 최지선
PPTX
codin9cafe[2015.01.29]Interactive 3D graphics - 박희수
codin9cafe[2015.05.20]Dom - 안민영
codin9cafe[2015.03. 18]Git 브랜치 - 김병수
codin9cafe[2015.03. 18]Python learning for natural language processing - 홍은기(...
codin9cafe[2015.03.04]Open course(programming languages) - 장철호(Ch Jang)
Open course(programming languages) 20150211
codin9cafe[2015.02.04]Git의 기초(2) - 김병수
codin9cafe[2015.01.28]Open course(programming languages) - 장철호(Ch Jang)
codin9cafe[2015.01.22]Intro to computer science - 최지선
codin9cafe[2015.01.29]Interactive 3D graphics - 박희수

Recently uploaded (20)

PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Electronic commerce courselecture one. Pdf
PPT
Teaching material agriculture food technology
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Encapsulation theory and applications.pdf
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
DOCX
The AUB Centre for AI in Media Proposal.docx
PPTX
Cloud computing and distributed systems.
PPTX
Programs and apps: productivity, graphics, security and other tools
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Spectral efficient network and resource selection model in 5G networks
PPTX
Spectroscopy.pptx food analysis technology
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Chapter 3 Spatial Domain Image Processing.pdf
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Per capita expenditure prediction using model stacking based on satellite ima...
Electronic commerce courselecture one. Pdf
Teaching material agriculture food technology
Building Integrated photovoltaic BIPV_UPV.pdf
Unlocking AI with Model Context Protocol (MCP)
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Reach Out and Touch Someone: Haptics and Empathic Computing
Encapsulation theory and applications.pdf
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
The AUB Centre for AI in Media Proposal.docx
Cloud computing and distributed systems.
Programs and apps: productivity, graphics, security and other tools
The Rise and Fall of 3GPP – Time for a Sabbatical?
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Spectral efficient network and resource selection model in 5G networks
Spectroscopy.pptx food analysis technology

codin9cafe[2015.02.25]Open course(programming languages) - 장철호(Ch Jang)

  • 1. Programming Languages Building a Web Brower Instructor : Westley Weimer 1
  • 2. 2
  • 3. 3 Syntactical Analysis (identifier, number, …) Syntactical Analysis Parse TreeList of Tokens ∙∙∙ the process of turning a sequence of tokens into a parse tree
  • 4. 4 Parse Tree represent the syntactic structure of a string according to some grammar "1+2+3" exp → exp + exp exp → exp – exp exp → number exp exp exp+ exp exp+ num num num 1 2 3 ⇒
  • 5. 5 Why Parse Tree? although this tree structure is cumbersome for us, it's very convenient for computers "<b>wecome to web page</b>" html → elt html html → E elt → word elt → to word tc to → <word> tc → </word> html elt html to tchtml word E b < > < /elt word welcome html … elt html ……
  • 6. 6 How Parse Tree? Top-down VS Bottom-up exp exp exp+ exp exp+ num num num 1 2 3 ① ② ③ ④ ⑤ exp exp exp+ exp exp+ num num num 1 2 3 ⑤ ④ ③ ② ①
  • 7. 7 How Parse Tree? S ACTION GOTO , a $ LIST ELE 0 s3 1 2 1 s4 acc 2 r2 3 r3 r3 4 s3 5 5 r1 STEP STACK IN PUT ACTION TREE 1 0 a, a$ shift 3 Node(a) 2 0 a 3 , a$ reduce 3 Tree(3) 3 0 ELE , a$ GOTO 2 4 0 ELE 2 , a$ reduce 2 Tree(2) 5 0 LIST , a$ GOTO 1 6 0 LIST 1 , a$ shift 4 Node(,) 7 0 LIST 1 , 4 a$ shift 3 Node(a) 8 0 LIST 1 , 4 a 3 $ reduce 3 Tree(3) 9 0 LIST 1 , 4 ELE $ reduce 1 Tree(1) 10 0 LIST $ GOTO 1 11 0 LIST 1 $ accept Return LIST LIST ELEMENT a , a ELEMENT ① ② ④ ⑨ ⑧ ⑦⑥ G = ({LIST, ELEMENT}, {, , a}, P, LIST) P : LIST → LIST , ELEMENT P : LIST → ELEMENT P : ELEMENT → a
  • 8. 8 exp exp exp+ exp exp+ num num num 1 2 3 + + 3 1 2 Abstact Syntax Tree not representing every detail appearing in the real syntax ⇒
  • 9. 9 Python Lex-Yacc A computer program that generates parser ParserToken Parse Tree YaccInput Definition section %% Rules section %% C code section
  • 10. 10 tokens = ( ‘LANGLE’, # < ‘LANGLESLASH’, # </ ‘RANGLE’, # > ‘RANGLESLASH’, # /> ‘EQUAL’, # = ‘STRING’, # “love” ‘WORD’, # like ) 1. Define Name of Token
  • 11. 11 G : exp → number → def p_exp_number(p): ’exp : NUMBER’ p[0] = (“number”, p[1]) G : exp → not exp → def p_exp_not(p): ’exp : NOT exp’ p[0] = (“not”, p[2]) 2. Define Grammar
  • 12. 12 → jslexer = lex.lex() jsparser = yacc.yacc() jsast = jsparser.parse(jscode, lexer=jslexer) print jsast 3. Building and Using the Parser
  • 14. 14 Input(Jscode) = myfun() → (‘call’, ‘myfun’, []) Input(Jscode) = myfun(11,12,13) → (‘call’, ‘myfun’, [(‘number’, 11.0), (‘number’, 12.0)]) Output
  • 15. 15 - Changing the starting symbol - Precedence - Tracking Line Number Notice
  • 16. 16 start = ‘arg’ → def p_exp(p): ‘exp : NUMBER’ def p_arg(p): ’arg : exp’ Changing the starting symbol the first rule defines the starting grammar rule
  • 17. 17 → 1 - 2 - 3 Precedence precedence = ((‘left’, ‘PLUS’, ‘MINUS’), #↑lower (‘left’, ‘TIMES’, ‘DIVIDE’)) #↓higher – 3– 21 – –1 32? “-4” “2”
  • 18. 18 → def p_exp(p) ’exp : exp PLUS exp’ line = p.lineno(2) # line number of the PLUS token index = p.lexpos(2) # Position of the PLUS token Tracking Line Number tracks the line number and position of all tokens
  • 19. 19